Storybook MCP
Deixe o Claude ler a documentação dos seus componentes, escrever stories e rodar testes de componentes.
Oficialpor StorybookRoda no seu computadorVerificado em 18 de outubro de 2026
O addon MCP do Storybook roda um servidor MCP dentro do servidor de desenvolvimento do Storybook, para que o Claude consulte os componentes documentados e suas props, escreva e visualize stories e rode testes de componentes no próprio trabalho. Ainda está em prévia, e as ferramentas de documentação precisam de um manifesto de componentes, que projetos React e os builds Vite para Angular e Vue conseguem gerar.
Para quem é
- Equipes front-end com uma biblioteca de componentes
- Mantenedores de design systems
- Desenvolvedores que querem que o código de UI escrito por IA reaproveite componentes existentes
Prompts para testar
Depois de conectado, peça com suas palavras. Sua ferramenta de IA decide quando usar o servidor e pergunta antes de mudar algo importante.
Liste todos os componentes documentados no nosso Storybook e diga quais não têm stories.Monte um card de preços usando só componentes documentados no Storybook e depois escreva uma story para ele.Rode os testes do Storybook para o componente Button e corrija qualquer falha.Como conectar na sua ferramenta de IA
MCP é um padrão aberto, então este servidor funciona no Claude, ChatGPT, Codex, Cursor, VS Code e mais. Escolha sua ferramenta:
Conecte para mim o servidor MCP do Storybook MCP ao Claude Code: rode este comando: claude mcp add --transport http storybook http://localhost:6006/mcp
Se algum valor começar com YOUR_, me peça primeiro. Quando estiver conectado, me ajude a fazer login se precisar e mostre uma coisa que eu possa pedir a ele.Ou faça você mesmo:
claude mcp add --transport http storybook http://localhost:6006/mcpDigite /mcp dentro do Claude Code, escolha o servidor e clique em Authenticate para fazer login.
Bom saber
Adicione o addon primeiro com npx storybook add @storybook/addon-mcp e mantenha o Storybook rodando; sua porta pode ser diferente de 6006.
Libere os passos de configuração
Grátis. Deixe seu email uma vez para liberar os passos de configuração dos 150 servidores e receber os melhores conectores novos todo mês.
Como verificamos
Verificamos a documentação de MCP do Storybook (marcada como prévia), a pasta do addon no repositório storybookjs/storybook (último commit em 2026-10-14, o antigo repositório storybookjs/mcp está arquivado e aponta para lá) e o pacote npm @storybook/addon-mcp (10.6.2, cerca de 2.5 milhões de downloads por semana).