The AI Chat sidebar in Component Studio lets you describe changes in plain English and the AI updates your component code directly in the editors. Each message deducts credits based on the model selected.
The AI Chat sidebar in Component Studio provides a conversational interface for building and refining components. Describe what you want in plain English and the AI applies changes to the HTML, CSS, and JavaScript editors directly. The AI maintains the context of the entire conversation as you iterate, so each message builds on what came before.
Click the AI Chat button in the Component Studio header toolbar. The sidebar opens on the right side. Your current component's HTML and CSS are automatically sent as context with every message—the AI always knows what it is working with.
Type your request in the input field and click the send button or press Enter. While the AI processes your request, the send button shows a loading indicator and the input is disabled to prevent double-sends. When the response arrives, any code changes are applied to the editors and a notification confirms what was updated.
Examples of effective requests:
Click the image attachment button next to the input field to include screenshots, mockups, or design references with your message. The AI will use the image as a visual reference when generating code. Up to 4 images can be attached per message — attaching images increases the credit cost for that message.
Two AI models are available, selectable via radio buttons below the chat input:
The chat sidebar maintains a local undo stack for AI-applied code changes within the session. Click Undo above the chat input to revert the last set of changes applied by the AI. Multiple undo steps are available.
The AI uses the last 10 messages from the session as context for each new message. You can reference earlier decisions ("go back to the layout from before") without re-explaining everything. Conversation history is saved per component and reloads when you return to that component.
After each AI response, the sidebar may display two or three quick-action suggestions based on what was just built. Clicking a suggestion sends it as your next message, making it faster to continue iterating.
When the AI generates or significantly redesigns a component, it may suggest a name, description, and category. If so, the fields in the Create tab sidebar are auto-filled automatically. Auto-fill only populates empty fields—anything you have already typed is not overwritten.
Each message deducts credits based on the selected model and whether images are attached. Your current balance is shown at the bottom of the chat sidebar. If the balance is too low to send a message, the send button is disabled and a recharge prompt appears.
No. The AI only sees the HTML and CSS from the current component editors, plus any images you explicitly attach. It does not access your database, other pages, or other components.
Yes. Pasting code works well. Say "replace the button with this:" followed by your pasted code and the AI will incorporate it into the component.
Conversation history is saved to the component's post meta (or a session transient for new unsaved components) and reloads automatically when you return to that component.
