WunderUI MCP

WunderUI MCP

Um servidor MCP que dá a um agente de codificação de IA o sistema de design WunderUI: tokens de design, o inventário de componentes com assinaturas reais de props, templates de páginas e trechos iniciais. O agente constrói com a biblioteca em vez de reinventar uma grade de dados com divs brutos.

claude mcp add wunderui -- npx -y wunderui-mcp

Funciona com Claude Code, Cursor, Windsurf, Cline, Codex, VS Code e qualquer outro cliente que fale MCP via stdio. Sem chave e sem conta necessárias.

Ferramentas

Ferramenta	O que o agente recebe
list_components	O inventário, filtrável por categoria, plano (gratuito ou pro) ou texto livre
get_component	Exportações, a assinatura TypeScript de props, a linha de importação, um exemplo, a URL da documentação
get_tokens	Tokens claros e escuros como JSON, um bloco CSS ou mapeamentos Tailwind @theme
get_design_md	O DESIGN.md completo, ou uma seção (rules, donts, tasks, tokens, inventory, reference, templates, starters)
list_templates	Os templates de página inteira e do que cada um é construído
get_starter	TSX copiável e colável: shell de aplicativo, dashboard, grade de dados, chat de IA, theming
get_library_info	Nome do pacote, versão, comandos de instalação, stack, contagens, fonte de dados
get_instructions	As regras curtas e sempre ativas (componentes, tokens, movimento, copy) para CLAUDE.md / AGENTS.md
list_skills	As habilidades do agente WunderUI, gratuitas e Pro
get_skill	As instruções de uma habilidade (SKILL.md), para que o agente possa segui-las sem instalar — habilidades Pro precisam de WUNDERUI_LICENSE_KEY
get_block_source	O código-fonte React de um bloco de UI e seus helpers compartilhados — precisa de uma chave Pro em WUNDERUI_LICENSE_KEY

Cada componente carrega seu plano. No plano gratuito, um agente deve usar apenas componentes marcados como free; os demais precisam de WunderUI Core ou Pro.

Instalação

Claude Code

claude mcp add wunderui -- npx -y wunderui-mcp

Cursor: .cursor/mcp.json

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

Windsurf, Cline, Codex, VS Code: o mesmo formato, na configuração MCP do respectivo editor.

Instalando o WunderUI em si

O servidor descreve a biblioteca; ele não a entrega. @wunderui/react não está no registro público do npm: titulares de licenças Core e Pro o instalam a partir do download wunderui-core (a habilidade de agente wunderui-setup faz isso por você), e o servidor informa exatamente isso aos agentes. O plano gratuito cobre a pré-visualização no Figma e a documentação em wunderui.com.

De onde vêm os dados

data/design.json e data/DESIGN.md são gerados a partir do código-fonte do WunderUI a cada lançamento: tokens da folha de estilos, props das definições de tipos compiladas, nomes e descrições da documentação.

O servidor inicia com a cópia incluída e responde imediatamente. Em segundo plano, ele busca os design.json e DESIGN.md atuais de wunderui.com e alterna para eles quando são pelo menos tão novos, para que os agentes vejam novos componentes sem atualização de pacote. get_library_info informa qual fonte está em uso.

Variável	Efeito
WUNDERUI_OFFLINE=1	nunca tocar na rede, usar a cópia incluída
WUNDERUI_SITE=<url>	buscar os dados ao vivo de outra origem
WUNDERUI_LICENSE_KEY=<key>	sua chave WunderUI Pro — desbloqueia habilidades Pro (get_skill) e código-fonte de blocos (get_block_source); enviada apenas para wunderui.com

Sem MCP

Os mesmos dados são servidos como arquivos estáticos para agentes e editores que não falam MCP:

• https://wunderui.com/DESIGN.md: cole no topo de um prompt
• https://wunderui.com/llms.txt: a convenção llms.txt
• https://wunderui.com/design.json: o mesmo índice estruturado

Verificação

npm install
npm run smoke

Inicia o servidor com um cliente MCP real e chama cada ferramenta uma vez.

Licença

O código do servidor é MIT. Os componentes WunderUI que ele descreve são licenciados por plano, veja wunderui.com/pricing.