Editing with Chat AI
Edit your converted section by describing the change in plain language using the Composer's Chat AI tab.
Chat AI requires UiChemy Pro. On Free, this tab is visible but clicking it shows an "AI Chat" upgrade screen instead of a working chat, "Build and edit any widget just by chatting," with three points: Chat to build (describe a widget in plain English and AI builds or edits it), Bring your own AI (connect Claude, Codex, Gemini, or OpenCode), and Or use WordPress AI (use the AI provider already set up on your site), plus an Upgrade to Pro button. See Free vs Pro.
The Chat AI tab lets you edit your converted section by describing the change in plain language, no menus or code. It's the easiest way to fix, restyle, or extend what came out of a conversion, and it can even build new layouts that were never in your Figma file.
Chat AI runs on your own AI, which you connect once, either through a CLI tool or a WordPress AI Connector. There's nothing to connect for the conversion itself; this is only for chatting to edit your widget.
Screenshot: the Chat tab (Editor / Chat / Code) showing "What do you want to do?" and the quick actions.
Connect AI to start chatting
The first time you open Chat, it shows "Connect AI to start chatting" with two paths. Pick whichever fits how you work. You'll also see a Widget / Page toggle and a connection status (it reads Disconnected until you connect).
Stuck before you even connect? The same screen has a Need help? row at the bottom with View docs and Contact support links.
Choose your model
Once connected, the model selector at the bottom of Chat lets you pick which model to use, grouped into CLI and WP Connectors tabs (for example, the CLI tab lists your available Claude models).
Screenshot: the model picker showing the CLI and WP Connectors tabs.
Make a change
- Choose what to change. Use Pick to select an element, or Draw to mark an area, freehand, then add an optional note and click Send. You can also just describe it.
- Say what you want. Type your change, or tap a quick action such as Change text color, Round the corners, Add a shadow, or Add more spacing. You can also paste or drop an image to guide the change.
- Set the scope. Use the Widget / Page toggle to apply the change to just this widget or across the page.
- Send. The change lands as editable output you can still adjust in the Editor or Code tabs.
Use Your Site's Global Styles
A toggle on the chat composer bar attaches your site's Global Style colors and typography to every message, so the AI prefers your existing variables and classes over raw hex values when it writes CSS. Turn it on when you want new sections to stay on-brand automatically; turn it off if you're prototyping something intentionally different.
What you can ask it to do
- Repair a section that didn't come out right.
- Restyle it (colors, spacing, corners, shadows, layout).
- Add motion and hover effects.
- Build an entirely new layout that was never in your Figma file.
The cleanup Classic Mode used to leave for you becomes a single sentence.
If it doesn't work
- Still shows "Disconnected." For the CLI path, make sure the terminal command is still running (don't close the window) and that you have Node.js 18+. For the connector path, confirm an AI Connector is added in Settings.
- No model, or the wrong one, is listed. Check you're on the right tab (CLI vs WP Connectors) in the model picker, and that your bridge is running or your connector is active.
- The change wasn't what you wanted. Be specific, use Pick or Draw to target the exact element, set the right Widget / Page scope, then send a follow-up to refine, or adjust by hand in the Editor.