shadcn MCP Server

概要

shadcn MCP Serverは、shadcn/uiのためのModel Context Protocol (MCP)の公式実装です 。AIアシスタントやエージェントがshadcn互換のコンポーネントレジストリに安全に接続し、利用可能なコンポーネントの閲覧、特定コンポーネントの検索、ソースコード・デモ・メタデータの取得、さらに自然言語の指示でプロジェクトへ直接インストールすることを可能にします。

これにより、最新のレジストリデータへライブかつ構造化されたアクセスを提供し、shadcn CLIと統合することで、古い情報や存在しないpropsを生成するなどのAI特有の問題を解消します。

特徴

• レジストリの閲覧と検索: AIは任意のshadcn互換レジストリからコンポーネント、ブロック、チャートを一覧表示・検索できます。
• 正確なデータ取得: 最新のTypeScriptソースコード、props/インターフェース、使用例、インストールコマンドを取得可能。
• 直接インストール: 統合されたCLIブリッジを通じて、shadcn addコマンドをAIに自動実行させることができます。
• フレームワーク非依存のレジストリ: ReactやTailwindベースのコンポーネントを含む、公式・カスタムを問わずあらゆるshadcnレジストリに対応。
• セキュアなローカル実行: ローカルサーバー（通常はnpxまたはインストール済みパッケージ）として動作し、認証設定が可能。
• IDEおよびツール統合: Cursor、Claude Desktop、ZedなどMCP対応ツールでネイティブサポート。

仕組み

1. MCPサーバーをインストール（通常はnpxまたはプロジェクト設定経由）。
2. components.jsonでレジストリを設定。
3. AIアシスタントをローカルMCPエンドポイントに接続。
4. 「shadcnのチャートで美しいダッシュボードを追加して」といった自然言語プロンプトを使用すると、AIがレジストリを検索し、コンポーネントを選択してインストールします。

ユースケース

• CursorやClaude CodeでのAI駆動UIプロトタイピング。
• 大規模コードベースでのコンポーネントインストールの自動化。
• あるエージェントがコンポーネントを調査し、別のエージェントがUIを構築するマルチエージェントワークフロー。
• エンタープライズ向けデザインシステムのカスタムレジストリ統合。

はじめに

公式ドキュメントを参照してください: https://ui.shadcn.com/docs/mcp

通常は以下で開始します:

npx shadcn@latest mcp

またはプロジェクトに設定し、対応するAIツールと併用します。

SvelteやVueなどのマルチフレームワーク対応のコミュニティフォークや拡張版も存在しますが、多くのユーザーにはshadcn/ui公式版が推奨されます。