Servidor MCP

Configure o servidor MCP do Neobrutalism para que o seu editor com IA possa adicionar componentes pelo nome.

O servidor Model Context Protocol (MCP) permite que você incorpore componentes do Neobrutalism diretamente no seu fluxo de trabalho assistido por IA. Adicione componentes por meio de comandos em linguagem natural no Claude, Cursor, VS Code e outros editores compatíveis com MCP, sem copiar e colar URLs.

Funciona sobre a CLI do shadcn, apontando para o registro do Neobrutalism. Para mais contexto, consulte a documentação de MCP do shadcn.

Configuração automática

Claude Code


pnpm dlx shadcn@latest mcp init --client claude
npx shadcn@latest mcp init --client claude
yarn dlx shadcn@latest mcp init --client claude
bunx --bun shadcn@latest mcp init --client claude

Cursor


pnpm dlx shadcn@latest mcp init --client cursor
npx shadcn@latest mcp init --client cursor
yarn dlx shadcn@latest mcp init --client cursor
bunx --bun shadcn@latest mcp init --client cursor

VS Code


pnpm dlx shadcn@latest mcp init --client vscode
npx shadcn@latest mcp init --client vscode
yarn dlx shadcn@latest mcp init --client vscode
bunx --bun shadcn@latest mcp init --client vscode

Configuração manual

Primeiro, instale o shadcn como dependência de desenvolvimento:


pnpm add -D shadcn@latest
npm install -D shadcn@latest
yarn add -D shadcn@latest
bun add -D shadcn@latest

Depois configure o servidor MCP para o seu editor.

Claude Code

Adicione o seguinte ao seu .mcp.json:

.mcp.json

{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": ["shadcn@latest", "mcp"]
    }
  }
}

Cursor

Adicione o seguinte ao seu .cursor/mcp.json:

.cursor/mcp.json

{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": ["shadcn@latest", "mcp"]
    }
  }
}

VS Code

Adicione o seguinte ao seu .vscode/mcp.json:

.vscode/mcp.json

{
  "servers": {
    "shadcn": {
      "command": "npx",
      "args": ["shadcn@latest", "mcp"]
    }
  }
}

Certifique-se de que o registro do Neobrutalism esteja configurado no seu components.json (consulte Instalação) para que o servidor possa resolver os componentes @neobrutalism.

Uso

Uma vez configurado, use linguagem natural no seu editor para adicionar componentes do Neobrutalism:

→ "Adicione um componente button do neobrutalism"
→ "Instale o accordion do @neobrutalism"
→ "Adicione o componente card com o estilo neobrutalista"

O servidor MCP instala os componentes com a configuração correta para o sistema de design do Neobrutalism.