shadcn MCP Server
AIアシスタントが自然言語を使ってレジストリからshadcn/uiコンポーネントを直接閲覧・検索・インストールできる公式MCPサーバーで、ハルシネーションのないAI駆動UI開発を実現します。
概要
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対応ツールでネイティブサポート。
仕組み
- MCPサーバーをインストール（通常はnpxまたはプロジェクト設定経由）。
components.jsonでレジストリを設定。- AIアシスタントをローカルMCPエンドポイントに接続。
- 「shadcnのチャートで美しいダッシュボードを追加して」といった自然言語プロンプトを使用すると、AIがレジストリを検索し、コンポーネントを選択してインストールします。
ユースケース
- CursorやClaude CodeでのAI駆動UIプロトタイピング。
- 大規模コードベースでのコンポーネントインストールの自動化。
- あるエージェントがコンポーネントを調査し、別のエージェントがUIを構築するマルチエージェントワークフロー。
- エンタープライズ向けデザインシステムのカスタムレジストリ統合。
はじめに
公式ドキュメントを参照してください: https://ui.shadcn.com/docs/mcp
通常は以下で開始します:
npx shadcn@latest mcp
またはプロジェクトに設定し、対応するAIツールと併用します。
SvelteやVueなどのマルチフレームワーク対応のコミュニティフォークや拡張版も存在しますが、多くのユーザーにはshadcn/ui公式版が推奨されます。
Tags
Related Entries
Keep exploring similar tools and resources in this category.
PaidSync.ai
MCP ServersPaidSync.ai is a hosted MCP server for paid advertising that exposes 610+ tools across 14 advertising, analytics, tagging, and commerce platforms. It supports read/write workflows from AI clients including ChatGPT, Claude, Gemini, Cursor, Claude Code, and Codex, with a free plan.
Hyper3D MCP
MCP ServersHyper3D MCP is Hyper3D's hosted Rodin MCP server for creating 3D assets from natural-language instructions or supported references, checking asynchronous generation progress, and retrieving model download links inside AI coding clients. Official setup is documented for Codex, Claude Code, and Kimi Code CLI.
Related Reads
Background, tutorials, and protocol context connected to this entry.
