• VISUAL
  • BUSCA
  • VERIFICAÇÃO
  • HUMANO

Como visualizar componentes no Storybook com sua IA

Conecte o Storybook ao seu cliente de IA uma única vez. Depois disso, você poderá abrir prévias de componentes ao vivo direto na sua conversa.

Pergunte à IA sobre esta página

Resposta rápida

Como vejo meus componentes do Storybook no chat da IA?

Sua IA utiliza o MCP do Storybook para localizar componentes específicos e gerar URLs de iframe exclusivas. Você recebe um link direto para um ambiente de sandbox onde o componente é renderizado de forma isolada. Isso permite conferir mudanças visuais ou de comportamento imediatamente após pedir uma atualização de código.

Resultados

O que você ganha com esta conexão

A IA cuida da busca técnica e da geração de URLs, deixando você focado na interface.

VISUAL

Prévias instantâneas

A IA encontra o componente certo e fornece uma URL. Você clica para ver o componente renderizado em um iframe isolado.

BUSCA

Descoberta de componentes

Se você não souber o nome exato, sua IA pesquisa na biblioteca do Storybook para encontrar o que você precisa.

VERIFICAÇÃO

Feedback visual rápido

Após a IA modificar o código, você pode gerar uma nova URL de prévia para conferir se o ajuste funcionou.

HUMANO

Edições manuais de código

A IA não pode reescrever seus arquivos locais ou fazer commits. Você ainda controla o salvamento de arquivos e o fluxo de git.

O fluxo

O que sua IA faz ao pedir uma prévia.

A IA funciona como uma ponte entre sua interface de chat e sua instância do Storybook.

  1. Localizar o componente

    A IA varre sua biblioteca Storybook para identificar o componente específico que você quer visualizar.

    search_components

  2. Gerar o link de sandbox

    Assim que encontrado, a IA cria uma URL direta que aponta para um iframe isolado daquele componente.

    get_preview_url

  3. Entregar a URL

    A IA apresenta o link clicável na sua janela de chat para acesso imediato.

    get_preview_url

  4. Validar alterações

    Após você solicitar um ajuste visual, a IA repete a busca e a geração para mostrar o estado atualizado.

    search_componentsget_preview_url

Teste

Copie estes comandos para começar.

Use estes prompts para acionar as ferramentas do Storybook.

Pontos de partida

Estes são pedidos básicos. Substitua os nomes dos componentes pelos que existem no seu projeto real.

Storybook Connector

Tudo pronto. Escolha seu cliente MCP e siga as instruções de configuração.

Link do conectorhttps://edge.vinkius.com/vk_preview_N8DIzTVbC8oiUJWVxiYw2lmtiUmexGVjlMrCUmAS/mcp

Claude Desktop

Siga os passos abaixo para conectar em segundos.

  1. 1In Claude Desktop, open Settings → Connectors.
  2. 2Click “Add custom connector” and paste the connector link above as the remote MCP server URL.
  3. 3Click Add and start a new chat — Storybook capabilities are ready to use.
Configuração · claude_desktop_config.jsonCopiar
{
  "mcpServers": {
    "storybook-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_N8DIzTVbC8oiUJWVxiYw2lmtiUmexGVjlMrCUmAS/mcp"
    }
  }
}
Copie no chat04

  • Encontre o componente Button no Storybook e me dê uma URL de prévia.

  • Busque todos os componentes relacionados a 'Navigation' e mostre os links de prévia.

  • Preciso ver o componente Modal em um sandbox isolado. Pode gerar a URL?

  • Mostre a prévia do componente PrimaryButton para eu conferir o padding.

  • Claude
  • ChatGPT
  • Cursor
  • VS Code
  • Windsurf
  • Claude Code
  • JetBrains
  • Cline

Comece aqui

Conecte o Storybook uma vez e pronto.

Basta vincular sua instância do Storybook ao Vinkius. Suas credenciais ficam criptografadas e você estará pronto para visualizar componentes em qualquer cliente compatível com MCP.

Conectar Storybook à sua IA

FAQ

Como funciona a prévia do Storybook

  • 01

    A IA pode alterar o código do meu componente diretamente?

    Não. A IA apenas localiza componentes e gera URLs de prévia. Você deve aplicar as mudanças de código no seu próprio editor.

  • 02

    A IA precisa do meu login do Storybook?

    Não. Você conecta o MCP via Vinkius, que gerencia a conexão de forma segura. Seu cliente de IA não precisa das suas credenciais.

  • 03

    A IA pode criar novas stories para mim?

    Não. As ferramentas permitem apenas que a IA pesquise componentes existentes e obtenha URLs de stories já criadas.

  • 04

    A prévia mostrará minhas variáveis de ambiente locais?

    A URL de prévia aponta para sua instância do Storybook. O comportamento dependerá de como seu Storybook está configurado para lidar com dados.

  • 05

    Posso usar isso com o Cursor?

    Sim. Qualquer cliente compatível com MCP, como Cursor, Claude ou Windsurf, pode usar esta função após a conexão.

  • Mais dúvidas sobre o Storybook? Veja tudo o que o Storybook Connector pode fazer

Conecte Storybook ao Claude, Cursor, ChatGPT e outros