Servidor MCP

Configura el servidor MCP de Neobrutalism para que tu editor con IA pueda añadir componentes por su nombre.

El servidor Model Context Protocol (MCP) te permite incorporar componentes de Neobrutalism directamente en tu flujo de trabajo asistido por IA. Añade componentes mediante comandos en lenguaje natural en Claude, Cursor, VS Code y otros editores compatibles con MCP, sin copiar y pegar URL.

Funciona sobre la CLI de shadcn, apuntando al registro de Neobrutalism. Para más contexto, consulta la documentación de MCP de shadcn.

Configuración 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

Configuración manual

Primero, instala shadcn como dependencia de desarrollo:


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

Después configura el servidor MCP para tu editor.

Claude Code

Añade lo siguiente a tu .mcp.json:

.mcp.json

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

Cursor

Añade lo siguiente a tu .cursor/mcp.json:

.cursor/mcp.json

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

VS Code

Añade lo siguiente a tu .vscode/mcp.json:

.vscode/mcp.json

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

Asegúrate de que el registro de Neobrutalism esté configurado en tu components.json (consulta Instalación) para que el servidor pueda resolver los componentes @neobrutalism.

Uso

Una vez configurado, usa lenguaje natural en tu editor para añadir componentes de Neobrutalism:

→ «Añade un componente button de neobrutalism»
→ «Instala el accordion desde @neobrutalism»
→ «Añade el componente card con el estilo neobrutalista»

El servidor MCP instala los componentes con la configuración correcta para el sistema de diseño de Neobrutalism.