shadcn/ui MCP Server
shadcn/ui MCPサーバーでClaude連携・コンポーネントソースとデモ取得を自動化
npx @jpisnice/shadcn-ui-mcp-server react概要
shadcn/ui MCP Serverの設定方法と使い方。
UIコンポーネントライブラリ「shadcn/ui v4」をClaudeから操作できるMCPサーバー。
コンポーネントソースコード・デモ・ブロック（ダッシュボード/カレンダー/フォーム等）・依存関係・メタデータの取得が可能。
Claudeとshadcn/uiのMCPサーバー連携により、コンポーネントを書き起こす作業を自動化できる。
React・Svelte・Vue・React Nativeに対応する。
設定方法はclaude_desktop_configに@jpisnice/shadcn-ui-mcp-serverを登録するだけでシンプルに完結する。
料金・APIキー情報
料金
完全無料APIキー
🔓 不要✅このMCPはAPIキー不要です。別途セットアップが必要な場合があります（上記参照）。
こんな使い方ができます
ClaudeからButtonやDialogなどshadcn/uiコンポーネントのソースを取得して貼り付けられる
ダッシュボードやフォームなどのブロックを丸ごと取得して画面の足場を素早く組める
Svelte版・Vue版・React Native版（react-native-reusables）の同等コンポーネントを取得できる
コンポーネントの依存関係や設定メタデータをClaudeから問い合わせられる
セットアップ手順
- 1
Node.js環境（npx利用可）が用意されていることを確認する
- 2
GitHubトークンは任意（無くても1時間60リクエストまで動作。トークンがあれば1時間5000リクエストに緩和される）
- 3
ターミナルで以下を実行してClaude Codeに追加する：claude mcp add shadcn-ui -- npx -y @jpisnice/shadcn-ui-mcp-server --framework react
- 4
Svelte/Vue/React Nativeを使う場合は --framework の値を svelte / vue / react-native に変更する
設定ファイル
コピー前に確認
Node.js環境（npx利用可）が必須。GitHub Personal Access Tokenは任意（無認証は1時間60リクエスト・トークンありは5000リクエスト）。React以外のフレームワーク（Svelte/Vue/React Native）を使う場合は起動時に --framework オプションで切り替える。
claude mcp add shadcn-ui -e GITHUB_PERSONAL_ACCESS_TOKEN=your-github-token-optional -- npx -y @jpisnice/shadcn-ui-mcp-server --framework react注意事項
shadcn/ui v4のソースコードをGitHub経由で取得する仕組み。React Nativeはreact-native-reusables実装が利用される。React版ではUIライブラリをRadixかBaseで切り替える UI_LIBRARY 環境変数も用意されている。Claude Desktop向けにはワンクリックで導入できる .mcpb ファイルも公式提供されている。