Introducción

Storybook MCP es la integración oficial del equipo de Storybook que lleva el poder del Protocolo de Contexto del Modelo (MCP) al desarrollo de UI basado en componentes. Transforma tu Storybook existente en una fuente de datos estructurada y enriquecida que los agentes de IA pueden consultar en tiempo real.

Al exponer los metadatos de componentes, historias (stories), tipos de propiedades (props), ejemplos de uso y documentación en un formato optimizado y eficiente en tokens, Storybook MCP permite a los agentes de IA construir una UI que se alinee con el sistema de diseño de tu equipo, en lugar de generar código genérico o inconsistente.

Características Principales

• Descubrimiento y Contexto de Componentes: Los agentes pueden listar componentes, recuperar propiedades detalladas, historias, controles y documentación.
• Manifiestos Optimizados: Proporciona cargas útiles (Component Manifest) curadas y legibles por máquinas con APIs, variantes, tokens de diseño y fragmentos de uso, mucho más eficientes que el código fuente en bruto.
• Generación y Prueba de Historias: Los agentes pueden escribir nuevas historias para componentes y ejecutar pruebas de forma autónoma, con bucles de retroalimentación integrados para auto-corrección.
• Integración Fluida: Instálalo mediante el paquete @storybook/addon-mcp; el servidor MCP se ejecuta junto a tu servidor de desarrollo de Storybook (normalmente en el endpoint /mcp).
• Biblioteca Independiente: Utiliza @storybook/mcp de forma independiente para configuraciones personalizadas.
• Soporte para React (v10.3+): Actualmente optimizado para React, con planes para frameworks adicionales.

Cómo Funciona

1. Instala el addon: npx storybook add @storybook/addon-mcp
2. Ejecuta tu servidor de desarrollo de Storybook.
3. Conecta cualquier agente de IA compatible con MCP (Claude, Cursor, etc.) al endpoint MCP.
4. Los agentes ahora tienen acceso directo a tu sistema de diseño activo para una generación de código consciente del contexto.

Esto crea un flujo de trabajo iterativo donde los agentes generan código, lo previsualizan mediante historias, ejecutan pruebas y solucionan problemas sin necesidad de intervención humana constante.

Beneficios para Desarrolladores

• Mayor Calidad en la Salida de la IA: Los agentes siguen tus patrones establecidos y APIs de componentes, reduciendo alucinaciones y re-trabajo. . }

Añade el complemento MCP

npx storybook add @storybook/addon-mcp

Luego ejecuta `storybook dev` y conecta tu agente a `http://localhost:6006/mcp` (el puerto puede variar).

Para la documentación completa, visita la [documentación oficial de Storybook AI / MCP](https://storybook.js.org/docs/ai/mcp/overview).

## Recursos relacionados

- Blog oficial: [Storybook MCP para React](https://storybook.js.org/blog/storybook-mcp-for-react/)
- GitHub: [storybookjs/mcp](https://github.com/storybookjs/mcp)
- npm: [@storybook/addon-mcp](https://www.npmjs.com/package/@storybook/addon-mcp)