MCP-server

Configureer de Neobrutalism-MCP-server zodat je AI-editor componenten op naam kan toevoegen.

Met de Model Context Protocol-(MCP)-server haal je Neobrutalism-componenten rechtstreeks in je AI-ondersteunde workflow. Voeg componenten toe via natuurlijketaalcommando's in Claude, Cursor, VS Code en andere MCP-compatibele editors — zonder URL's te kopiëren en plakken.

Hij draait op de shadcn-CLI, gericht op de Neobrutalism-registry. Zie voor achtergrondinformatie de shadcn-MCP-documentatie.

Automatische configuratie

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

Handmatige configuratie

Installeer eerst shadcn als dev-afhankelijkheid:


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

Configureer vervolgens de MCP-server voor je editor.

Claude Code

Voeg het volgende toe aan je .mcp.json:

.mcp.json

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

Cursor

Voeg het volgende toe aan je .cursor/mcp.json:

.cursor/mcp.json

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

VS Code

Voeg het volgende toe aan je .vscode/mcp.json:

.vscode/mcp.json

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

Zorg dat de Neobrutalism-registry is geconfigureerd in je components.json (zie Installatie), zodat de server @neobrutalism-componenten kan herleiden.

Gebruik

Gebruik na de configuratie natuurlijke taal in je editor om Neobrutalism-componenten toe te voegen:

→ „Voeg een neobrutalism-button-component toe”
→ „Installeer de accordion van @neobrutalism”
→ „Voeg de card-component toe met de neobrutalistische stijl”

De MCP-server installeert de componenten met de juiste configuratie voor het designsysteem van Neobrutalism.