Few-shot prompting タイプのMCPです。
Shadcn/uiの複数の組み合わせを事前に用意しておきそれをAIに読み込ませます。
つまり、サンプルを用意してモデルに高い理解力を与えてより高い性能に導く文脈学習をさせるMCPです。
ブロック
ここでは shadcn/uiのコンポーネントを複数同時に使ったものをそう呼んでいます。
ブロックを組み合わせて作ってあるログイン画面、ダッシュボード、プロフィール、プロダクトのサンプルが用意されています。
Githubでの公開場所
Jpisnice/shadcn-ui-mcp-server: A mcp server to allow LLMS gain context about shadcn ui component structure,usage and installation
参考動画
Shadcnはもはや単なるライブラリではありません…UIを10倍にする方法をご紹介します - YouTube
設定画面
{
"servers": {
"shadcn-ui": {
"command": "npx",
"args": [
"@jpisnice/shadcn-ui-mcp-server",
"--github-api-key",
"[ghp_github-api-key]"
]
},
...
👇️AI作成Blog記事
AI開発を加速！Shadcn UI v4 MCP Server徹底解説
AIアシスタントを活用した開発が注目される中、UIコンポーネントへのアクセスを効率化するツールが登場しました。それが「Shadcn UI v4 MCP Server」です。この記事では、このサーバーがどのようなもので、どのようにAI開発を助けるのか、その機能と使い方を詳しく解説します。
Shadcn UI v4 MCP Serverとは？
Shadcn UI v4 MCP Serverは、AIアシスタントにshadcn/ui v4のコンポーネント、ブロック、デモ、メタデータへの包括的なアクセスを提供するModel Context Protocol (MCP) サーバーです。これにより、Claude Desktop、Continue.dev、VS Code、CursorなどのMCP互換クライアントといったAIツールが、shadcn/uiの要素をシームレスに取得し、作業できるようになります。
主要な機能
このMCPサーバーは、AIアシスタントがUI開発を行う上で非常に役立つ複数の機能を提供します。
- コンポーネントのソースコード: 最新のshadcn/ui v4コンポーネントのTypeScriptソースコードを取得できます。
- コンポーネントのデモ: 例となる実装や使用パターンにアクセスできます。
- ブロックのサポート: ダッシュボード、カレンダー、ログインフォームなどの完全なブロック実装を取得できます。
- メタデータへのアクセス: コンポーネントの依存関係、説明、設定の詳細を取得できます。
- ディレクトリブラウジング: shadcn/uiリポジトリの構造を探索できます。
- GitHub API統合: 効率的なキャッシュとインテリジェントなレートリミット処理により、大量のリクエストにも対応します。
- フレームワークサポート: React (shadcn/ui) とSvelte (shadcn-svelte) の両方の実装を切り替えることができます。
クイックスタートと基本的な使い方
Shadcn UI v4 MCP Serverの利用は非常に簡単です。npxを使うのが最も推奨される方法です。
# 基本的な使い方 (1時間あたり60リクエストに制限)
npx @jpisnice/shadcn-ui-mcp-server
GitHub APIトークンの活用
GitHub APIトークンを使用することで、レートリミットが大幅に緩和されます（1時間あたり5,000リクエスト）。これにより、より安定した高速なレスポンスが期待できます。
トークンの取得方法（約2分）:
- GitHubの設定から「Developer settings」→「Personal access tokens」→「Tokens (classic)」へ移動します。
- 「Generate new token (classic)」をクリックします。
- メモを追加し、有効期限を選択します（90日推奨）。
- スコープは不要です（パブリックリポジトリへのアクセスで十分です）。
- 生成されたトークン（
ghp_で始まる）をコピーし、安全に保存してください。
トークンの使い方:
-
コマンドラインで直接指定:
npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_your_token_here # 短縮形 npx @jpisnice/shadcn-ui-mcp-server -g ghp_your_token_here -
環境変数として設定（推奨）:
export GITHUB_PERSONAL_ACCESS_TOKEN=ghp_your_token_here npx @jpisnice/shadcn-ui-mcp-server
フレームワークの切り替え
このサーバーはReact (shadcn-ui/ui) とSvelte (huntabyte/shadcn-svelte) の両方をサポートしており、デフォルトはReactです。
-
コマンドライン引数で切り替え（推奨）:
# Svelteに切り替え npx @jpisnice/shadcn-ui-mcp-server --framework svelte npx @jpisnice/shadcn-ui-mcp-server -f svelte # Reactに戻す npx @jpisnice/shadcn-ui-mcp-server --framework react -
環境変数で切り替え:
export FRAMEWORK=svelte npx @jpisnice/shadcn-ui-mcp-server
サーバーは、どのフレームワークが使用されているかをログに表示します。
主要なエディターとの連携
Shadcn UI v4 MCP Serverは、さまざまなAIツールやエディターと連携して、開発フローに組み込むことができます。
- VS Code: Continue ExtensionまたはClaude Extensionを通じて統合可能です.
-
Cursor: グローバル設定またはワークスペースごとの
.cursorrulesファイルを通じて設定できます. -
Claude Desktop: 設定ファイル（
~/.config/Claude/claude_desktop_config.json）にサーバー設定を追加します. - Continue.dev: アプリケーションの設定でMCPサーバーを追加します.
これらの統合により、AIアシスタントはShadcn UIのコンポーネントやブロックに直接アクセスし、コード生成やサポートを行うことができます。
AIアシスタントによる使用例
MCPサーバーが提供する「ツール」を通じて、AIアシスタントは以下のような操作を実行できます。
-
コンポーネントのソースコードの取得:
AIアシスタントに「shadcn/uiのbuttonコンポーネントのソースコードを見せてください」と依頼すると、AIはget_componentツールを使用して完全なTypeScriptソースコードを取得できます。 -
ダッシュボードの作成:
「shadcn/uiコンポーネントを使ってダッシュボードを作成してください。dashboard-01ブロックを参考にしてください」と依頼すると、AIはget_blockツールでブロック実装を取得し、カスタマイズできます。 -
ログインフォームの構築:
「shadcn/uiコンポーネントを使ってログインフォームを構築するのを手伝ってください。利用可能なフォームコンポーネントを見せてください」と依頼すると、AIはlist_componentsツールでコンポーネントを一覧表示し、フォーム構築をサポートします。
利用可能なツール
MCPサーバーは、AIアシスタントが利用できる以下のツールを提供しています:
-
コンポーネントツール:
-
get_component- コンポーネントのソースコードを取得 -
get_component_demo- コンポーネントの使用例を取得 -
list_components- 利用可能なすべてのコンポーネントをリスト表示 -
get_component_metadata- コンポーネントの依存関係や情報を取得
-
-
ブロックツール:
-
get_block- 完全なブロック実装（例:dashboard-01）を取得 -
list_blocks- カテゴリ付きで利用可能なすべてのブロックをリスト表示
-
-
リポジトリツール:
-
get_directory_structure- shadcn/uiリポジトリの構造を探索
-
トラブルシューティングのヒント
よくある問題としては「Rate limit exceeded」エラーがありますが、これはGitHub APIトークンを使用することで解決できます。また、「Command not found」エラーの場合は、Node.js 18+がインストールされ、npxが利用可能であることを確認してください。
まとめ
Shadcn UI v4 MCP Serverは、AIアシスタントを活用したUI開発を強力に支援するツールです。豊富な機能と主要な開発環境とのシームレスな統合により、開発者はより迅速かつ効率的に高品質なUIを構築できるようになります。ReactとSvelteの両方をサポートしている点も大きな利点であり、これからのAIアシスタントによるUI開発の標準となる可能性を秘めています。