Ui.Vision

About

Connects MCP clients such as Claude Code, Claude Desktop and Cursor to the Ui.Vision browser extension. An assistant can inspect a page, create or edit a macro, run it, and check the result using logs and screenshots. Macros can also use OCR and image recognition to automate things HTML selectors cannot reach.

Runs locally over stdio through the uivision-mcp-bridge npm package, which talks to the extension over a local WebSocket. The Ui.Vision extension must be installed and the MCP bridge enabled in its settings. Desktop automation needs the additional Ui.Vision desktop components (XModules). Node.js and npm are required.

What you can do

• Inspect web pages from an assistant
• Create and edit reusable macros
• Run macros in your existing browser session
• Read logs and screenshots to debug failures
• Use OCR and image matching to locate on-screen items
• Automate desktop apps with mouse and keyboard input

Tools

Local servers list their tools once they’re running, and this one doesn’t publish its list in advance. Your client shows them after you add it.

Example prompts

• Use Ui.Vision to open example.com, read the page heading, and save a macro for it.

• Run my login macro and tell me why it failed using the logs.

• Create a macro that extracts the table on this page to a CSV file.

• Find the Submit button by image and click it on the desktop app.

Set up

Every client starts Ui.Vision on your machine with the same command. Pick yours; the page remembers your choice.

claude mcp add --transport stdio ui-vision -- npx -y uivision-mcp-bridge

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

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

code --add-mcp '{"name":"ui-vision","type":"stdio","command":"npx","args":["-y","uivision-mcp-bridge"]}'

{
  "servers": {
    "ui-vision": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "uivision-mcp-bridge"
      ]
    }
  }
}

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

codex mcp add ui-vision -- npx -y uivision-mcp-bridge

[mcp_servers.ui-vision]
command = "npx"
args = ["-y", "uivision-mcp-bridge"]

gemini mcp add ui-vision npx -- -y uivision-mcp-bridge

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

Embed

Show Ui.Vision in a README or on your site. Each embed links to this page, uses the server’s own install command, and sets no cookies. How embeds work

The card, the iframe and the JSON are in English. Add ?lang=it, fr, de or es to their address for another language.

README badge Website card iframe JSON AI prompt

README badge

Markdown

[![Ui.Vision on mcp.tc](https://mcp.tc/i/ui-vision/badge.svg)](https://mcp.tc/i/ui-vision)

HTML

<a href="https://mcp.tc/i/ui-vision"><img src="https://mcp.tc/i/ui-vision/badge.svg" alt="Ui.Vision on mcp.tc" height="20"></a>

It follows the reader’s light or dark mode. Add ?theme=light or ?theme=dark to fix it, or ?style=compact to show the mark without the word.

Website card

HTML

<script src="https://mcp.tc/w/ui-vision.js" async></script>

The card appears where the tag is. Add data-theme="dark" or data-size="compact" to the tag to change it. The file holds everything it needs, so it makes no other requests and sets no cookies.

iframe

HTML

<iframe src="https://mcp.tc/embed/ui-vision" title="Ui.Vision on mcp.tc" width="420" height="200" loading="lazy" allow="clipboard-write" style="border:0;border-radius:8px;max-width:100%"></iframe>

Use it on pages that don’t allow scripts. Add ?theme=light or ?theme=dark to the address to fix the colors.

JSON

The listing as data for your own pages and tools: name, tagline, install command, tools and the “Add to” links. Any site can read it (CORS is open).

https://mcp.tc/i/ui-vision.json

What each field means

AI prompt

Paste this into an AI coding assistant, such as Claude Code or Cursor, and it adds the Ui.Vision card to your site.

Markdown

Add the mcp.tc card for Ui.Vision, an MCP server, to my website. It is one static script: no build step, no package to install, no cookies.

Put this tag where the card should appear. The card renders right before it:

```html
<script src="https://mcp.tc/w/ui-vision.js" async></script>
```

To show the card somewhere else, put this placeholder there and load the same script once, for example before `</body>`. Keep the link inside: visitors without JavaScript see it.

```html
<div data-mcptc="ui-vision"><a href="https://mcp.tc/i/ui-vision">Ui.Vision on mcp.tc</a></div>
```

Options:
- `data-theme="light"` or `"dark"` on the tag or the placeholder fixes the colors. Without it, the card follows the visitor’s light or dark mode.
- `data-size="compact"` gives a smaller card without the tagline.
- The CSS variable `--mcptc-max-width` on the placeholder or a parent sets the width (default `520px`).
- `?lang=` on the script URL sets the card’s language: `en`, `it`, `fr`, `de` or `es`.

If the site has a Content Security Policy, allow `script-src https://mcp.tc` and `img-src data:` (the icon is inline).

For a README or other Markdown docs, use the badge instead:

```markdown
[![Ui.Vision on mcp.tc](https://mcp.tc/i/ui-vision/badge.svg)](https://mcp.tc/i/ui-vision)
```

Reference: https://mcp.tc/embed

Change history

This server runs on your computer, so we follow its npm package: each new version shows up here, with edits by its owner.

1. 6 Oct 2026, 21:22 UTC, Automatic check

   Tracking started: version 1.7.20.

FAQ