Storybook MCP

El addon MCP de Storybook ejecuta un servidor MCP dentro de tu servidor de desarrollo de Storybook, para que Claude consulte los componentes documentados y sus props, escriba y previsualice stories y pruebe los componentes de su propio trabajo. Todavía está en preview, y las herramientas de documentación necesitan un manifiesto de componentes, que pueden generar los proyectos React y los builds con Vite para Angular y Vue.

Para quién es

• Equipos front-end con una librería de componentes
• Mantenedores de sistemas de diseño
• Desarrolladores que quieren que el código de UI hecho con IA reutilice componentes existentes

Prompts para probar

Cuando esté conectado, pide lo que quieras con tus palabras. Tu herramienta de IA decide cuándo usar el servidor y te pregunta antes de cambiar algo importante.

Lista todos los componentes documentados en nuestro Storybook y dime cuáles no tienen stories.

Arma una tarjeta de precios usando solo componentes documentados en Storybook y luego escribe una story para ella.

Ejecuta las pruebas de Storybook del componente Button y corrige los fallos.

Cómo conectarlo en tu herramienta de IA

MCP es un estándar abierto, así que este servidor funciona en Claude, ChatGPT, Codex, Cursor, VS Code y más. Elige tu herramienta:

Conecta por mí el servidor MCP de Storybook MCP a Claude Code: ejecuta este comando: claude mcp add --transport http storybook http://localhost:6006/mcp
Si un valor empieza por YOUR_, pídemelo primero. Cuando esté conectado, ayúdame a iniciar sesión si hace falta y muéstrame algo que pueda pedirle.

Cómo lo verificamos

Revisamos la documentación MCP de Storybook (marcada como preview), la carpeta del addon en el repo storybookjs/storybook (último commit el 2026-10-14; el antiguo repo storybookjs/mcp está archivado y apunta ahí) y el paquete npm @storybook/addon-mcp (10.6.2, unas 2.5 millones de descargas semanales).

Fuente: storybook.js.org/docs/ai/mcp/overview