Ui.Vision

Über den Server

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.

Was du damit machen kannst

• 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

Lokale Server zeigen ihre Tools erst, wenn sie laufen, und dieser veröffentlicht seine Liste nicht vorab. Dein Client zeigt sie, nachdem du ihn hinzugefügt hast.

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

Einrichtung

Jeder Client startet Ui.Vision mit demselben Befehl auf deinem Rechner. Wähl deinen; die Seite merkt sich deine Wahl.

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"
      ]
    }
  }
}

Einbinden

Zeig Ui.Vision in einem README oder auf deiner Website. Jede Einbindung verlinkt auf diese Seite, nutzt den Installationsbefehl des Servers und setzt keine Cookies. So funktionieren Einbindungen

Karte, iframe und JSON sind auf Englisch. Häng ?lang=it, fr, de oder es an ihre Adresse an, um eine andere Sprache zu bekommen.

README-Badge Website-Karte iframe JSON KI-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>

Es folgt dem hellen oder dunklen Modus der Lesenden. Hänge ?theme=light oder ?theme=dark an, um ihn festzulegen, oder ?style=compact, um das Zeichen ohne Schriftzug zu zeigen.

Website-Karte

HTML

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

Die Karte erscheint dort, wo das Tag steht. Füge dem Tag data-theme="dark" oder data-size="compact" hinzu, um sie zu ändern. Die Datei enthält alles, was sie braucht, stellt also keine weiteren Anfragen und setzt keine 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>

Nutze es auf Seiten, die keine Skripte erlauben. Hänge ?theme=light oder ?theme=dark an die Adresse an, um die Farben festzulegen.

JSON

Der Eintrag als Daten für deine eigenen Seiten und Tools: Name, Kurzbeschreibung, Installationsbefehl, Tools und die „Add to“-Links. Jede Website kann ihn lesen (CORS ist offen).

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

Was jedes Feld bedeutet

KI-Prompt

Füg ihn in einen KI-Coding-Assistenten wie Claude Code oder Cursor ein, und er baut die Karte von Ui.Vision in deine Website ein.

Markdown

Füge meiner Website die mcp.tc-Karte für den MCP-Server Ui.Vision hinzu. Es ist ein einziges statisches Skript: kein Build-Schritt, kein Paket zu installieren, keine Cookies.

Setz dieses Tag dorthin, wo die Karte erscheinen soll. Die Karte erscheint direkt davor:

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

Um sie woanders zu zeigen, setz dort diesen Platzhalter ein und lade dasselbe Skript nur einmal, zum Beispiel vor `</body>`. Lass den Link darin stehen: Besucher ohne JavaScript sehen ihn.

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

Optionen:
- `data-theme="light"` oder `"dark"` am Tag oder Platzhalter legt die Farben fest. Ohne das Attribut folgt die Karte dem hellen oder dunklen Modus der Besucher.
- `data-size="compact"` ergibt eine kleinere Karte ohne Kurzbeschreibung.
- Die CSS-Variable `--mcptc-max-width` am Platzhalter oder einem Elternelement legt die Breite fest (Standard `520px`).
- `?lang=` in der Skript-URL legt die Sprache der Karte fest: `en`, `it`, `fr`, `de` oder `es`.

Wenn die Website eine Content Security Policy hat, erlaube `script-src https://mcp.tc` und `img-src data:` (das Icon ist eingebettet).

Für ein README oder andere Markdown-Dokumentation nimm stattdessen das Badge:

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

Referenz: https://mcp.tc/de/embed

Änderungsverlauf

Dieser Server läuft auf deinem Computer, deshalb verfolgen wir sein npm-Paket: Jede neue Version erscheint hier, dazu Änderungen seines Betreibers.

1. 6. Okt. 2026, 21:22 UTC, Automatische Prüfung

   Beginn der Beobachtung: Version 1.7.20.

Häufige Fragen