Vibr MCP

O Vibr MCP é um pequeno servidor que você roda no seu computador. Ele permite que um agente como o Claude Code, o Cursor ou o Claude Desktop trabalhe com o Vibr: listar seus protótipos, criar e ajustar telas, importar um arquivo do Figma, ler seus temas como design tokens e exportar um protótipo para o seu projeto.

A sua biblioteca e as suas chaves ficam no seu navegador, então o trabalho acontece em uma aba do Vibr que você conecta. O agente pede, e a aba faz o trabalho com o seu design system e a chave do seu modelo, do mesmo jeito que quando você mesmo digita uma solicitação.

Configure

Você precisa do Node 20 ou posterior. No Claude Code, adicione o servidor uma vez:

claude mcp add vibr -- npx -y vibr-mcp

Outros clientes MCP usam o mesmo comando no arquivo de configurações deles:

{ "mcpServers": { "vibr": { "command": "npx", "args": ["-y", "vibr-mcp"] } } }

Conecte uma aba

1. Peça ao seu agente para se conectar ao Vibr. Ele dá a você um link para uma página que o servidor mostra no seu próprio computador.
2. Abra o link no navegador em que você usa o Vibr e selecione Open Vibr. O Vibr abre em uma janela própria, com a sua biblioteca e a sua chave. Se o Vibr ainda não tiver uma chave, adicione uma lá.
3. O Vibr pergunta se o MCP deste computador pode trabalhar naquela janela. Selecione Permitir.
4. A janela mostra MCP conectado na parte de baixo. Selecione Desconectar para encerrar a qualquer momento.

Mantenha a página do servidor e a janela do Vibr abertas enquanto o agente trabalha. Cada link vale para uma sessão do servidor; quando o servidor reiniciar, peça um link novo.

O que ele pode fazer

• Listar e ler. Seus protótipos salvos, o código e as solicitações de um protótipo, as menções da sua biblioteca e o que está configurado na aba (provedor, modelo, design system, nunca a sua chave).
• Criar. Passar uma solicitação por Planejar, Criar, Verificar, Revisar e Corrigir, como um protótipo novo ou uma nova versão de um existente, e salvá-lo na sua biblioteca. Ele usa a sua chave, então custa o mesmo que a mesma solicitação custa no Vibr.
• Importar do Figma. Importar um arquivo .vibr-figma.json do plugin Send to Vibr e criar os frames dele como telas vinculadas. Consulte Importar do Figma.
• Ler temas. Um tema como propriedades personalizadas de CSS ou design tokens, com os papéis claros e escuros dele.
• Exportar. Gravar um protótipo em uma pasta como uma única página, um fluxo vinculado ou o código-fonte React dele. Ele nunca substitui um arquivo a menos que você peça, e nunca grava fora da pasta que você indicar.

Privacidade e segurança

• Suas chaves nunca saem da aba. O servidor nunca as vê, e as solicitações vão da aba para o provedor do seu modelo, como sempre.
• O servidor escuta apenas em 127.0.0.1. Ele passa o trabalho ao Vibr pela própria página no seu navegador, então vibr.art nunca se conecta ao seu computador.
• O Vibr só aceita trabalho da página que o abriu, só com o código aleatório de uso único que está no link do servidor e só depois que você seleciona Permitir.
• O conteúdo da sua biblioteca chega ao agente como dados: o texto de um protótipo ou um arquivo importado não pode dar instruções ao seu agente, a menos que o seu agente o trate assim. Por isso, revise o que ele cria como faria com qualquer rascunho.

Mais em Chaves, privacidade e armazenamento.

Configurações

• VIBR_MCP_PORT: a porta no seu computador (4517, a menos que esteja ocupada).
• VIBR_MCP_APP: a página do Vibr que o link abre (https://vibr.art/, a menos que você mesmo rode o Vibr).

Solução de problemas

• O Vibr nunca se conecta. Verifique se você selecionou Permitir na janela do Vibr e se a página do servidor ainda está aberta. Se o navegador bloqueou a janela, permita pop-ups para essa página e selecione Open Vibr de novo.
• O agente diz que nenhuma aba está conectada. O servidor reiniciou ou uma janela foi fechada. Peça um link novo e abra-o.
• Uma criação falha. Abra a janela do Vibr: a execução mostra cada etapa, do mesmo jeito que quando você digita uma solicitação.