MCPサーバー

AIエディタが名前を指定してコンポーネントを追加できるように、NeobrutalismのMCPサーバーを設定します。

Model Context Protocol (MCP) サーバーを使うと、NeobrutalismのコンポーネントをAI支援のワークフローに直接取り込めます。Claude、Cursor、VS Code、その他のMCP対応エディタで、自然言語のコマンドからコンポーネントを追加できます。URLをコピー＆ペーストする必要はありません。

これはNeobrutalismレジストリに向けたshadcn CLI上で動作します。背景についてはshadcnのMCPドキュメントをご覧ください。

自動設定

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

手動設定

まず、shadcnを開発依存としてインストールします。


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

次に、お使いのエディタ向けにMCPサーバーを設定します。

Claude Code

次の内容を.mcp.jsonに追加します。

.mcp.json

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

Cursor

次の内容を.cursor/mcp.jsonに追加します。

.cursor/mcp.json

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

VS Code

次の内容を.vscode/mcp.jsonに追加します。

.vscode/mcp.json

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

サーバーが@neobrutalismのコンポーネントを解決できるように、Neobrutalismレジストリがcomponents.jsonに設定されていることを確認してください（インストールを参照）。

使い方

設定が済んだら、エディタで自然言語を使ってNeobrutalismのコンポーネントを追加します。

→ 「neobrutalism の button コンポーネントを追加して」
→ 「@neobrutalism から accordion をインストールして」
→ 「ネオブルータリズムのスタイルで card コンポーネントを追加して」

MCPサーバーは、Neobrutalismのデザインシステムに合った正しい設定でコンポーネントをインストールします。