AI Chat Assistant

The AI assistant helps you build and modify your site through conversation. Describe what you want and it reads your code, makes changes, and updates the canvas in real time.

Opening the AI Assistant

• Press ⌘K / ⌃K from anywhere in the builder
• Click the AI icon in the left sidebar
• Right-click an element and select Ask AI from the context menu

The Chat Input

The input bar at the bottom of the panel is where you type your prompts. Press Enter to send, or Shift+Enter for a new line.

Modes

Next to the + button you'll find the mode selector. Pick how you want the AI to work on each message:

• Chat - talk and plan. The AI reads your project, answers questions, and works out ideas with you, but won't change anything.
• Normal - the default. The AI builds and edits your site.
• Max - for big or complex builds. It thinks more deeply and handles much larger projects, and uses roughly 4x the credits of a Normal message (shown by the ~4x tag).

Your choice is remembered per site - refresh the page and you're still in the mode you picked. When you create a new site from the dashboard, you can choose Normal or Max for the initial build there too.

In Chat mode, when you've settled on a plan, switch back to Normal (or Max) and the AI will build exactly what you discussed.

Attachments

Click the + button to open the attachment menu:

• Upload Image - attach a reference image or screenshot for the AI to match a design.
• Upload File - attach code files, documents, spreadsheets, or PDFs (up to 20MB). Supported formats include .js, .jsx, .ts, .tsx, .css, .html, .json, .md, .pdf, .csv, .docx, .xlsx, and more.
• Select Element - click an element on the canvas to target it. The AI will focus its changes on that specific element.

You can also drag and drop files and images directly into the input area.

Targeting Elements

Click Select Element in the attachment menu, then click an element on the canvas. A pill appears in the input showing the file path, tag name, and line numbers so the AI knows exactly what you're referring to. Click the X on the pill to remove it.

Enhance Prompt

Click the lightbulb icon to enhance your prompt with AI before sending. This rewrites your prompt to be more detailed and specific, which often produces better results.

Voice Input

Click the microphone icon to dictate your prompt instead of typing. Click it again to stop. Available in browsers that support speech recognition (Chrome, Edge, Safari).

What the AI Can Do

When the AI works on your project, you'll see real-time updates in the chat showing what it's doing:

• File operations - creating, editing, and deleting files with line-by-line diffs
• Planning - step-by-step plans showing what the AI intends to do before making changes
• Image generation - generating images using AI based on your description
• Web search & browse - searching the web for reference or documentation
• Diagnostics - checking for errors in your dev server

The canvas updates live as the AI makes changes - you can watch your site transform in real time.

Command Approvals

Some actions - like installing a package or running a command on your project - ask for your approval first. A card appears in the chat explaining in plain terms what the AI wants to do and why; nothing runs until you approve it.

Runs Keep Going

If you close the tab or reload the page while the AI is working, the run continues in the background. When you come back, the chat reattaches to the live run and shows what happened while you were away.

Chat History

Your conversations are saved automatically. Click the history icon at the top of the panel to browse previous chats and continue where you left off. Click + to start a fresh conversation.

Stopping the AI

While the AI is working, the send button turns into a stop button. Click it to interrupt the AI mid-response.

Undoing Changes

The AI modifies your actual project files. You can undo any AI change with ⌘Z / ⌃Z just like any other edit.