Using the AI Chat Assistant in Component Studio
Open the AI Assistant from Component Studio (next to Save) or the page builder top bar, describe what you want, and it edits the HTML, CSS and JavaScript directly. Pick Haiku, Sonnet or Opus, attach reference images with Sonnet or Opus, and use Undo last change to revert.
The AI Assistant is a chat panel that writes and edits code for you. Describe a component or a change in plain words and it updates the HTML, CSS and JavaScript directly. It is available in Component Studio and in the page builder, and each message uses credits.
Opening the Chat
- Component Studio: click the AI Assistant icon next to Save in the header, or AI Generate to start a new component from a description.
- Page builder: click the AI Chat Assistant icon in the top bar.
The panel slides in from the right. Use the minus button to minimize it and the cross to close it.
What the Assistant Sees
With each message it receives your current HTML, CSS and JavaScript (in the page builder, the whole page's code), your last ten chat messages, and the colors and style settings from NitroShock → Brand Settings. On a site imported with NitroShock, Component Studio's Use site CSS preview option (on by default) also sends your site's style variables, so new components match the rest of the site. It does not see your database, your other pages or your other components.
Sending a Request
Type your request and send it. Good requests are specific:
- "Create a hero section with a headline, a short paragraph and one button"
- "Make the card grid a single column on mobile"
- "Use the brand accent color for the buttons"
- "Add a fade-in when the cards scroll into view"
Pasting code into a message works too, for example "replace the button with this:" followed by your code.
Send is disabled until the reply arrives, so one request runs at a time. When the reply arrives, the change is applied and a Code updated! notice appears, with the changed tab briefly highlighted. Each reply is labelled with the model that wrote it: Haiku, Sonnet or Opus. Depending on the request, the assistant adds CSS on its own, inserts a new section, or rewrites the code. Any stylesheet it writes goes into the CSS tab, not into the HTML. After a reply, suggestion buttons offer likely next steps; clicking one sends it. If a message cannot be completed, the chat says why in plain words; for a low balance it shows how many credits the message needed and how many you have.
In Component Studio, the assistant also fills in the component's name, description, category and tags when those fields are empty. It never overwrites what you have typed.
Choosing a Model
The model dropdown below the chat offers Haiku (fastest, lowest cost), Sonnet (balanced, the default) and Opus (most capable). Each is charged at its own rate, and the cost indicator next to the dropdown shows what the next message will cost. Start with Sonnet; switch to Haiku for small tweaks or Opus for large, complicated layouts.
Attaching Images
Click the + button to attach screenshots, mockups or design references as a visual guide. Images need Sonnet or Opus; choosing Haiku removes any you have attached.
- Up to three images per message and 4 MB in total. Large images are resized automatically before sending.
- You are asked to label each image (for example desktop, tablet or mobile) unless its file name already says which it is.
- Attaching images adds to the cost of the message.
With Sonnet, the default, the + button is available as soon as the chat opens.
Undoing a Change
Undo last change in the chat controls puts the code back the way it was before the assistant's last reply and removes that reply. Component Studio keeps the last ten changes and the page builder the last five. In the page builder, the top bar's Undo also covers changes on the visual canvas.
Conversation History
The assistant uses your last ten messages as context, so you can say things like "go back to the previous layout". In Component Studio the conversation is saved with the component: reopen a saved component and its chat is still there. In the page builder the conversation lasts while the builder is open and starts fresh after a reload.
FAQ
Does the assistant change my live site?
Only what is open in front of you, and only when you save. Changes go into the editor first, so you can review, undo or discard them.
Is this the same as the writing modes?
No. The writing modes in the page builder's sidebar (Create New Content, Rephrase Existing and the others) write page copy from a form. The AI Assistant edits code by conversation. See AI Content Generation.