An astronaut overseeing a futuristic data hub
Baixar PDFVersão em Markdown

Conecte Storybook ao ChatGPT, Claude e Gemini

Configure uma vez e funcione no ChatGPT, Claude, Cursor e em qualquer outro cliente que você goste. Tudo roda com segurança em segundo plano, para você relaxar e focar no que realmente importa. Acesse componentes e documentação via IA de forma nativa.

Pergunte à IA sobre este Connector

Desenvolvido, mantido e hospedado pela Vinkius.

MCP VERIFICADO · PRONTO PARA PRODUÇÃO · GARANTIA VINKIUS

Waiting for input…

Works with modern AI clients that support MCP, including ChatGPT, Claude, Cursor, and more.

ChatGPTClaudeCursorPerplexityGeminiMicrosoft CopilotRaycastMeta AI

A sua IA faz o trabalho. A gente cuida com segurança.

Nenhuma outra ferramenta de IA te dá isso. O seu workflow roda no cliente que você já ama, a sua conta fica protegida, e você decide o que o agente pode e não pode fazer. É a razão completa para mudar de vez.

Cada Connector vive dentro da nossa infraestrutura, no mesmo lugar onde o seu workflow roda. As três coisas abaixo já fazem parte dele, trabalhando silenciosamente em segundo plano para que você nunca precise pensar nelas. Nada para adicionar, nada para configurar, nada com que se preocupar.

A futuristic MCP client docking bay
V8 Isolate01

Cada Connector roda dentro do seu próprio ambiente lacrado.

Cada Connector roda em seu próprio runtime V8 lacrado — sem acesso aos seus arquivos, ao seu sistema ou a outros servidores. Um Connector nunca enxerga além da sua própria requisição.

Kill Switch02

Um interruptor para todos os agentes. Na hora.

Uma única ação desativa todos os Connectors, revoga todos os tokens e encerra todas as sessões de uma vez. A Governança de IA guarda o registro.

FinOps por usuário03

Limites de gastos que pausam em vez de assustar.

Cada usuário tem suas próprias conexões e credenciais, isoladas das dos demais. O que ultrapassar o seu limite de gastos fica aguardando a sua aprovação, em vez de ser cobrado.

Três controles, embutidos na camada pela qual sua IA se conecta.

Conjunto curado · 6 capacidades

Entregamos só as ações que importam.

Conjunto de capacidades01 / 02

01-03

3 capacidades neste conjunto.

Parte de 6 disponíveis através de Storybook.

  1. 01

    Gerar URL de preview

    Gera um link de visualização para um componente em um ambiente de sandbox isolado.

  2. 02

    Obter argumentos da história

    Recupera metadados e os argumentos padrão de um componente específico.

  3. 03

    Listar componentes

    Lista todos os componentes de UI disponíveis no seu Design System, com opção de filtrar por categoria.

Conjunto de capacidades02 / 02

04-06

3 capacidades neste conjunto.

Parte de 6 disponíveis através de Storybook.

  1. 04

    Extrair guia de documentação

    Fornece orientações sobre como ler e utilizar a documentação de um componente.

  2. 05

    Listar categorias

    Exibe as categorias de nível superior e a estrutura de pastas do seu Design System.

  3. 06

    Buscar componentes

    Localiza componentes específicos através de nomes ou palavras-chave.

Trabalho real

O que as equipes executam de verdade

01

Component Discovery

Ask your agent to find if a specific UI pattern already exists in your library before you start coding it.

02

Prop Verification

Use the agent to check the exact types and default values for a component's arguments.

03

Rapid Prototyping

Generate preview URLs for components to quickly verify visual changes in a sandbox.

04

Code Mapping

Locate the exact file paths for components to help your agent write more accurate imports.

Automatize uma tarefa

Coloque Storybook para trabalhar em uma coisa.

Automações passo a passo que sua IA executa por este Connector: o fluxo, os prompts para começar e as capabilities exatas por trás de cada passo.

Um connector, todas as IAs

Storybook funciona com os clientes de IA mais populares.

Estes são os clientes mais populares, cada um com um guia passo a passo: um link, configurado uma vez, com governança e visibilidade embutidas. E como tudo roda no padrão MCP, a mesma conexão também funciona em qualquer outro cliente compatível — nada para reconstruir.

ClaudeClaudeChatGPTChatGPTGeminiGeminiPerplexityPerplexityGrokGrokMicrosoft CopilotMicrosoft CopilotCursorCursorVS CodeVS CodeWindsurfWindsurfJetBrainsJetBrainsClineClineLangChainLangChainVercel AI SDKVercel AI SDKLovableLovableZ.aiZ.aiRaycastRaycastQwen CodeQwen CodeKimi CodeKimi CodeLe ChatLe Chat

Construindo o seu próprio app? O connector é seu para usar.

Você não precisa de um cliente para colocar Storybook para trabalhar: a mesma conexão hospedada entra nas suas aplicações e no código do seu agente, com a mesma governança em cada pedido. Construa com ele, converse com ele — uma conexão para os dois.

Observada, não estimada

Média de 889ms. Rápida em produção.

Storybook é verificado diariamente contra o serviço em produção.

Média diáriaPico de 1013ms
3 de out.Hoje
Dia mais rápido
750ms
Dia mais lento
1013ms
Tendência de 14 dias
Desacelerando+8%

Conecte seu cliente

Uma URL. Todos os clientes.

Ative o Connector, copie seu link e cole no cliente que você já usa. 6 capacidades chegam prontas para rodar.

Acesso de prévia · não é autenticação no provedor

O token vk_preview_* pertence à infraestrutura de prévia da Vinkius. Ele permite que o Claude descubra e exiba as capacidades de Storybook, para você ver a experiência dentro da sua IA.

Ele não autentica a sua conta com Storybook. Ações que exigem credenciais ou dados reais da conta podem não ser executadas até que você ative o Connector e autorize o serviço.

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"
    }
  }
}
  • Claude
  • ChatGPT
  • Cursor
  • VS Code
  • Windsurf
  • Claude Code
  • JetBrains
  • Cline

Instruções passo a passo para cada cliente estão no guia. Como conectar

Configuração guiada para o Claude? Configurar Storybook no Claude e outras IAs

Veja todos os clientes de IA com quem este connector funciona ↑

Para quem é

Feito para o trabalho que quem usa Storybook delega.

Desenvolvedores e designers que buscam agilidade no uso de sistemas de design prontos.

  • 01

    Engenheiros de Frontend

    Descobrem elementos de UI existentes e suas propriedades sem sair do ambiente de código.

  • 02

    Designers de UI/UX

    Validam estruturas de componentes para garantir que a implementação siga fielmente os design tokens.

  • 03

    Technical Writers

    Extraem caminhos de documentação do Storybook para manter guias de design sempre atualizados.

FAQ

Perguntas de quem usa Storybook.

  • 01

    How does the MCP get my component data?

    The MCP reads the static index.json file that Storybook generates, which contains the full hierarchy of your components.

  • 02

    Do I need to change my Storybook setup?

    No, you just need to provide the URL of your already deployed Storybook instance.

  • 03

    Can I see what the components look like?

    Yes, you can ask your agent to generate a preview URL, which provides an isolated iframe sandbox for the component.

  • 04

    Which AI clients can use this?

    This MCP works with any MCP-compatible client, including Claude, Cursor, Windsurf, and VS Code.

  • 05

    Can it help me write code?

    Yes, by retrieving prop signatures and local source paths, it gives your agent the context needed to write accurate implementation code.

  • 06

    Does it require API keys or OAuth?

    No. The MCP reads the static index.json file generated by your Storybook build. As long as the agent can reach the STORYBOOK_URL over the network, no additional authentication is needed.

  • 07

    Is the integration read-only?

    Yes. The AI reads component metadata, props, and documentation from the static index. It cannot modify actual React, Vue, or Angular source files through this integration.

  • 08

    Which UI frameworks are supported?

    Any framework supported by Storybook. React, Vue, Angular, Svelte, Web Components, and more. The MCP reads the universal index.json format, which is framework-agnostic.

Explore

Mais em Loved By Devs

Sugestões

Conecte Storybook ao Claude, Cursor, ChatGPT e outros