Paid plans only. The AI agent is a Claude-powered assistant that can read and edit your brand kit, read and rewrite the markdown behind your pages, research on the web, and work from screenshots or files you attach. It runs in a drawer that slides in from the right. It is metered against your AI credits; see Credits and billing.
On the free plan the button still appears, and opening it explains that the agent is a paid feature and links to the credits page.
Where it lives
One button: Ask AI, pinned to the bottom-right corner. It appears on every page once you have opened a project, and it acts on whatever you are looking at:
- On a project page, the file you have selected. On an HTML project, the hosted page itself.
- In the kit editor (
/projects/{id}/kit), the file you have open in that kit. - Anywhere else, the last project and file you were on.
Switching to a different file changes what the agent works on, and starts a fresh conversation. That only happens while the drawer is closed: if you are mid-conversation, browsing to another file leaves your chat alone.
The drawer, titled "AI agent", shows:
- A chip naming the file the agent will edit by default.
- A budget chip showing your AI spend for the current cycle against what you have available.
- A "Clear" link to reset the saved conversation, a Pop out link, and a close button.
- The transcript. The conversation is persisted per project: refreshing brings it back, and prior turns are replayed to the agent so it remembers what you were working on.
- A compose box with Attach, Send, and (while a turn runs) Cancel.
On an HTML project
An HTML project hosts a page you built elsewhere and serves it byte for byte. The agent can read and rewrite that page, so "make this responsive" or "fix the broken table" work the same as on a markdown page.
One difference matters: an HTML project has no draft, so the agent's edits publish immediately. There is no review step between the write and what your share link serves. The previous version is kept, so you can ask it to revert. On anything sweeping, describe what you want and let the agent tell you its plan before it writes.
The agent also leaves the page alone in ways it would not for a markdown project: your scripts, web fonts, and external references stay exactly as they are unless you ask for them to change, and it will not restyle the page to match a render mode. Render mode, brand kit, and the file tools do not apply, so the agent will decline those.
Pop the chat into its own window
The drawer covers part of the page it is editing. Click Pop out in the drawer header to move the conversation into a separate browser window, so you can watch your page and talk to the agent side by side, or park the chat on a second monitor.
The pop-out opens on your saved conversation for that project, and everything works the same as in the drawer. While it is open the drawer hides itself, so there is only ever one live chat.
To bring it back, click Dock in the pop-out, or just close the window; the drawer reappears where you left it. If your browser blocks the pop-up, the chat opens wide and centered over the page instead, which behaves the same way.
[Screenshot: the project page with the agent drawer open, mid-conversation, showing a tool block expanded.]
Send a message
- Type your request into the compose box (placeholder: "Describe a change, ask it to research something, or paste a screenshot (Cmd/Ctrl+Enter to send)").
- Press Cmd+Enter or Ctrl+Enter, or click "Send".
Send is disabled while the agent is working; Cancel appears next to it.
What works well:
- "Change the body background to a soft mint green."
- "The brand bar feels heavy. Make it half the current height and use a lighter accent."
- "Add a Q3 section to this page summarising the three items I pasted below."
- "Look up the current population of the five cities in this table and update the numbers."
- "Read kit.css and tell me which colours are hardcoded versus using a variable."
What does not work:
- Uploading images. The agent cannot create binary files. Upload logos and backgrounds yourself from the Assets section.
- Publishing, exporting, or billing. The agent points you at the corresponding UI feature instead.
- HTML projects. They have no markdown, render mode, or kit, so the agent never lists them and refuses tool calls against them.
Edit page content
Ask for a change to a page and the agent reads the current markdown, rewrites the whole document with your change applied, and saves it back. Two things to know:
- Writes land on the draft, never on the published dashboard. Review the preview, then publish when you are happy. Nothing the agent does is visible on a public share link until you publish.
- It can add, delete, and re-mode files. It will not delete a project's main file, and it confirms with you before any delete. When it changes a file's render mode it restructures the markdown to match in the same turn.
If you ask about a page by name rather than by opening it, the agent lists your projects to find it.
Attach files
Click Attach, or paste a screenshot straight into the compose box. Accepted: PNG, JPEG, WebP, GIF, PDF, and markdown (.md). Up to 5 files per turn, 12 MB per file and 12 MB in total.
Attachments are context for that one turn, not project assets. A screenshot usually means "make it look like this" or "here is what is wrong"; a markdown file is usually content to merge in. The agent says what it took from an attachment before acting, so you can correct a misread.
Research on the web
Ask the agent to look something up and it searches the live web (up to 6 searches per turn), cites what it used in its summary, and says plainly when a search turned up nothing rather than filling the gap from memory.
What you see while it runs
The transcript fills in three kinds of blocks:
- Assistant text: ordinary chat, rendered as markdown.
- Tool blocks: a collapsible row labelled with the tool name (
read_file,write_file,list_files,preview,read_markdown,write_markdown,list_projects,create_file,delete_file,set_render_mode,read_kit,web_search) with arunning...indicator while in flight, orerrorif the tool failed. Expand it to see the tool input and output. - Usage chips: a small line under the most recent bubble showing input and output tokens for that round trip.
When the turn finishes you see a divider with the stop reason and, if the agent wrote anything, the list of files it changed (for example: "Turn complete (end_turn). Files changed: kit.css, kit.json").
Files are updated live
When the agent writes kit.css, kit.json, or scaffold.html, the kit editor refreshes and the preview re-renders. When it writes a page's markdown, the project page's draft updates.
If you do not like a kit change, open the History drawer in the kit editor header and revert to the snapshot from before the edit, or tell the agent ("undo that, keep the previous background"). Page edits sit on the draft, so publishing the previous version or asking the agent to restore it both work.
Cancel mid-turn
Click Cancel while the agent is streaming. The stream stops within a second. Anything already saved (a completed write_file or write_markdown) stays. Tokens already used are charged; partial work that did not save is dropped.
When budget runs out
Every turn drains the budget chip; when it reaches zero, a lockout modal opens with a "Top up" CTA and Send stays disabled until you add credits. See Credits and billing.
Self-contained rule
The agent is required to keep the kit self-contained: no remote stylesheets, scripts, or fonts. If you ask it to "add a Google Fonts import for Inter", it refuses and proposes an alternative (inlining the font as base64 or a system font stack). Published pages need to render with the network off.
Etiquette
- Be specific. "Make it look modern" gives mediocre results. "Reduce the brand bar height by half and switch the accent to teal" gives much better results.
- Iterate. Send one or two changes at a time, look at the preview, then send the next. Bigger asks cost more credits and produce less predictable results.
- Use named drafts as save points. Before a big experimental kit change, "Save draft" with a name like
pre-experiment. If the result is wrong, revert from History.