• REDUNDÂNCIA
  • DESCOBERTA
  • ESTRUTURA
  • HUMANO

Como encontrar componentes de UI com sua IA

Conecte o Storybook ao seu cliente de IA uma única vez. Depois disso, você poderá consultar todo o seu design system usando linguagem natural.

Pergunte à IA sobre esta página

Resposta rápida

Como encontro componentes de UI existentes com minha IA?

Sua IA utiliza o MCP do Storybook para escanear sua biblioteca e categorias de componentes. Ela identifica correspondências com base na sua descrição para que você não precise reconstruir o que já existe.

Onde sua busca chega

O que você ganha com essas buscas

A IA transforma seu design system em uma base de conhecimento pesquisável.

REDUNDÂNCIA

Zero código duplicado

A IA identifica componentes existentes que atendem aos seus requisitos. Você evita escrever novo CSS ou lógica para itens que já estão na biblioteca.

DESCOBERTA

Busca instantânea

Em vez de clicar em pastas, basta pedir o que precisa. A IA encontra o componente certo em segundos.

ESTRUTURA

Visão organizada do sistema

A IA mapeia as categorias dos seus componentes. Isso ajuda você a entender como o design system está organizado sem precisar navegar manualmente.

HUMANO

Validação final

A IA sugere o melhor componente para usar. Você decide se ele realmente se encaixa no padrão de UI que está construindo.

O fluxo

O que sua IA faz quando recebe o pedido.

A IA atua como uma ponte entre sua interface de chat e seus arquivos do Storybook.

  1. Mapear o sistema

    A IA analisa como seus componentes estão agrupados para entender a estrutura da biblioteca.

    list_categories

  2. Listar partes disponíveis

    Ela extrai uma lista completa de componentes de categorias específicas para ver o que está disponível.

    list_components

  3. Busca direcionada

    Ao descrever um elemento de UI, a IA busca a correspondência mais próxima na biblioteca.

    search_components

  4. Verificar a correspondência

    A IA compara suas necessidades com as propriedades do componente para garantir que é a escolha certa.

    search_components

Teste

Copie estes exemplos para começar.

Use estes comandos para começar a interagir com seu design system.

Pontos de partida

Substitua os nomes dos componentes ou categorias pelos que existem na sua configuração específica do Storybook.

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 todos os componentes de botão no meu Storybook.

  • Busque por componentes de input que aceitem entrada de texto.

  • Liste todas as categorias disponíveis no meu design system.

  • Preciso de um componente de card para um perfil de usuário; o que temos no Storybook?

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

Comece aqui

Conecte o Storybook uma vez e depois é só perguntar.

Basta vincular sua instância do Storybook ao Vinkius. Suas credenciais ficam criptografadas e você pode começar a perguntar sobre seus componentes imediatamente.

Conectar Storybook à sua IA

FAQ

Como essa tarefa funciona.

  • 01

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

    Não. A IA só pode ler e pesquisar os dados do seu Storybook. Ela não consegue modificar seu código-fonte ou arquivos.

  • 02

    A IA vê a lógica privada dos meus componentes?

    A IA vê apenas os metadados e a estrutura dos componentes expostos pelo Storybook. Ela não tem acesso ao seu sistema de arquivos local.

  • 03

    Ela pode criar novos componentes para mim?

    Não. As ferramentas permitem apenas que a IA liste, categorize e pesquise componentes já existentes.

  • 04

    Como ela sabe quais componentes existem?

    Ela utiliza as ferramentas de busca e listagem para puxar o registro atual de componentes diretamente da sua instância do Storybook.

  • 05

    Funciona com qualquer configuração de Storybook?

    Sim, desde que a instância do Storybook esteja acessível através da conexão que você configurou via Vinkius.

  • Mais dúvidas sobre o Storybook? A página do Connector responde. Veja tudo o que o Storybook Connector pode fazer

Conecte Storybook ao Claude, Cursor, ChatGPT e outros