# Storybook MCP

Storybook MCP es un servidor oficial de Model Context Protocol (MCP) que conecta agentes de IA con tu Storybook, proporcionando metadatos de componentes legibles por máquina, stories, props y documentación para que los agentes puedan reutilizar componentes de UI de forma inteligente y autocorregirse con pruebas.

Canonical URL: https://a2a-mcp.org/entry/storybook-mcp-es

Language: es

Category: MCP Servers

Updated: 2026-04-09

## Introducción

Storybook MCP es la integración oficial del equipo de Storybook que lleva el poder del [Protocolo de Contexto del Modelo (MCP)](https://modelcontextprotocol.io/) 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)

## Tags

- storybook
- mcp
- agente-ia
- react
- componentes-ui
- sistema-de-diseño
- frontend
- typescript

## Sources

- [Project website](https://storybook.js.org/docs/ai/mcp/overview)