Server MCP

Konfigurasikan server MCP Neobrutalism agar editor AI Anda dapat menambahkan komponen berdasarkan namanya.

Server Model Context Protocol (MCP) memungkinkan Anda menarik komponen Neobrutalism langsung ke dalam alur kerja berbantuan AI Anda. Tambahkan komponen melalui perintah bahasa alami di Claude, Cursor, VS Code, dan editor lain yang mendukung MCP — tanpa menyalin-tempel URL.

Server ini berjalan di atas CLI shadcn, yang diarahkan ke registri Neobrutalism. Untuk konteks lebih lanjut, lihat dokumentasi MCP shadcn.

Konfigurasi Otomatis

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

Konfigurasi Manual

Pertama, instal shadcn sebagai dependensi dev:


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

Lalu konfigurasikan server MCP untuk editor Anda.

Claude Code

Tambahkan berikut ini ke .mcp.json Anda:

.mcp.json

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

Cursor

Tambahkan berikut ini ke .cursor/mcp.json Anda:

.cursor/mcp.json

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

VS Code

Tambahkan berikut ini ke .vscode/mcp.json Anda:

.vscode/mcp.json

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

Pastikan registri Neobrutalism dikonfigurasi di components.json Anda (lihat Instalasi) agar server dapat me-resolve komponen @neobrutalism.

Penggunaan

Setelah dikonfigurasi, gunakan bahasa alami di editor Anda untuk menambahkan komponen Neobrutalism:

→ "Tambahkan komponen button neobrutalism"
→ "Instal accordion dari @neobrutalism"
→ "Tambahkan komponen card dengan gaya neobrutalis"

Server MCP menginstal komponen dengan konfigurasi yang tepat untuk design system Neobrutalism.