Ui.Vision

Descripción

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.

Qué puedes hacer

• 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

Herramientas

Los servidores locales muestran sus herramientas cuando están en marcha, y este no publica su lista por adelantado. Tu cliente las muestra después de añadirlo.

Prompts de ejemplo

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

Configuración

Todos los clientes inician Ui.Vision en tu equipo con el mismo comando. Elige el tuyo; la página recuerda tu elección.

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

Insertar

Muestra Ui.Vision en un README o en tu web. Cada inserción enlaza a esta página, usa el comando de instalación del servidor y no instala cookies. Cómo funcionan las inserciones

La tarjeta, el iframe y el JSON están en inglés. Añade ?lang=it, fr, de o es a su dirección para otro idioma.

Insignia para README Tarjeta para web iframe JSON Prompt para la IA

Insignia para 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>

Sigue el modo claro u oscuro de quien lee. Añade ?theme=light o ?theme=dark para fijarlo, o ?style=compact para mostrar el símbolo sin la palabra.

Tarjeta para web

HTML

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

La tarjeta aparece donde esté la etiqueta. Añade data-theme="dark" o data-size="compact" a la etiqueta para cambiarla. El archivo contiene todo lo que necesita, así que no hace otras solicitudes ni instala 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>

Úsalo en páginas que no permiten scripts. Añade ?theme=light o ?theme=dark a la dirección para fijar los colores.

JSON

La ficha como datos para tus propias páginas y herramientas: nombre, descripción corta, comando de instalación, herramientas y los enlaces «Add to». Cualquier web puede leerla (CORS abierto).

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

Qué significa cada campo

Prompt para la IA

Pégalo en un asistente de programación con IA, como Claude Code o Cursor, y añadirá la tarjeta de Ui.Vision a tu web.

Markdown

Añade a mi web la tarjeta de mcp.tc de Ui.Vision, un servidor MCP. Es un solo script estático: sin paso de build, sin paquetes que instalar, sin cookies.

Pon esta etiqueta donde deba aparecer la tarjeta. La tarjeta se muestra justo antes de ella:

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

Para mostrarla en otro sitio, pon allí este marcador y carga el mismo script una sola vez, por ejemplo antes de `</body>`. Deja el enlace dentro: lo ven los visitantes sin JavaScript.

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

Opciones:
- `data-theme="light"` o `"dark"` en la etiqueta o el marcador fija los colores. Sin él, la tarjeta sigue el modo claro u oscuro del visitante.
- `data-size="compact"` da una tarjeta más pequeña, sin el eslogan.
- La variable CSS `--mcptc-max-width` en el marcador o en un elemento padre fija el ancho (por defecto `520px`).
- `?lang=` en la URL del script fija el idioma de la tarjeta: `en`, `it`, `fr`, `de` o `es`.

Si el sitio tiene una Content Security Policy, permite `script-src https://mcp.tc` e `img-src data:` (el icono va incrustado).

Para un README u otra documentación en Markdown, usa la insignia:

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

Referencia: https://mcp.tc/es/embed

Historial de cambios

Este servidor se ejecuta en tu ordenador, así que seguimos su paquete de npm: cada versión nueva aparece aquí, junto con las ediciones de su responsable.

1. 6 oct 2026, 21:22 UTC, Comprobación automática

   Inicio del seguimiento: versión 1.7.20.

Preguntas frecuentes