Give the AI context: files, images and pieces of code

The + menu in the message box

In code mode, the + to the left of the message box (More options) gathers everything you can add to a request:

The Search… field at the top of the menu filters the items and also finds project files by name. The arrow keys move around, Enter picks and Esc closes.

In the visual editor, the + (Add context) has Attach files, Take a screenshot, Knowledge and Help center.

Point at a file with @

1. 1

   In the message box, type @

   At the start of the text or after a space. The menu opens on Add context.

2. 2

   Keep typing part of the name

   The menu shows the project files that match.

3. 3

   Pick the file

   It becomes a tag above the box, Selected in the code, and the @ leaves the text.

4. 4

   Write the request and send it

   The AI reads that whole file and understands the request is about it.

To undo it, click Clear the selection on the tag.

Select a file or lines in the Code tab

Opening a file in the Code tab already selects it for your next request. Selecting lines with the mouse narrows the selection to them, and the tag shows the name and lines, such as Header.tsx:12–30. Use it for requests like “change only this” or “make another one like this”. The selection goes with the request you send and then leaves the box.

Select a component in the preview

In code mode, click Select component above the preview and then the part of the site you want to change: a button, a heading, a card. The tag shows its name, like Hero › Button · a, and the next request changes only that part, leaving the rest of the page and the other pages alone. If the same piece appears in other places, only this one changes, unless you ask for all of them.

Attach images and files

Paste with Ctrl+V (Cmd+V on a Mac), drag onto the message box or use Attach files.

An image sent without text becomes the request “use the attached images”.

Images as a layout reference

In code mode, the AI works out what each image is for: a layout to reproduce, a logo, a photo to use on the site, a screenshot of a problem or content to copy. A layout reference is reproduced as closely as possible, with the same sections, proportions, spacing and the colors measured from the image itself. Only the brand isn't copied: the reference's logo, company name, slogan and trademarks are replaced with yours, and the copy keeps talking about your business.

See what changed and undo it

After the AI applies a change, the files it touched get a mark in the Code tab. When you open one, you see the lines that changed, under Change of version N.

• See file and See changes switch between the whole file and only what changed.
• Undo in this file puts just that file back the way it was, as a new version. If other files depend on the change, the undo is refused and you need to undo the whole change.
• Undo this change, also shown in the chat under the AI's reply, brings back the whole previous version, again as a new version.
• This works for the last change applied while the editor is open. To go further back, use the History.

Frequently asked questions