Vibr MCP

Vibr MCP es un pequeño servidor que ejecutas en tu ordenador. Permite que un agente como Claude Code, Cursor o Claude Desktop trabaje con Vibr: listar tus prototipos, construir y modificar pantallas, importar un archivo de Figma, leer tus temas como tokens de diseño y exportar un prototipo a tu proyecto.

Tu biblioteca y tus claves están en tu navegador, así que el trabajo se hace en una pestaña de Vibr que conectas. El agente pide, y la pestaña hace el trabajo con tu sistema de diseño y la clave de tu modelo, igual que cuando escribes una petición tú mismo.

Configúralo

Necesitas Node 20 o posterior. En Claude Code, añade el servidor una vez:

claude mcp add vibr -- npx -y vibr-mcp

Otros clientes MCP usan el mismo comando en su archivo de configuración:

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

Conecta una pestaña

1. Pide a tu agente que se conecte a Vibr. Te dará un enlace a una página que el servidor muestra en tu propio ordenador.
2. Abre el enlace en el navegador donde usas Vibr y selecciona Open Vibr. Vibr se abre en su propia ventana, con tu biblioteca y tu clave. Si Vibr aún no tiene una clave, añade una ahí.
3. Vibr pregunta si el MCP de este ordenador puede trabajar en esa ventana. Selecciona Permitir.
4. La ventana muestra MCP conectado en la parte inferior. Selecciona Desconectar para terminar en cualquier momento.

Mantén abiertas la página del servidor y la ventana de Vibr mientras el agente trabaja. Cada enlace sirve para una sesión del servidor; cuando se reinicie, pide un enlace nuevo.

Qué puede hacer

• Listar y leer. Tus prototipos guardados, el código y las peticiones de un prototipo, las menciones de tu biblioteca y la configuración de la pestaña (proveedor, modelo, sistema de diseño, nunca tu clave).
• Construir. Pasar una petición por Planificar, Construir, Comprobar, Revisar y Reparar, como un prototipo nuevo o una nueva versión de uno existente, y guardarlo en tu biblioteca. Usa tu clave, así que cuesta lo mismo que la misma petición en Vibr.
• Importar desde Figma. Importar un archivo .vibr-figma.json del plugin Send to Vibr y construir sus marcos como pantallas enlazadas. Consulta Importar desde Figma.
• Leer temas. Un tema como propiedades personalizadas de CSS o tokens de diseño, con sus roles claros y oscuros.
• Exportar. Escribir un prototipo en una carpeta como una sola página, un flujo enlazado o su código fuente de React. Nunca reemplaza un archivo a menos que tú lo digas, y nunca escribe fuera de la carpeta que indiques.

Privacidad y seguridad

• Tus claves nunca salen de la pestaña. El servidor nunca las ve, y las peticiones van de la pestaña a tu proveedor del modelo, como siempre.
• El servidor escucha solo en 127.0.0.1. Pasa el trabajo a Vibr a través de su propia página en tu navegador, así que vibr.art nunca se conecta a tu ordenador.
• Vibr solo acepta trabajo de la página que lo abrió, solo con el código aleatorio de un solo uso del enlace del servidor y solo después de que selecciones Permitir.
• El contenido de tu biblioteca llega al agente como datos: el texto de un prototipo o un archivo importado no puede darle instrucciones a tu agente a menos que tu agente lo trate así, así que revisa lo que construye como harías con cualquier borrador.

Más en Claves, privacidad y almacenamiento.

Ajustes

• VIBR_MCP_PORT: el puerto en tu ordenador (4517, salvo que esté ocupado).
• VIBR_MCP_APP: la página de Vibr que abre el enlace (https://vibr.art/, salvo que ejecutes Vibr tú mismo).

Solución de problemas

• Vibr nunca se conecta. Comprueba que has seleccionado Permitir en la ventana de Vibr y que la página del servidor sigue abierta. Si el navegador bloqueó la ventana, permite las ventanas emergentes para esa página y vuelve a seleccionar Open Vibr.
• El agente dice que no hay ninguna pestaña conectada. El servidor se reinició o se cerró una ventana. Pide un enlace nuevo y ábrelo.
• Falla una construcción. Abre la ventana de Vibr: la ejecución muestra cada paso, igual que cuando escribes una petición.