The Ui.Vision MCP bridge connects Claude Code — or any MCP client — to the Ui.Vision browser extension. Once paired, the AI agent can list, create, edit and run macros in your real browser: it inspects the live page, writes the macro, runs it, reads the logs and iterates until the macro works. It is the same toolset the built-in AI chat assistant uses, driven from the outside.

Everything runs locally: the bridge is a small Node.js process listening on 127.0.0.1 only, the extension connects out to it from the side panel, and a shared token authenticates the pairing. No macro data goes anywhere except to the AI you are chatting with.

Install in 3 steps

  1. Install the Ui.Vision extension (Chrome, Edge or Firefox) — version 10.0.21 or newer.
  2. Run the installer once in a terminal (Node.js 18+ required):
    npx uivision-mcp-bridge --setup
    It registers Ui.Vision with every MCP client it finds on the machine — Claude Code, Claude Desktop, Cursor, Windsurf, VS Code — and then prints your pairing token. Copy that token; you need it in step 3.

    Then quit and reopen Claude Code — or whichever of those apps you use. MCP servers are loaded only at startup, so an app that was already running never starts the bridge. Quit it completely: opening a new chat, session or tab is not enough. In Claude Code, type /mcp afterwards to confirm that uivision is listed.
  3. Paste the token into the browser. Open the Ui.Vision side panel, go to Settings > AI > MCP bridge (Claude Code), switch it on, paste the token from step 2 and click Test. The Test button tells you exactly where you stand: bridge reachable and token correct, wrong token, or bridge not running. When everything is green the panel shows "Connected to the Claude Code MCP bridge".

That is the whole setup. Now, in any Claude Code chat: "Build a Ui.Vision macro that logs into our intranet and downloads yesterday's report — then run it." The agent builds the macro from the live page, runs it in your browser and fixes it until it passes.

Lost the token?

It is stored in .uivision_mcp_token in your home directory — type "%USERPROFILE%\.uivision_mcp_token" on Windows, cat ~/.uivision_mcp_token on macOS/Linux. Re-running npx uivision-mcp-bridge --setup prints it again. Or simply ask the AI: while the extension is unpaired, every bridge tool call returns the token value, so the agent can show it to you in chat.

Other MCP clients, or registering by hand

The installer only knows the clients listed above. For anything else — or if you prefer to edit the config yourself — add this entry to your client's MCP configuration file:

{
  "mcpServers": {
    "uivision": { "command": "npx", "args": ["-y", "uivision-mcp-bridge"] }
  }
}

VS Code nests the same entry under "servers" instead of "mcpServers". Restart the client afterwards. The extension has a Copy the JSON config button under Settings > AI > MCP bridge that puts exactly this on your clipboard.

For AI agents reading this page

If you are an AI agent setting up or driving the bridge, follow these rules instead of improvising:

  • No uivision tools in your session? The bridge is not registered, or the MCP client was not restarted after registration — servers load only at startup. Tell the user to run npx uivision-mcp-bridge --setup and restart the client, then stop. Do not silently fall back to writing macro files to disk in another format.
  • Cannot register it yourself? Expected — the claude CLI is not on PATH in the desktop app, the VS Code extension, Cursor or Windsurf, and MCP config files are often sandboxed against edits. Do not try to hand-edit ~/.claude.json or any other client config. Give the user the one-line installer above, tell them a full restart is required, and stop there.
  • bridge_status says the extension is not connected? The tool result already contains the pairing token value — show it to the user verbatim in chat and walk them through step 3 above. You do not need to read ~/.uivision_mcp_token; the value in the tool result is authoritative.
  • Before writing your first macro, call get_authoring_guide. If the bridge is not reachable, the identical content — including the complete uiv.* JavaScript API — is at ui.vision/ai/ai-system-prompt. Prefer uiv.* JS script macros over the classic command table.

Good to know

  • Keep the side panel open. The bridge client runs inside the side panel — by design, so you can watch what the AI does. If the panel is closed, the connection pauses and resumes when you reopen it. A banner in the panel shows when an external agent is controlling Ui.Vision.
  • One browser at a time. The bridge holds one extension connection ("newest wins"). If you enable it in Chrome and Firefox, the two browsers steal the connection from each other — enable it in only one.
  • One Claude Code session at a time. Each session starts its own bridge on port 50888; a second concurrent session cannot bind the port and its Ui.Vision tools fail until the first session ends. The port can be changed with --port (and in Settings > AI) if it collides with something else.
  • Macros the AI creates are saved in the "AI Generated" folder and opened in the editor. The AI can only delete macros in that folder — everything else is yours alone.
  • Security: the WebSocket server binds to 127.0.0.1 only, connections must present the token within 5 seconds, and the token file is created with owner-only permissions. Treat the token like a password for your browser automation.
  • Works with any MCP client, not just Claude Code — the bridge speaks standard MCP on stdio. The installer covers Claude Code, Claude Desktop, Cursor, Windsurf and VS Code; for anything else, paste the JSON entry above into that client's MCP config.

What the AI can do over the bridge

The bridge exposes the extension's macro tools to the agent: list/open/create/edit/delete (AI folder only) macros, run the macro in the editor and get the full execution log back, inspect the current page structure with ready-to-use locators, take screenshots, capture element images for visual automation, and read the authoring guide (the same system prompt that powers the built-in assistant). JavaScript macros are the preferred format — the agent gets the full uiv.* scripting API documentation via the bridge's get_authoring_guide tool, and the same text is published at ui.vision/ai/ai-system-prompt.

Anything wrong or missing on this page? Suggestions?

...then please post in the forum or contact us.

Fresh from the Ui.Vision Forum: The Latest 3 Topics.

← Meet the Ui.Vision team and users in our forums.