An astronaut overseeing a futuristic data hub
Descargar PDFVersión en Markdown

Conecta Storybook a ChatGPT, Claude y Gemini

Configúralo una vez y funciona en ChatGPT, Claude, Cursor y en cualquier otro cliente que te guste. Todo se ejecuta con seguridad en segundo plano, para que tú te relajes y te centres en lo que de verdad importa. Gestiona y consulta tu biblioteca de componentes de forma inteligente.

Pregunta a la IA sobre este Connector

Desarrollado, mantenido y alojado por Vinkius.

MCP VERIFICADO · LISTO PARA PRODUCCIÓN · GARANTÍA VINKIUS

Waiting for input…

Works with modern AI clients that support MCP, including ChatGPT, Claude, Cursor, and more.

ChatGPTClaudeCursorPerplexityGeminiMicrosoft CopilotRaycastMeta AI

Tu IA hace el trabajo. Nosotros lo cuidamos, seguro.

Ninguna otra herramienta de IA te da esto. Tu workflow se ejecuta en el cliente que ya amas, tu cuenta permanece protegida y tú decides lo que el agente puede y no puede hacer. Es la razón completa para dar el salto.

Cada Connector vive dentro de nuestra infraestructura, en el mismo lugar donde se ejecuta tu workflow. Las tres cosas de abajo ya forman parte de él, trabajando en silencio en segundo plano para que nunca tengas que pensar en ellas. Nada que añadir, nada que configurar, nada de qué preocuparte.

A futuristic MCP client docking bay
V8 Isolate01

Cada Connector se ejecuta dentro de su propio entorno sellado.

Cada Connector se ejecuta en su propio runtime V8 aislado, sin acceso a tus archivos, a tu sistema ni a otros servidores. Un Connector nunca ve más allá de su propia petición.

Kill Switch02

Un interruptor detiene a todos los agentes. Al instante.

Una única acción desactiva todos los Connectors, revoca todos los tokens y cierra todas las sesiones a la vez. La Gobernanza de IA guarda el registro.

FinOps por usuario03

Límites de gasto que se pausan en vez de sorprenderte.

Cada usuario mantiene sus propias conexiones y credenciales, aisladas de las de los demás. Lo que supere tu límite de gasto se detiene y queda esperando tu aprobación en vez de cobrarse.

Tres controles, integrados en la capa por donde tu IA se conecta.

Set curado · 6 capacidades

Publicamos solo las acciones que importan.

Set de capacidades01 / 02

01-03

3 capacidades en este set.

Parte de 6 disponibles a través de Storybook.

  1. 01

    Generar URL de vista previa

    Crea un enlace de visualización para un componente en un entorno de sandbox aislado.

  2. 02

    Obtener argumentos de la historia

    Consulta los metadatos y los argumentos por defecto de un componente específico.

  3. 03

    Listar componentes

    Muestra todos los componentes de la interfaz disponibles, con opción de filtrar por carpeta de categoría.

Set de capacidades02 / 02

04-06

3 capacidades en este set.

Parte de 6 disponibles a través de Storybook.

  1. 04

    Extraer guía de documentación

    Obtiene instrucciones detalladas sobre cómo consultar la documentación de un componente.

  2. 05

    Listar categorías

    Muestra la estructura de carpetas y las categorías principales del sistema de diseño.

  3. 06

    Buscar componentes

    Localiza componentes específicos mediante su nombre o palabras clave.

Trabajo real

Lo que los equipos ejecutan de verdad

01

Component Discovery

Ask your agent to find if a specific UI pattern already exists in your library before you start coding it.

02

Prop Verification

Use the agent to check the exact types and default values for a component's arguments.

03

Rapid Prototyping

Generate preview URLs for components to quickly verify visual changes in a sandbox.

04

Code Mapping

Locate the exact file paths for components to help your agent write more accurate imports.

Automatiza una tarea

Pon Storybook a trabajar en una cosa.

Automatizaciones paso a paso que tu IA ejecuta a través de este Connector: el flujo de trabajo, los prompts para empezar y las capabilities exactas detrás de cada paso.

Un connector, todas las IAs

Storybook funciona con los clientes de IA más populares.

Estos son los clientes más populares, cada uno con una guía paso a paso: un enlace, configurado una vez, con gobernanza y visibilidad integradas. Y como todo corre sobre el estándar MCP, la misma conexión también funciona en cualquier otro cliente compatible: nada que reconstruir.

ClaudeClaudeChatGPTChatGPTGeminiGeminiPerplexityPerplexityGrokGrokMicrosoft CopilotMicrosoft CopilotCursorCursorVS CodeVS CodeWindsurfWindsurfJetBrainsJetBrainsClineClineLangChainLangChainVercel AI SDKVercel AI SDKLovableLovableZ.aiZ.aiRaycastRaycastQwen CodeQwen CodeKimi CodeKimi CodeLe ChatLe Chat

¿Construyendo tu propia app? El connector es tuyo para usar.

No necesitas un cliente para poner Storybook a trabajar: la misma conexión alojada se conecta a tus propias aplicaciones y al código de tu agente, con la misma gobernanza en cada petición. Construye con él, conversa con él: una conexión para ambos.

Observada, no estimada

Promedio de 889ms. Rápida en producción.

Storybook se verifica a diario contra el servicio en producción.

Promedio diarioPico de 1013ms
3 octHoy
Día más rápido
750ms
Día más lento
1013ms
Tendencia de 14 días
Ralentizando+8%

Conecta tu cliente

Una URL. Todos los clientes.

Activa el Connector, copia tu enlace y pégalo en el cliente que ya usas. 6 capacidades llegan listas para funcionar.

Acceso de vista previa · no es autenticación del proveedor

El token vk_preview_* pertenece a la infraestructura de vista previa de Vinkius. Permite que Claude descubra y muestre las capacidades de Storybook, para que veas la experiencia dentro de tu IA.

No autentica tu cuenta con Storybook. Las acciones que requieran credenciales o datos reales de la cuenta podrían no ejecutarse hasta que actives el Connector y autorices el servicio.

Storybook Connector

Todo listo. Elige tu cliente MCP y sigue las instrucciones de configuración.

Enlace del conectorhttps://edge.vinkius.com/vk_preview_N8DIzTVbC8oiUJWVxiYw2lmtiUmexGVjlMrCUmAS/mcp

Claude Desktop

Sigue los pasos siguientes para conectarte en segundos.

  1. 1In Claude Desktop, open Settings → Connectors.
  2. 2Click “Add custom connector” and paste the connector link above as the remote MCP server URL.
  3. 3Click Add and start a new chat — Storybook capabilities are ready to use.
Configuración · claude_desktop_config.jsonCopiar
{
  "mcpServers": {
    "storybook-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_N8DIzTVbC8oiUJWVxiYw2lmtiUmexGVjlMrCUmAS/mcp"
    }
  }
}
  • Claude
  • ChatGPT
  • Cursor
  • VS Code
  • Windsurf
  • Claude Code
  • JetBrains
  • Cline

Las instrucciones paso a paso para cada cliente están en la guía. Cómo conectar

¿Configuración guiada para Claude? Conectar Storybook con Claude y otras IA

Ve todos los clientes de IA con los que funciona este connector ↑

Para quién es

Hecho para el trabajo que quienes usan Storybook delegan.

Esta herramienta está diseñada para equipos de producto que buscan unificar el diseño y el código mediante inteligencia artificial.

  • 01

    Ingenieros Frontend

    Para descubrir rápidamente elementos de UI existentes y sus propiedades sin salir del entorno de código.

  • 02

    Diseñadores UI/UX

    Para validar y auditar las estructuras de componentes desplegadas, asegurando que la implementación coincida con los tokens de diseño.

  • 03

    Technical Writers

    Para extraer automáticamente las rutas de documentación de Storybook y mantener las guías del sistema de diseño actualizadas.

FAQ

Preguntas de quienes usan Storybook.

  • 01

    How does the MCP get my component data?

    The MCP reads the static index.json file that Storybook generates, which contains the full hierarchy of your components.

  • 02

    Do I need to change my Storybook setup?

    No, you just need to provide the URL of your already deployed Storybook instance.

  • 03

    Can I see what the components look like?

    Yes, you can ask your agent to generate a preview URL, which provides an isolated iframe sandbox for the component.

  • 04

    Which AI clients can use this?

    This MCP works with any MCP-compatible client, including Claude, Cursor, Windsurf, and VS Code.

  • 05

    Can it help me write code?

    Yes, by retrieving prop signatures and local source paths, it gives your agent the context needed to write accurate implementation code.

  • 06

    Does it require API keys or OAuth?

    No. The MCP reads the static index.json file generated by your Storybook build. As long as the agent can reach the STORYBOOK_URL over the network, no additional authentication is needed.

  • 07

    Is the integration read-only?

    Yes. The AI reads component metadata, props, and documentation from the static index. It cannot modify actual React, Vue, or Angular source files through this integration.

  • 08

    Which UI frameworks are supported?

    Any framework supported by Storybook. React, Vue, Angular, Svelte, Web Components, and more. The MCP reads the universal index.json format, which is framework-agnostic.

Explora

Más en Loved By Devs

Sugerencias

Conecta Storybook a Claude, Cursor, ChatGPT y más