Using the Editor
Code editor, AI chat, live preview, terminal, and version history
The editor is a single workspace with everything side by side — your code, the AI chat, and a live preview of the running app.
Layout
The workspace has five areas:
| Panel | Position | Purpose |
|---|---|---|
| File tree | Left | Browse and manage project files |
| Code editor | Center | Edit files with syntax highlighting and autocomplete |
| Chat | Right | Talk to the AI agent |
| Preview | Bottom or split | Live-running instance of your app |
| Terminal | Bottom | Run commands in the project container |
Drag panel borders to resize. Double-click to collapse or restore a panel.
Talking to the agent
Type what you want in the chat panel. The agent reads the relevant files, writes a plan, and edits the code after you approve.
A few examples:
Add a dark mode toggle to the headerThe submit button on the login form doesn't do anything — fix itMove the API calls out of the component and into a useApi hookThe agent handles multi-file changes. It'll create, edit, or delete files as needed and install packages through the terminal.
Version history
Every agent action creates a snapshot. You can scroll through past versions, compare file diffs, and restore any snapshot with one click. Nothing is lost.
