shadcn/ui MCP Server — インストール & ライブデモ

なぜ使うのか

主な機能

shadcn/uiレジストリからコンポーネントソースをリアルタイム取得
マルチフレームワーク対応：React・Vue・Svelte 5・React Native
コンポーネントの依存関係グラフ（例：DialogにはPortalが必要）
パッケージマネージャーごとのインストールコマンド（npm/pnpm/yarn/bun）
コアコンポーネントだけでなくサンプルとデモソースも含む
Blockテンプレート（認証ページ・ダッシュボード）も含む

ライブデモ

実際の動作

shadcn-ui-mcp.replay ▶ 準備完了

0/0

インストール

クライアントを選択

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

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

Claude Desktop → Settings → Developer → Edit Config を開く。保存後、アプリを再起動。

~/.cursor/mcp.json · .cursor/mcp.json

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

Cursor は Claude Desktop と同じ mcpServers スキーマを使用。プロジェクト設定はグローバルより優先。

VS Code → Cline → MCP Servers → Edit

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

Cline サイドバーの MCP Servers アイコンをクリックし、"Edit Configuration" を選択。

~/.codeium/windsurf/mcp_config.json

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

Claude Desktop と同じ形式。Windsurf を再起動して反映。

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "shadcn-ui-mcp",
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server"
      ]
    }
  ]
}

Continue はマップではなくサーバーオブジェクトの配列を使用。

~/.config/zed/settings.json

{
  "context_servers": {
    "shadcn-ui-mcp": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "@jpisnice/shadcn-ui-mcp-server"
        ]
      }
    }
  }
}

context_servers に追加。保存時に Zed がホットリロード。

claude mcp add shadcn-ui-mcp -- npx -y @jpisnice/shadcn-ui-mcp-server

ワンライナー。claude mcp list で確認、claude mcp remove で削除。

ユースケース

実用的な使い方： shadcn/ui MCP Server

APIドリフトなしにshadcn/ui Formをスキャフォールドする

👤 React/Nextアプリを構築するフロントエンド開発者 ⏱ ~20 min intermediate

使うタイミング： Form + react-hook-form + Zodが欲しいが、Claudeが古いshadcnのimportを使い続けている場合。

前提条件

shadcn/uiを初期化したNext.js / Viteアプリ — npx shadcn@latest init

フロー

現在のFormソースを取得

shadcn-ui MCP: get the current source for form (React) plus its dependencies. Show me the install command.✓ コピーしました

→ 最新のソースが返される；依存関係にreact-hook-form・zodが含まれる
フォームを構築

Now build a SignupForm using these exact APIs. Email + password + terms checkbox; Zod schema with validation messages. No invented imports.✓ コピーしました

→ 現在のshadcnバージョンに対してコンポーネントがコンパイルされる
検証

Run tsc --noEmit and report any unresolved imports.✓ コピーしました

→ クリーンなTSチェック

結果： 現在のshadcn/ui APIに対して動作するForm — import { ... } from '@/components/ui/old-name' のミスなし。

注意点

プロジェクトが古いshadcnバージョンを使用している — --registry でピン留めするか、アップグレードを受け入れて shadcn upgrade を実行する

組み合わせ： filesystem

shadcn Blockを取り込む（認証・ダッシュボード）

👤 事前に作られたレイアウトが必要な開発者 ⏱ ~15 min beginner

使うタイミング： 単一コンポーネントではなく、完全なログインページやダッシュボードレイアウトが必要な場合。

フロー

Blockを閲覧

shadcn-ui: list available blocks. I want a sidebar dashboard layout.✓ コピーしました

→ 名前＋プレビュー付きのBlock一覧
取得してカスタマイズ

Pull the source for sidebar-07. Adapt it to my routes — replace the demo links with /dashboard, /clients, /settings.✓ コピーしました

→ Blockコードが返される；自分のパスに置き換えられる

結果： 10分以内に動作するダッシュボードレイアウト、アプリにカスタマイズ済み。

注意点

インストールされていないコンポーネントにBlockが依存している — MCPが依存関係リストを返す；不足しているものを先にインストールする

組み合わせ： filesystem

ReactアプリのshadcnをSvelteに移植する

👤 フレームワークを移行する開発者 ⏱ ~30 min advanced

使うタイミング： NextからSvelteKitへ移行中でshadcn-svelteの相当物が欲しい場合。

フロー

コンポーネントをマッピング

List the components my app imports from @/components/ui. For each, get the Svelte 5 equivalent from shadcn-ui MCP.✓ コピーしました

→ API差異のメモ付きのコンポーネントごとのマッピング
1つのサンプルを変換

Translate this React Form usage to the Svelte version using the actual current API.✓ コピーしました

→ 慣用的なSvelte 5コード

結果： チームが参照できる移行計画＋リファレンス翻訳。

注意点

SvelteポートにないコンポーネントもSvelteポートにはまだ存在しないものがある — MCPが「見つからない」と返す；それらは手動移植としてフラグを立てる

組み合わせ

他のMCPと組み合わせて10倍の力を

shadcn-ui-mcp + filesystem

コンポーネントをリポジトリに直接生成する

shadcn: get Form. Filesystem: write the code into src/components/SignupForm.tsx with my schema.✓ コピーしました

shadcn-ui-mcp + github

現在のshadcn APIを使ったUIリファクタのPRを作成する

Pull the current Dialog API. Refactor src/components/Modal.tsx to match. Open a PR.✓ コピーしました

ツール

このMCPが提供する機能

ツール	入力	呼び出すタイミング	コスト
list_components	framework?: react\|vue\|svelte\|react-native	ディスカバリ	1 fetch
get_component	name: str, framework?: str	コードを書く前	1 fetch
get_component_demo	name: str, framework?: str	実際の使用例を確認	1 fetch
list_blocks	framework?: str	事前に作られたレイアウトを探す	1 fetch
get_block	name: str	レイアウトを取り込む	1 fetch

コストと制限

運用コスト

APIクォータ: GitHub rawフェッチ（未認証時60回/時、認証時5000回/時）
呼び出しあたりのトークン: 300〜4000（コンポーネントソースは大きい場合あり）
金額: OSS無料
ヒント: 60回/時の制限を避けるためGITHUB_PERSONAL_ACCESS_TOKENを渡す

セキュリティ

権限、シークレット、影響範囲

認証情報の保管： レート制限を引き上げるためのオプションGitHub token

データ送信先： github.com（rawとapi）

絶対に付与しない： repo:write

MCPは公開コードのみを取得する — filesystemと組み合わせない限りリポジトリへの書き込みは行わない

トラブルシューティング

よくあるエラーと対処法

Rate limit exceeded

GITHUB_PERSONAL_ACCESS_TOKEN環境変数を設定する

Component not found in framework

Vue/SvelteポートはReactより遅れる；そのフレームワーク向けにlist_componentsで確認

Returned source uses different API than my project

プロジェクトが古いshadcnを使用；アップグレードするか古いレジストリバージョンにピン留めする

代替案

shadcn/ui MCP Server 他との比較

代替案	代わりに使う場面	トレードオフ
Magic MCP (21st Dev)	shadcnだけでなく広範なUI生成が欲しい場合	より意見が強い；重い
Component MCP (custom registry)	社内デザインシステムがある場合	自分で構築が必要

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

🔍 400以上のMCPサーバーとSkillsを見る