125k

MCP サーバー

PreviousNext

shadcn MCP サーバーを使用して、レジストリからコンポーネントを参照、検索、インストールします。

shadcn MCP サーバーを使用すると、AI アシスタントがレジストリのアイテムと対話できるようになります。自然言語を使用して、利用可能なコンポーネントを参照し、特定のコンポーネントを検索し、プロジェクトに直接インストールできます。

たとえば、AI アシスタントに「acme レジストリのコンポーネントを使用してランディング ページを構築してください」または「shadcn レジストリからログイン フォームを見つけてください」と依頼できます。

レジストリはプロジェクトの components.json ファイルで構成されます。

components.json
{
  "registries": {
    "@acme": "https://acme.com/r/{name}.json"
  }
}

クイックスタート

MCP クライアントを選択し、指示に従って shadcn MCP サーバーを構成します。手動で行う場合は、構成 セクションを参照してください。

プロジェクトで次のコマンドを実行します。

pnpm dlx shadcn@latest mcp init --client claude

Claude Code を再起動し、次のプロンプトを試します。

  • shadcn レジストリで利用可能なすべてのコンポーネントを表示して
  • button、dialog、card コンポーネントをプロジェクトに追加して
  • shadcn レジストリのコンポーネントを使って問い合わせフォームを作成して

注: Claude Code の /mcp コマンドで MCP サーバーをデバッグできます。

MCP とは何ですか?

モデル コンテキスト プロトコル (MCP) は、AI アシスタントが外部のデータ ソースやツールに安全に接続できるようにするオープン プロトコルです。 shadcn MCP サーバーを使用すると、AI アシスタントは以下に直接アクセスできるようになります。

  • コンポーネントの参照 - 構成されたレジストリから使用可能なすべてのコンポーネント、ブロック、テンプレートをリストします。
  • レジストリ全体を検索 - 複数のソースから名前または機能で特定のコンポーネントを検索します
  • 自然言語を使用してインストール - 「ログイン フォームを追加する」などの単純な会話プロンプトを使用してコンポーネントを追加します
  • 複数のレジストリのサポート - パブリック レジストリ、プライベート企業ライブラリ、サードパーティ ソースにアクセス

仕組み

MCP サーバーは、AI アシスタント、コンポーネント レジストリ、shadcn CLI の間のブリッジとして機能します。

  1. レジストリ接続 - MCP は、構成されたレジストリ (shadcn/ui、プライベート レジストリ、サードパーティ ソース) に接続します。
  2. 自然言語 - 必要なことを平易な言葉で説明します
  3. AI 処理 - アシスタントがリクエストをレジストリ コマンドに変換します。
  4. コンポーネントの配信 - リソースが取得され、プロジェクトにインストールされます

サポートされているレジストリ

shadcn MCP サーバーは、追加設定なしで shadcn 互換のレジストリで動作します。

  • shadcn/ui レジストリ - すべての shadcn/ui コンポーネントを含むデフォルトのレジストリ
  • サードパーティ レジストリ - shadcn レジストリ仕様に従う任意のレジストリ
  • プライベート レジストリ - 会社の内部コンポーネント ライブラリ
  • 名前空間レジストリ - @namespace 構文で構成された複数のレジストリ

構成

任意の MCP クライアントを使用して、shadcn MCP サーバーと対話できます。ここでは、特に人気の高いクライアントの構成方法を紹介します。

Claude Code

Claude Code で shadcn MCP サーバーを使用するには、プロジェクトの .mcp.json ファイルに次の構成を追加します。

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

構成を追加した後、Claude Code を再起動し、/mcp を実行して、リストに shadcn MCP サーバーを表示します。 Connected が表示されていれば問題ありません。

詳細については、Claude Code MCP ドキュメント を参照してください。

Cursor

Cursor で MCP を構成するには、shadcn サーバーをプロジェクトの .cursor/mcp.json 構成ファイルに追加します。

.cursor/mcp.json
{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": ["shadcn@latest", "mcp"]
    }
  }
}

構成を追加した後、カーソル設定で shadcn MCP サーバーを有効にします。

有効にすると、MCP サーバー リストの shadcn サーバーの横に緑色の点と利用可能なツールのリストが表示されます。

詳細については、Cursor MCP ドキュメント を参照してください。

VS Code

GitHub Copilot を使用して VS Code で MCP を構成するには、shadcn サーバーをプロジェクトの .vscode/mcp.json 構成ファイルに追加します。

.vscode/mcp.json
{
  "servers": {
    "shadcn": {
      "command": "npx",
      "args": ["shadcn@latest", "mcp"]
    }
  }
}

構成を追加した後、.vscode/mcp.json を開き、shadcn サーバーの横にある Start をクリックします。

詳細については、VS Code MCP ドキュメント を参照してください。

Codex

Codex で MCP を構成するには、shadcn サーバーを ~/.codex/config.toml に追加します。

~/.codex/config.toml
[mcp_servers.shadcn]
command = "npx"
args = ["shadcn@latest", "mcp"]

構成を追加した後、Codex を再起動して MCP サーバーをロードします。

レジストリの構成

MCP サーバーは、プロジェクトの components.json 構成を通じて複数のレジストリをサポートします。これにより、プライベート レジストリやサードパーティ プロバイダーなどのさまざまなソースからコンポーネントにアクセスできるようになります。

components.json で追加のレジストリを構成します。

components.json
{
  "registries": {
    "@acme": "https://registry.acme.com/{name}.json",
    "@internal": {
      "url": "https://internal.company.com/{name}.json",
      "headers": {
        "Authorization": "Bearer ${REGISTRY_TOKEN}"
      }
    }
  }
}

認証

認証が必要なプライベート レジストリの場合は、.env.local で環境変数を設定します。

.env.local
REGISTRY_TOKEN=your_token_here
API_KEY=your_api_key_here

レジストリ認証の詳細については、認証ドキュメント を参照してください。

プロンプトの例

MCP サーバーが構成されたら、自然言語を使用してレジストリと対話できるようになります。次のプロンプトのいずれかを試してください。

参照と検索

  • shadcn レジストリ内の利用可能なコンポーネントをすべて表示して
  • shadcn レジストリからログイン フォームを見つけて

アイテムをインストールする

  • ボタンコンポーネントをプロジェクトに追加して
  • shadcn コンポーネントを使用してログイン フォームを作成して
  • acme レジストリから Cursor ルールをインストールして

名前空間の操作

  • acme レジストリのコンポーネントを表示して
  • @internal/auth-form をインストールして
  • acme レジストリのヒーロー、機能、お客様の声セクションを使用してランディング ページを作成して

トラブルシューティング

MCP が応答しない

MCP サーバーがプロンプトに応答しない場合:

  1. 構成の確認 - MCP サーバーが適切に構成され、MCP クライアントで有効になっていることを確認します。
  2. MCP クライアントの再起動 - 設定変更後に MCP クライアントを再起動します。
  3. インストールの確認 - shadcn がプロジェクトにインストールされていることを確認します
  4. ネットワークを確認 - 構成されたレジストリにアクセスできることを確認します

レジストリ アクセスの問題

コンポーネントがレジストリから読み込まれていない場合:

  1. components.json を確認します - レジストリ URL が正しいことを確認します
  2. テスト認証 - 環境変数がプライベート レジストリに設定されていることを確認します
  3. レジストリの確認 - レジストリがオンラインでアクセス可能であることを確認します。
  4. 名前空間の確認 - 名前空間の構文が正しいことを確認します (@namespace/component)

インストールの失敗

コンポーネントのインストールに失敗した場合:

  1. プロジェクト設定を確認 - 有効な components.json ファイルがあることを確認してください
  2. パスの確認 - ターゲット ディレクトリが存在することを確認します。
  3. 権限の確認 - コンポーネント ディレクトリへの書き込み権限を確認します。
  4. 依存関係の確認 - 必要な依存関係がインストールされていることを確認します

ツールもプロンプトもありません

No tools or prompts メッセージが表示された場合は、次のことを試してください。

  1. npx キャッシュをクリアします - npx clear-npx-cache を実行します
  2. MCP サーバーを再度有効にする - MCP クライアントで MCP サーバーを再度有効にしてみてください
  3. ログの確認 - Cursor の [表示] -> [出力] でログを確認し、ドロップダウンで MCP: project-* を選択します。

もっと詳しく知る