The Proton WidgetChat AI Tab

Chat AI Tab

Edit your converted section by describing the change in plain language using the Proton Widget's Chat AI tab.

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).

Path 1: Agent Bridge (use your own CLI)

Runs on your own AI tool through a small local bridge, so you can use your own Claude, Codex, Gemini, or OpenCode.

Requires Node.js 18 or newer on your computer.

  1. In the Chat tab, under Run this in your terminal, click Copy. The command looks like: npx -y @uichemy/agent-bridge --password YOUR-TOKEN
  2. Paste it into your terminal (Terminal on macOS, Command Prompt or PowerShell on Windows) and press Enter. Keep the window open, the bridge needs to stay running in the background.
  3. Chat connects automatically once the bridge is running, and the chat panel appears, ready to use.

Screenshot: the "Agent Bridge" path with the terminal command and Copy button, and a terminal running it.

Don't want to use the terminal yourself? UiChemy also gives you a ready-made prompt (under Let your AI assistant run it). Copy it, paste it into your AI tool, and the assistant runs the command for you. This is the same idea as the prompt-based UiChemy MCP setup.

Keep your token private. The command includes a password that lets the bridge connect to this one site. Don't share it or save it anywhere, and regenerate it if it's ever exposed.

Path 2: Add an AI Connector (no CLI)

Prefer not to touch a terminal? WordPress has built-in AI Connectors for providers like Anthropic, OpenAI, and Google. Add one to power Chat with your own provider, no CLI needed.

  1. In the Chat tab, click Open settings.
  2. Add an AI Connector for your provider.
  3. Return to Chat, it activates once a connector is set up.

Screenshot: the "Add an AI Connector" path with the Open settings button.

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

  1. Choose what to change. Use Pick to select an element, or Draw to mark an area. You can also just describe it.
  2. 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.
  3. Set the scope. Use the Widget / Page toggle to apply the change to just this widget or across the page.
  4. Send. The change lands as editable output you can still adjust in the Editor or Code tabs.

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.
Was this page helpful?