Chat workbench
The chat workbench at /chat is where you spend most of your time. Two panels: conversation on the left, code + preview on the right. Every interaction with your app — building, editing, critiquing, deploying — happens here.
#The two-panel layout
The workbench is a fixed split: 40% chat on the left, 60% code + preview on the right. The split isn't draggable on purpose — every PromptFloe session shares the same proportions so screenshots, recordings, and tutorials look consistent.
Left panel — conversation
The left panel is your chat. Every message you send routes through one of three handlers:
- Build pipeline — plain prose. Goes through the 5-stage multi-agent pipeline (Plan → Files → Code → Review → Ship).
- Skill — starts with
/or@. Routes to a critique or augmenter sub-agent. See Skills. - Chat-only — questions about your app. Answered from the file tree without rebuilding.
Messages stream in real time. Build steps render as event cards, skill outputs render as expandable cards with insights, and plain chat replies render as markdown.
Right panel — code + preview
The right panel has two tabs:
- Code — file tree on the left, Monaco editor on the right. Edits hot-reload the preview within milliseconds.
- Preview — a live iframe of your app booted in a WebContainer. Refresh, open in a new tab, or inspect.
Above the tabs, a header shows the current build stage (Plan / Build / Review / Ship), the preview URL once it's ready, and a Deploy button that opens the deploy modal.
#The RunHeader (build stages)
At the top of every chat sits the RunHeader — a four-pill stage tracker that mirrors the lifecycle of your app:
| Field | Type | Description |
|---|---|---|
| Plan | planning | You're drafting the prompt or queuing augmenters. No build has started. |
| Build | in-flight | The multi-agent pipeline is running. Files are being generated. |
| Review | live preview | Build finished. The preview is up and you can iterate. |
| Ship | deployed | A successful Netlify deploy exists for this chat. The live URL is shown in the header. |
Stages light up in violet as you reach them and grey out once you've moved on. Ship is special — it stays lit even after subsequent rebuilds, because there's an actual deployed URL in the world.
#The prompt input
The bottom of the chat panel is your composer. A few non-obvious features live here:
- Augmenter chips — toggle
/seo,/marketing, etc. before sending. They run automatically after the build finishes. - Autocomplete — typing
/or@opens a menu of skills. Arrow keys to navigate, Enter to insert. - Intent suggestion — if your prose looks like a skill request (e.g. "make it more accessible"), a chip surfaces below the input suggesting
/a11y. - Drafts — what you typed but didn't send is preserved per-chat in localStorage.
#Editing files directly
You don't have to drive everything through chat. The Code tab is a full Monaco editor — same engine VS Code uses. Click any file in the tree to open it, edit, save with Cmd/Ctrl+S. The change hot-reloads into the WebContainer and the preview reflects it.
#The live preview
The preview iframe runs your real app in a WebContainer — Node.js and Vite dev server, all in the browser. Hot reload is the same as local Vite. The first boot takes a few seconds (npm install runs); subsequent edits are sub-200ms.
You can open the preview in a new tab from the header. Useful for showing a teammate or testing in a separate device profile.
#Keyboard shortcuts
| Field | Type | Description |
|---|---|---|
| Enter | compose | Send the prompt. |
| Shift+Enter | compose | New line in the prompt. |
| / | compose | Open the slash-command autocomplete. |
| @ | compose | Open custom-skill autocomplete. |
| Cmd/Ctrl+S | editor | Save the active file. |
| Cmd/Ctrl+Enter | editor | Save and rebuild preview. |
| Esc | global | Cancel the in-flight build or skill. |