Storybook MCP

Storybook MCP

Un servidor MCP universal que se conecta a cualquier sitio de Storybook y extrae documentación en tiempo real usando Playwright.

Úsalo con cualquier IA o cliente que admita MCP (Model Context Protocol): Cursor, Claude Desktop, Windsurf u otros hosts MCP.

Características

• Funciona con cualquier Storybook: detecta el formato y la versión automáticamente
• Navegación en vivo: extracción en tiempo real basada en Playwright
• Detección automática: detecta el formato de Storybook automáticamente
• Archivo único: solo index.js, sin paso de compilación

Configuración de MCP

Cursor — instalación en un clic

Uso con npx (recomendado)

Agrega a la configuración de tu cliente MCP (por ejemplo, Cursor: ~/.cursor/mcp.json o Settings → MCP; Claude: claude_desktop_config.json; etc.):

{
  "mcpServers": {
    "storybook-mcp": {
      "command": "npx",
      "args": ["-y", "@raksbisht/storybook-mcp"]
    }
  }
}

Con una URL predeterminada de Storybook (opcional):

{
  "mcpServers": {
    "storybook-mcp": {
      "command": "npx",
      "args": ["-y", "@raksbisht/storybook-mcp"],
      "env": {
        "STORYBOOK_URL": "https://your-storybook.com"
      }
    }
  }
}

Desde el código fuente (desarrollo)

git clone https://github.com/raksbisht/storybook-mcp.git
cd storybook-mcp
npm install

Luego en tu configuración de MCP:

{
  "mcpServers": {
    "storybook-mcp": {
      "command": "node",
      "args": ["/path/to/storybook-mcp/index.js"]
    }
  }
}

Herramientas disponibles

Herramienta	Descripción
connect	Conéctate a una URL de Storybook y obtén el estado de la conexión. Requerido antes de otras herramientas.
list	Lista componentes e historias en la navegación. Opcional: category, full (jerarquía).
search	Busca componentes por nombre o ruta. Requerido: query.
get_docs	Obtén documentación, ejemplos de código y contenido para un componente o historia. Requerido: path. Opcional: full, format (markdown/estructurado).
screenshot	Toma una captura de pantalla de un componente o historia. Requerido: path.

Ejemplo

1. connect({ url: "https://storybook.js.org" })
2. search({ query: "button" })
3. get_docs({ path: "components-button--basic" })

Compatibilidad

Funciona con implementaciones comunes de Storybook (varios formatos de URL y configuraciones basadas en index.json).

Licencia

MIT