Ui.Vision

Présentation

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.

Ce que vous pouvez faire

• 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

Outils

Les serveurs locaux présentent leurs outils une fois lancés, et celui-ci ne publie pas sa liste à l’avance. Votre client les affiche après l’ajout.

Exemples de 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.

Configuration

Chaque client lance Ui.Vision sur votre machine avec la même commande. Choisissez le vôtre ; la page retient votre choix.

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

Intégrer

Affichez Ui.Vision dans un README ou sur votre site. Chaque intégration renvoie à cette page, utilise la commande d’installation du serveur et ne dépose aucun cookie. Comment fonctionnent les intégrations

La carte, l’iframe et le JSON sont en anglais. Ajoutez ?lang=it, fr, de ou es à leur adresse pour une autre langue.

Badge pour README Carte pour site web iframe JSON Prompt pour l’IA

Badge pour README

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>

Il suit le mode clair ou sombre du lecteur. Ajoutez ?theme=light ou ?theme=dark pour le fixer, ou ?style=compact pour afficher le symbole sans le nom.

Carte pour site web

HTML

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

La carte apparaît à l’endroit de la balise. Ajoutez data-theme="dark" ou data-size="compact" à la balise pour la modifier. Le fichier contient tout ce qu’il lui faut : il ne fait aucune autre requête et ne dépose aucun cookie.

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>

Utilisez-la sur les pages qui n’autorisent pas les scripts. Ajoutez ?theme=light ou ?theme=dark à l’adresse pour fixer les couleurs.

JSON

La fiche sous forme de données pour vos pages et vos outils : nom, accroche, commande d’installation, outils et liens « Add to ». N’importe quel site peut la lire (CORS ouvert).

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

Ce que signifie chaque champ

Prompt pour l’IA

Collez-le dans un assistant de code IA, comme Claude Code ou Cursor, et il ajoutera la carte de Ui.Vision à votre site.

Markdown

Ajoute à mon site la carte mcp.tc de Ui.Vision, un serveur MCP. C’est un seul script statique : pas de build, aucun paquet à installer, aucun cookie.

Place cette balise là où la carte doit apparaître. La carte s’affiche juste avant elle :

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

Pour l’afficher ailleurs, mets ce conteneur à cet endroit et charge le même script une seule fois, par exemple avant `</body>`. Garde le lien à l’intérieur : les visiteurs sans JavaScript le voient.

```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"` ou `"dark"` sur la balise ou le conteneur fixe les couleurs. Sans cela, la carte suit le mode clair ou sombre du visiteur.
- `data-size="compact"` donne une carte plus petite, sans l’accroche.
- La variable CSS `--mcptc-max-width` sur le conteneur ou un parent fixe la largeur (`520px` par défaut).
- `?lang=` dans l’URL du script choisit la langue de la carte : `en`, `it`, `fr`, `de` ou `es`.

Si le site a une Content Security Policy, autorise `script-src https://mcp.tc` et `img-src data:` (l’icône est intégrée).

Pour un README ou une autre doc en Markdown, utilise plutôt le badge :

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

Référence : https://mcp.tc/fr/embed

Historique des changements

Ce serveur tourne sur votre ordinateur, donc nous suivons son paquet npm : chaque nouvelle version apparaît ici, avec les modifications de son propriétaire.

1. 6 oct. 2026, 21:22 UTC, Vérification automatique

   Début de l’observation : version 1.7.20.

FAQ