Developing Apps with the Builder
The Builder is your workspace in PlantPulse Studio. Describe what you want in the chat window on the left, and the AI agent will modify the actual app. The preview in the center updates immediately, and once everything is done, a single [Deploy] button sends it to the field.
There are two ways to open the Builder.
- Create an app from the home screen with a single sentence and the Builder opens right away → Create an App from Home
- For an existing app, go to Applications (fa-grid-2) in the sidebar and click [Open] on the app card → App Catalog and Sharing
Screen Layout — Numbers Are in Reading Order
| Number | Location | What It Does |
|---|---|---|
| ① | Top left | App name and status — if it shows 준비됨, the session container is running |
| ② | Agent Console header | Build · Query toggle — whether to modify the app or only ask questions about data |
| ③ | Bottom left | Message input — give instructions in plain language (Enter to send · Shift+Enter for a new line) |
| ④ | Just above the input | Plan · Auto · Accept — controls how independently the agent works |
| ⑤ | Preview header | Live Preview address — indicates what you're seeing is the "development server" |
| ⑥ | Right side of the preview | Viewport switcher — switch to desktop, tablet, or mobile |
| ⑦ | Next to that | Element picker — click an element on the screen to select it |
| ⑧ | Top right | Deploy — click here to update what your colleagues see |
The preview shows the development server as-is, so it changes immediately when the agent makes a change. The deployed version that your colleagues see only changes when you click ⑧ → Glossary
The status bar at the bottom shows the current model and the session container's CPU · memory.
Screen Layout
The Builder is divided into three vertical panes.
| Position | Name | What It Does |
|---|---|---|
| Left | Agent Console | The chat window for conversing with the agent. Tell it what to build or modify |
| Center | Live Preview | The app screen being built. It automatically refreshes when an instruction is completed |
| Right | Context | A thin rail showing the data, skills, and state used by this app. Closed by default |
You can widen or narrow the chat window by dragging the vertical divider between the left and center panes.
Top Toolbar
From the left: Back (fa-arrow-left, 애플리케이션 목록으로), the app name, and a status indicator (세션 준비 중… →
준비됨 → 생성 중… while processing an instruction). On the right, you have the following buttons:
| Button | Icon | Description |
|---|---|---|
| Deploy | fa-rocket-launch | Exports the current state for use in the field |
| Extract Skill | fa-lightbulb | Saves the know-how from this conversation as a skill → Field Skills |
| Save as Template | fa-bookmark | Saves this app's configuration as a starting point for the next app |
| Data | fa-database | Opens the Data Explorer |
| Code | fa-code | Opens the Code View |
| History | fa-clock-rotate-left | Opens the Change History |
| Export | fa-download | Downloads the entire app file as a compressed archive |
| Remote Push | fa-cloud-arrow-up | Sends the app to your company's Git repository (requires admin configuration) |
| Context Rail | fa-sidebar-flip | Rightmost button. Opens and closes the right rail |
If you've deployed at least once, a v1 앱 열기 ↗ chip appears next to [Deploy], and the icon next to it provides quick access to link sharing and the deployment version list.
Clicking the App item in the status bar at the bottom lets you check whether the app is currently 실행 중 or 정지됨, review its logs, and [Restart] it.
Sending Your First Instruction
Make sure [Build] is selected in the [Build] / [Query] toggle at the top of the chat window, then type what you want to do. (Query is a mode where you only ask about data without modifying the app → Querying Data via Chat)
- Press Enter to send, Shift+Enter for a new line
- Attach photos, sketches, or CSV files with the paperclip (fa-paperclip) to create an app that mirrors that screen
- While processing, the send button changes to a red Stop button
If the conversation is empty, you'll see sample prompts like 사이트 목록을 카드로 보여줘 — you can click one to get started.
Give one instruction at a time, and be specific. Include the target · presentation · condition — for example, "Show the temperature and pressure of line 3 as large number cards, and make them turn red if the temperature exceeds 90 degrees" — for much more accurate results.
While the agent is working, the chat shows a log of actions like 도구 호출: …, 파일 변경: …, and 커밋 ….
Clicking the 파일 변경: line opens the code view focused on that file.
The Three Modes
Just above the chat input, there's a segmented control: Plan · Auto · Accept. Your selection is remembered for the next time you open the Builder.
| Mode | Icon | Behavior | When to Use |
|---|---|---|---|
| Plan | fa-list-check | Doesn't build immediately — first shows you a screen design proposal. You review the screens, widgets, and required data on the 빌드 플랜 card and click [Approve and Build] to start the actual work | For new screens or large, complex requirements. Prevents the work from going in the wrong direction |
| Auto | fa-bolt | Modifies and saves right after you instruct (default) | Small edits, fast iteration |
| Accept | fa-check-double | Modifies but withholds saving. You must review the preview and manually accept to finalize | When modifying a live app, or when you want to verify the result visually |
In Accept mode, a yellow review bar appears above the input field when there are changes.
Review Pending — review in the preview, then accept or revert [Revert] [Accept (Commit)]
- [Accept (Commit)] — Finalizes the changes and records them in the change history
- [Revert] — Discards all changes from this session and returns to the previous state
Clicking [Close] on the 빌드 플랜 card returns your original request to the input field. Edit the sentence and send it again to receive a new proposal. If it's taking too long, you can stop it with [Cancel].
Slash Commands
Typing / in the input field displays a list of commands. These work only in Build mode.
| Command | Argument | What It Does |
|---|---|---|
/plan | Required | First get a screen design proposal, then build after approval |
/build | Required | Build directly with this content |
/review | — | Review recent changes (no file modifications) — only reports issues and improvement suggestions |
/fix | — | Find errors and provide fix instructions |
/test | — | Run type checking (tsc) — checks the app for syntax or type errors |
/loop | Optional | Repeatedly fix until it passes the check (up to 3 times) |
/deploy | — | Opens the deployment dialog |
/plan and /build require you to append content (e.g., /plan 보일러 압력 대시보드). If you omit it, the 이 명령에는 내용이 필요합니다 message appears and your input remains as-is.
Run /test to check for errors first; if there are any, then run /loop. You can also stop an ongoing process with the stop button, and once finished, use ✅ /loop 완료 or ⚠️ /loop 3회 반복 후에도 오류가 남았습니다 to report the results.
Using the Preview
In the preview header, you can change the screen size — Desktop (fa-display), Tablet (fa-tablet-screen-button) · Mobile (fa-mobile-screen-button). If the app will be viewed on phones in the field, build it in Mobile view. The Refresh (fa-rotate-right) and New Tab (fa-arrow-up-right-from-square) buttons next to it will also become frequently used.
Pointing Directly at Elements to Fix
Use this when it's hard to describe a location in words.
- Click [Element Picker] (fa-arrow-pointer) in the preview header → it changes to
요소를 클릭하세요… - Click the part in the preview you want to fix
- Quick action buttons appear above the chat input, along with the name of the selected element — Edit Text · Change Color · Make Bigger · Delete, and Custom Input
Clicking a button sends a sentence like 선택한 요소 [○○] — 색 변경 immediately. Choosing Custom Input fills the input field with that sentence so you can continue typing what you want.
The Four Drawers
Clicking the toolbar icons opens drawers on the right. Close them with Esc.
| Drawer | Opened By | Contents |
|---|---|---|
| Change History | fa-clock-rotate-left | List of all changes so far. Click a row to expand and see what was changed |
| Code | fa-code | List of files that make up the app and their contents (read-only) |
| Deployment Versions | fa-chevron-down on the v1 chip | List of deployed versions, rollback, and public/private status toggle |
| Data Explorer | fa-database | Navigate through Site → Asset → Tag to inspect, and click [Insert] to paste that target into the chat input |
The [Insert] function in the Data Explorer is especially useful. It ensures the equipment name and ID are entered correctly, reducing the risk of the agent targeting the wrong equipment.
Change History and Reverting
After every instruction is completed, the app's state is automatically saved. There's no separate save button, and you can return to any previous point whenever you like.
- Open History (fa-clock-rotate-left) in the toolbar
- The top item has a
현재badge. Click each row to expand the changes - At the point you want to return to, click [Go to This Point] → confirm in the dialog
이후 변경은 사라집니다. Any work done after the point you revert to will be lost. Check the preview and changes before reverting.
Change history is automatically kept for each app, and anything you type in the chat may be logged in that history. Don't paste API keys, passwords, or tokens into the chat window. Instead, request to have them registered in Environment Settings by an administrator.
Studio automatically masks keys in commonly recognized formats like sk-…, glpat-…, and Bearer … as ***, but it cannot recognize every possible key format in the world.
The Right Context Rail
Open it using fa-sidebar-flip at the far right of the toolbar. It shows at a glance what this app uses as its ingredients.
- Data Connections — Predefine the sites, equipment, and tags this app will handle. Click [Data Connections] to select them, and the agent won't guess IDs—it'll build against the correct targets. Setting this once before building the app greatly improves output quality
- Data Bindings — The equipment IDs and query paths the current screen actually uses
- Applied Skills — The Field Skills referenced for this task
- Status — The last save point and deployment version
Deploying
Click [Deploy] in the toolbar to open a progress window that steps through Build Preparation → Production Build → Switch to Serving Version. It usually takes 20–60 seconds, and you can't close the window while it's running.
When it's done, a QR code appears along with v1 배포됨. Scanning it with a field phone opens the app right away.
- Each deployment increments the version number (v1, v2, v3 …)
- If a problem occurs, go to the Deployment Versions drawer and click [Go to This Version] on an older version to roll back. The currently serving version is tagged with the
서빙 중badge - In the same drawer, you can toggle the version Public / Private at the top. Who can see it, and how to share it via link or QR code, is described in App Catalog and Sharing
Deployment exports a snapshot of that moment. You can continue working in the Builder after deploying, and the app in the field won't change until you deploy again.
When You're Stuck
| Symptom | What to Try |
|---|---|
| Preview keeps loading | Wait a moment, then click [Retry]. If it's still stuck, go to App in the status bar → [Restart] |
| Screen appears blank | Check for errors with /test → Fix automatically with /loop |
| Instructions are applied incorrectly | Revert to the previous point in Change History, then give a more specific instruction |
| Responses take too long | Stop with the stop button, break the request into smaller pieces, and try again |
| A message says the connection was lost | The results may still have been applied. Check the preview and change history first |
For more detailed troubleshooting, see Troubleshooting.