Diseño y código
Storybook y su MCP
Qué ofrece el servidor MCP de Storybook a un agente, cómo instalarlo, qué frameworks generan el manifiesto de componentes y qué instrucciones conviene darle al agente.
Última revisión:
Si tu librería de componentes usa Storybook, su servidor MCP da al agente la lista de componentes, sus props y las historias como ejemplos de uso. Es la fuente más fiable de "qué props existen", porque sale del código.
En esta página
- Qué ofrece
- Qué frameworks lo admiten
- Instalarlo
- Las instrucciones para el agente
- Figma y Storybook juntos
- En resumen
Qué ofrece
El servidor MCP de Storybook conecta tu Storybook con agentes de IA para que entiendan tus componentes y su documentación, generen historias y ejecuten pruebas. Sus herramientas se agrupan en tres conjuntos (Storybook: MCP server):
| Conjunto | Herramientas | Para qué |
|---|---|---|
| Docs | docs-list, docs-show, docs-show-story | Consultar componentes, props y documentación |
| Development | get-storybook-story-instructions, stories-preview, stories-find-by-component, stories-changed, review-create | Crear y revisar historias |
| Testing | test-run | Ejecutar las pruebas de componentes |
El conjunto Docs lee el manifiesto de componentes, que Storybook genera por análisis estático de las historias y de los tipos de las props (Storybook: Manifests).
Aviso
Las capacidades de IA de Storybook están en preview en la versión 10.6, y su API puede cambiar (Storybook: MCP server).
Qué frameworks lo admiten
| Framework | Manifiesto de componentes |
|---|---|
Cualquier framework de React (react-vite, nextjs…) | Sí |
@storybook/angular-vite | Sí |
@storybook/vue3-vite | Sí, con experimentalDocgenServer |
@storybook/angular (Webpack) y el resto | No: el conjunto Docs no está disponible; Development y Testing, sí |
Fuente: Storybook: MCP server.
Instalarlo
Terminal
npx storybook add @storybook/addon-mcpCon el servidor de desarrollo de Storybook en marcha, el MCP queda en http://localhost:6006/mcp (el puerto puede variar). El manifiesto de componentes está desactivado por defecto y se activa en la configuración:
.storybook/main.ts (fragmento)
features: {
componentsManifest: true,
},Para conectar el servidor a Claude Code, mira Servidores MCP.
Las instrucciones para el agente
Storybook propone un texto para el archivo de instrucciones del agente (AGENTS.md o CLAUDE.md). Sus puntos principales (Storybook: MCP server):
- Usar las herramientas del MCP de Storybook antes de responder o actuar sobre componentes de interfaz.
- No inventar nunca propiedades de un componente: usar solo las documentadas o las que aparecen en las historias de ejemplo.
- Pedir las instrucciones actuales para crear historias con
get-storybook-story-instructions. - Comprobar el trabajo con
test-run.
Figma y Storybook juntos
| Pregunta del agente | Quién responde |
|---|---|
| ¿Qué componente es este elemento del diseño? | Code Connect, por el MCP de Figma |
| ¿Qué props tiene y qué valores admite? | El manifiesto, por el MCP de Storybook |
| ¿Cuándo debo usarlo y cuándo no? | La documentación del sistema y el JSDoc del componente |
Recomendación
Si tienes Storybook, enlaza cada historia desde los dev resources del componente en Figma (Dev resources) y desde el frontmatter de su documento. Así las tres fuentes apuntan al mismo componente.
En resumen
- El MCP de Storybook da al agente los componentes, las props y las historias como ejemplos.
- El manifiesto funciona con React,
angular-viteyvue3-vite; está en preview. - Figma dice qué componente es; Storybook, qué props tiene; la documentación, cuándo usarlo.