Skip to main content

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.

AI Chat Input

Attachments​

Click the attachment button (paperclip icon) 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.

Attach Menu

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.

Smart Enhance​

Toggle the Smart button (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. The button shows "Enhancing..." while processing.

Smart Mode

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.

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.

Chat History

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.