Serveur MCP

Configurez le serveur MCP de Neobrutalism pour que votre éditeur IA ajoute les composants par leur nom.

Le serveur Model Context Protocol (MCP) vous permet d’intégrer les composants Neobrutalism directement dans votre flux de travail assisté par l’IA. Ajoutez des composants par des commandes en langage naturel dans Claude, Cursor, VS Code et les autres éditeurs compatibles MCP — sans copier-coller d’URL.

Il s’appuie sur la CLI shadcn, pointée vers le registre Neobrutalism. Pour le contexte, consultez la documentation MCP de shadcn.

Configuration automatique

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

Configuration manuelle

Commencez par installer shadcn en tant que dépendance de développement :


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

Configurez ensuite le serveur MCP pour votre éditeur.

Claude Code

Ajoutez ceci à votre .mcp.json :

.mcp.json

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

Cursor

Ajoutez ceci à votre .cursor/mcp.json :

.cursor/mcp.json

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

VS Code

Ajoutez ceci à votre .vscode/mcp.json :

.vscode/mcp.json

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

Assurez-vous que le registre Neobrutalism est bien configuré dans votre components.json (voir Installation) pour que le serveur puisse résoudre les composants @neobrutalism.

Utilisation

Une fois la configuration faite, utilisez le langage naturel dans votre éditeur pour ajouter des composants Neobrutalism :

→ « Ajoute un composant neobrutalism button »
→ « Installe l’accordion depuis @neobrutalism »
→ « Ajoute le composant card avec le style néobrutaliste »

Le serveur MCP installe les composants avec la configuration adaptée au système de conception de Neobrutalism.