MCP-Server

Konfiguriere den Neobrutalism-MCP-Server, damit dein KI-Editor Komponenten über ihren Namen hinzufügen kann.

Der Model-Context-Protocol-(MCP)-Server lässt dich Neobrutalism-Komponenten direkt in deinen KI-gestützten Workflow holen. Füge Komponenten über Befehle in natürlicher Sprache in Claude, Cursor, VS Code und anderen MCP-fähigen Editoren hinzu – ohne URLs zu kopieren.

Er läuft auf der shadcn-CLI, die auf die Neobrutalism-Registry ausgerichtet ist. Hintergrundinfos findest du in der shadcn-MCP-Dokumentation.

Automatische Konfiguration

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

Manuelle Konfiguration

Installiere zunächst shadcn als Dev-Abhängigkeit:


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

Konfiguriere dann den MCP-Server für deinen Editor.

Claude Code

Füge Folgendes zu deiner .mcp.json hinzu:

.mcp.json

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

Cursor

Füge Folgendes zu deiner .cursor/mcp.json hinzu:

.cursor/mcp.json

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

VS Code

Füge Folgendes zu deiner .vscode/mcp.json hinzu:

.vscode/mcp.json

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

Stelle sicher, dass die Neobrutalism-Registry in deiner components.json konfiguriert ist (siehe Installation), damit der Server @neobrutalism-Komponenten auflösen kann.

Verwendung

Sobald alles konfiguriert ist, verwende natürliche Sprache in deinem Editor, um Neobrutalism-Komponenten hinzuzufügen:

→ „Füge eine neobrutalism-button-Komponente hinzu"
→ „Installiere das accordion von @neobrutalism"
→ „Füge die card-Komponente im neobrutalistischen Stil hinzu"

Der MCP-Server installiert die Komponenten mit der richtigen Konfiguration für das Designsystem von Neobrutalism.