Developing Apps with the Builder
The Builder is your workbench in PlantPulse Studio. Type an instruction in plain language in the chat panel on the left, and the AI agent modifies the actual app; the preview in the center updates immediately, and when you're done, a single [Deploy] pushes it out to the field.
There are two ways to open the Builder.
- Create an app from a single sentence on the home screen and the Builder opens right away → Creating an App from Home
- For apps you've already created, go to Applications (fa-grid-2) in the sidebar and click [Open] on the card → App Catalog and Sharing
Screen Layout
The Builder is divided into three vertical panels.
| Position | Name | Purpose |
|---|---|---|
| Left | Agent Console | Chat panel for talking to the agent. Tell it what to build or fix |
| Center | Live Preview | The app screen as it is being built. Refreshes automatically when an instruction completes |
| Right | Context | A narrow rail showing the data, skills, and status this app uses. Closed by default |
Drag the vertical divider between the left and center panels to widen or narrow the chat panel.
Top Toolbar
From the left: Back (fa-arrow-left, 애플리케이션 목록으로), the app name, and a status indicator (세션 준비 중… →
준비됨 → 생성 중… while an instruction is being processed). On the right are the following buttons.
| Button | Icon | Description |
|---|---|---|
| Deploy | fa-rocket-launch | Publishes the current state for use in the field |
| Extract Skill | fa-lightbulb | Saves the know-how gained in this conversation as a skill → Field Skills |
| Save as Template | fa-bookmark | Saves this app's configuration as a starting point for your 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 all app files as an archive |
| Remote Push | fa-cloud-arrow-up | Sends to your company's Git repository (requires administrator setup) |
| Context Rail | fa-sidebar-flip | The rightmost button. Opens and closes the right-hand rail |
Once you have deployed at least once, a v1 앱 열기 ↗ chip appears next to [Deploy], and the icon beside it opens link sharing and the deployed version list directly.
Click the App item in the status bar at the bottom to check whether the app is currently 실행 중 or 정지됨, view 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 panel, then write what you want to do. (Query is a mode for asking about data only, without modifying the app → Querying Data via Chat)
- Enter to send, Shift+Enter for a line break
- Attach a photo, sketch, or CSV with the clip (fa-paperclip) and that screen is reproduced as-is
- While processing, the send button changes to a red Stop button
When the conversation is empty, example prompts such as 사이트 목록을 카드로 보여줘 appear — feel free to click one to get started.
One thing at a time, and be specific. Stating the target, the presentation, and the condition — as in Show the temperature and pressure of Line 3 as large number cards, and highlight them in red above 90 degrees — produces far more accurate results.
While the agent works, the chat accumulates a work log with entries like 도구 호출: …, 파일 변경: …, and 커밋 ….
Click a 파일 변경: line and the code view opens that file for you.
Three Modes
Directly above the chat input is a Plan · Auto · Accept segmented control. The mode you choose persists the next time you open the Builder.
| Mode | Icon | Behavior | When to use it |
|---|---|---|---|
| Plan | fa-list-check | Instead of building immediately, it first presents a screen layout proposal. Review the screens, widgets, and required data in the 빌드 플랜 card and click [Approve and Build] to start the actual work | New screens, or large requirements. Prevents work from heading in the wrong direction |
| Auto | fa-bolt | Applies changes immediately upon instruction and saves automatically (default) | Small edits, fast iteration |
| Accept | fa-check-double | Applies changes but holds off on saving. You must verify in the preview and accept manually to confirm | When touching an app already in operation, or when you want to visually confirm results before moving on |
In Accept mode, a yellow review bar appears above the input when a change is made.
Change pending review — verify in the preview, then accept or revert [Revert] [Accept (Commit)]
- [Accept (Commit)] — Confirms the change and records it in the change history
- [Revert] — Discards this change entirely and returns to the previous state
Click [Close] on the 빌드 플랜 card and your original request returns to the input box. Edit the wording and send it again to get a new proposal. If it's taking too long to generate, you can stop it with [Cancel].
Slash Commands
Type / in the input box to bring up the command list. Works in Build mode only.
| Command | Argument | Purpose |
|---|---|---|
/plan | Required | Receive a screen layout proposal first, then build after approval |
/build | Required | Build immediately from this content |
/review | — | Review recent changes (no file modifications) — reports issues and suggested improvements only |
/fix | — | Find errors and instruct fixes |
/test | — | Run type checking (tsc) — checks the app for syntax and type errors |
/loop | Optional | Repeat fixes until the check passes (up to 3 times) |
/deploy | — | Open the deployment dialog |
/plan and /build require content after them (e.g., /plan 보일러 압력 대시보드). If you omit it, a 이 명령에는 내용이 필요합니다 notice appears and your input is preserved.
Use /test first to check for errors, and if there are any, run /loop. You can stop it mid-run with the Stop button, and when it finishes it reports the result as either ✅ /loop 완료 or ⚠️ /loop 3회 반복 후에도 오류가 남았습니다.
Working with the Preview
You can change the screen size from the preview header — Desktop (fa-display) · Tablet (fa-tablet-screen-button) · Mobile (fa-mobile-screen-button). If the app will be viewed on a phone in the field, build it with Mobile selected. The adjacent Refresh (fa-rotate-right) and New Tab (fa-arrow-up-right-from-square) buttons also see frequent use.
Pointing Directly at What You Want Changed
Use this when a location is hard to describe in words.
- Click [Select Element] (fa-arrow-pointer) in the preview header → it changes to
요소를 클릭하세요… - Click the part you want to change in the preview
- Quick instruction buttons appear above the chat input along with the selected element's name — Edit Text · Change Color · Make Larger · Delete, plus Enter Manually
Clicking a button sends a sentence such as 선택한 요소 [○○] — 색 변경 immediately; choosing Enter Manually fills that sentence into the input box so you can add your own wording after it.
Four Drawers
Clicking a toolbar icon opens a drawer on the right. Close it with Esc.
| Drawer | Opened from | Contents |
|---|---|---|
| Change History | fa-clock-rotate-left | List of changes so far. Click a row to expand and see what changed |
| Code | fa-code | List and contents of the files making up the app (read-only) |
| Deployed Versions | fa-chevron-down on the v1 chip | List of deployed versions, rollback, and public/private toggle |
| Data Explorer | fa-database | Drill down through site → asset → tag to inspect them, and use [Insert] to paste the target into the chat input |
The Data Explorer's [Insert] is especially useful. Because equipment names and IDs are entered exactly, the agent is far less likely to latch onto the wrong equipment.
Change History and Reverting
Each time an instruction completes, the app state at that point is saved automatically. There's no save button to press, and you can go back in time whenever you're unhappy with a result.
- Open History (fa-clock-rotate-left) in the toolbar
- The topmost entry carries a
현재badge. Click any row to expand its changes - At the point you want to return to, click [Restore to This Point] → approve in the confirmation dialog
이후 변경은 사라집니다. Any work done after the point you revert to is lost. Check the preview and the change details before reverting.
The change history is a record kept automatically for each app, and the sentences you type into the chat may remain in that record verbatim. Do not paste API keys, passwords, or tokens into the chat — ask your administrator to register them under Settings.
Studio automatically masks keys in widely known formats such as sk-…, glpat-…, and Bearer … with ***, but it cannot recognize every key format in existence.
The Right-Hand Context Rail
Open it with fa-sidebar-flip at the far right of the toolbar. It shows at a glance what materials this app is working with.
- Data Connection — Predefine the sites, equipment, and tags this app will handle. Click [Connect Data] and make your selection, and the agent builds against exact targets instead of guessing IDs. Setting this once before building an app improves result quality substantially
- Data Binding — The equipment IDs and query paths the current screen actually uses
- Applied Skills — The Field Skills referenced in this session
- Status — The last save point and the deployed version
Deploying
Click [Deploy] in the toolbar and a progress window appears, stepping through three stages: Preparing build → Production build → Switching serving version. This usually takes 20–60 seconds, and the window cannot be closed while it is in progress.
When it finishes, a QR code appears along with v1 배포됨. Scan it with a field phone to open the app immediately.
- Each deployment adds one more version (v1, v2, v3 …)
- If something goes wrong, open the Deployed Versions drawer and click [Use This Version] on an earlier version to roll back. The version currently in service carries a
서빙 중badge - Toggle Public / Private at the top of the same drawer. Who can see the app and how you distribute it via link or QR code is explained in App Catalog and Sharing
Deployment publishes a copy of that point in time. You can keep making changes in the Builder afterward, and the app in use in the field will not change until you deploy again.
When You Get Stuck
| Symptom | Try this |
|---|---|
| Preview stays stuck on "preparing" | Wait a moment, then click [Retry]. If that doesn't help, go to App in the status bar → [Restart] |
| Screen appears blank/white | Check for errors with /test → auto-fix with /loop |
| Instruction applied incorrectly | Revert to the previous point in Change History, then re-issue a more specific instruction |
| Response takes too long | Stop with the Stop button, then break the request into smaller pieces and retry |
| A "connection lost" notice appears | The result may still have been applied. Check the preview and change history first |
For more detailed remedies, see Troubleshooting.