Storybook MCP

Storybook MCP

Um servidor MCP universal que se conecta a qualquer site Storybook e extrai documentação em tempo real usando Playwright.

Use-o com qualquer IA ou cliente que suporte MCP (Model Context Protocol)—Cursor, Claude Desktop, Windsurf ou outros hosts MCP.

Recursos

• Funciona com qualquer Storybook - Detecta automaticamente o formato e a versão
• Navegação ao vivo - Extração em tempo real baseada em Playwright
• Detecção automática - Detecta o formato do Storybook automaticamente
• Arquivo único - Apenas index.js, sem etapa de build

Configuração do MCP

Cursor — instalação em um clique

Usando npx (recomendado)

Adicione à configuração do seu cliente MCP (ex.: Cursor: ~/.cursor/mcp.json ou Settings → MCP; Claude: claude_desktop_config.json; etc.):

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

Com uma URL padrão do Storybook (opcional):

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

A partir do código-fonte (desenvolvimento)

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

Depois, na sua configuração do MCP:

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

Ferramentas Disponíveis

Ferramenta	Descrição
connect	Conecta-se a uma URL do Storybook e retorna o status da conexão. Necessária antes das outras ferramentas.
list	Lista componentes e histórias na navegação. Opcional: category, full (hierarquia).
search	Busca componentes por nome ou caminho. Necessário: query.
get_docs	Obtém documentação, exemplos de código e conteúdo para um componente ou história. Necessário: path. Opcional: full, format (markdown/estruturado).
screenshot	Tira uma captura de tela de um componente ou história. Necessário: path.

Exemplo

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

Compatibilidade

Funciona com implantações comuns do Storybook (vários formatos de URL e configurações baseadas em index.json).

Licença

MIT