shadcn/ui MCP Server

shadcn/ui MCP Server とは？

shadcn/ui MCP Server は、shadcn/ui v4 コンポーネントのソースコード、デモ、ブロック、メタデータを AI アシスタントに提供するコミュニティ製の shadcn MCP サーバーで、Svelte・Vue・React Native への移植版にも対応しています。Janardhan Polle（Jpisnice）による非公式のオープンソースプロジェクトで、MIT ライセンスです。

このサーバーは上流の GitHub リポジトリからコンポーネントのコードを読み込むため、AI アシスタントは学習データから推測するのではなく、実際の最新の shadcn ui MCP ソースに基づいて UI を書けます。デフォルトでは stdio でローカル実行され、複数クライアント向けに Streamable HTTP で提供することもできます。

shadcn/ui MCP Server の使い方

Node.js 20 以上が必要です。GitHub の Personal Access Token は任意ですが推奨されます。トークンなしでは GitHub API へのリクエストは 1 時間あたり 60 回、トークンありでは 5,000 回に制限されます。トークンにスコープは不要です。https://github.com/settings/tokens で作成し、--github-api-key または環境変数 GITHUB_PERSONAL_ACCESS_TOKEN で渡します。

npx で直接実行します。

npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_your_token_here

# Other frameworks
npx @jpisnice/shadcn-ui-mcp-server --framework svelte
npx @jpisnice/shadcn-ui-mcp-server --framework vue
npx @jpisnice/shadcn-ui-mcp-server --framework react-native

# Base UI instead of Radix (React only)
npx @jpisnice/shadcn-ui-mcp-server --ui-library base

Claude Code

claude mcp add shadcn -- bunx -y @jpisnice/shadcn-ui-mcp-server --github-api-key YOUR_TOKEN

HTTP モードで動作しているサーバーに接続する場合：

node build/index.js --mode http --port 7423
claude mcp add --scope user --transport http shadcn-mcp-server http://localhost:7423/mcp

Claude Desktop

プロジェクトの GitHub Releases から shadcn-ui-mcp-server.mcpb をダウンロードしてダブルクリックするか、claude_desktop_config.json に次を追加します。

{
  "mcpServers": {
    "shadcn-ui": {
      "command": "npx",
      "args": ["@jpisnice/shadcn-ui-mcp-server"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_your_token_here"
      }
    }
  }
}

Cursor

Cursor の設定を開き、MCP を検索して次を追加します。

{
  "mcpServers": {
    "shadcn-ui": {
      "command": "npx",
      "args": [
        "@jpisnice/shadcn-ui-mcp-server",
        "--github-api-key",
        "ghp_your_token_here"
      ]
    }
  }
}

VS Code

「MCP: Add Server...」を実行し、「NPM Package」を選んで @jpisnice/shadcn-ui-mcp-server を入力します。生成される mcp.json は次のようになります（Copilot Chat で利用可能）。

{
  "servers": {
    "shadcn-ui-mcp-server": {
      "command": "npx",
      "args": ["@jpisnice/shadcn-ui-mcp-server", "--framework", "react", "--ui-library", "radix"],
      "env": { "GITHUB_PERSONAL_ACCESS_TOKEN": "${input:github_token}" },
      "type": "stdio"
    }
  },
  "inputs": [
    { "id": "github_token", "type": "promptString", "description": "GitHub Personal Access Token" }
  ]
}

shadcn/ui MCP Server の主な機能

• 4 つのフレームワークに対応：React（shadcn/ui v4、デフォルト）、Svelte（shadcn-svelte）、Vue（shadcn-vue）、React Native（react-native-reusables）。--framework で選択します。
• React では --ui-library または UI_LIBRARY で Radix UI と Base UI のプリミティブを切り替え可能。
• コンポーネントのソースコード、デモコード、依存関係などのメタデータを取得。
• dashboard-01 や calendar-01 などのブロックの完全な実装を取得。
• tweakcn のテーマプリセットを一覧・参照・適用。
• GitHub API 呼び出しのキャッシュとレート制限への対応。
• トランスポート：stdio（デフォルト）、http（/mcp でのステートレスな Streamable HTTP、デフォルトポート 7423）、dual。Docker と Docker Compose のファイルを同梱。
• Claude Desktop 向けのワンクリック .mcpb インストール。

shadcn/ui MCP Server のツール

• コンポーネント系ツール： list_components は利用可能な全コンポーネントを返し、get_component はコンポーネントのソース、get_component_demo は使用例、get_component_metadata は依存関係と説明を返します。
• ブロック系ツール： list_blocks はカテゴリ別にブロックを一覧し、get_block は dashboard-01 などのブロックの完全なコードを返します。
• リポジトリ系ツール： get_directory_structure で上流リポジトリのディレクトリ構成を参照できます。
• テーマ系ツール： list_themes と get_theme は tweakcn テーマを読み取り、apply_theme はテーマプリセットの CSS をプロジェクトに書き込みます（dryRun オプション対応）。

shadcn/ui MCP Server のユースケース

• 実際のコンポーネントで機能を作る：「Get the card component with usage examples and build a pricing card.」（card コンポーネントと使用例を取得して料金カードを作る）
• ブロックからページを作る：「Get the dashboard-01 block implementation and adapt it to my analytics data.」（dashboard-01 ブロックの実装を取得して分析データに合わせる）
• コンポーネントの探索：「List all available shadcn/ui components and suggest which to use for a settings page.」（利用可能な shadcn/ui コンポーネントを一覧し、設定ページに適したものを提案する）
• フレームワーク横断の作業：「Compare the button component between React and Svelte」（React と Svelte の button を比較）や「Show me the Vue version of the card component」（card の Vue 版を表示）。
• テーマ設定：CSS を書き込む前に、apply_theme の dry-run モードで tweakcn プリセットをプレビュー。
• チームでの利用：Docker で HTTP インスタンスを 1 つ動かし、複数のクライアントから /mcp に接続。

shadcn/ui MCP Server と代替ツールの比較

shadcn は CLI の一部として公式の shadcn MCP サーバーを提供しています（ドキュメント）。こちらはレジストリに特化しており、components.json に設定したレジストリのアイテムを閲覧・検索・インストールできます。セットアップは npx shadcn@latest mcp init --client claude（cursor、vscode、codex、opencode にも対応）です。レジストリのコンポーネントをプロジェクトにインストールすることが主な目的なら公式サーバーを、コンポーネントやブロックの生のソース、デモ、tweakcn テーマ、または Svelte・Vue・React Native 版が必要ならこのコミュニティ版 shadcn mcp server を選びましょう。両方を併用することもできます。

shadcn/ui MCP Server のトラブルシューティング

• レート制限エラー： --github-api-key または GITHUB_PERSONAL_ACCESS_TOKEN で GitHub トークンを追加すると、上限が 1 時間あたり 60 回から 5,000 回に上がります。
• サーバーが起動しない： node --version（3.0.0 以降は 20 以上が必要）と npx --version を確認します。
• フレームワークが違う： 起動ログに有効なフレームワークが表示されます（例：INFO: MCP Server configured for SVELTE framework）。ログは stderr に出力されるため、クライアントの MCP ログを確認してください。
• /sse で 404： 旧 SSE トランスポートは削除されました。http トランスポートで http://<host>:7423/mcp に接続します。
• -32022 Unsupported protocol version： クライアントが 2025 年版のプロトコルを使い、サーバーが --protocol modern で動作しています。--protocol any（デフォルト）を使用してください。