# shadcn MCP Server

AIアシスタントが自然言語を使ってレジストリからshadcn/uiコンポーネントを直接閲覧・検索・インストールできる公式MCPサーバーで、ハルシネーションのないAI駆動UI開発を実現します。

Canonical URL: https://a2a-mcp.org/entry/shadcn-mcp-server-ja

Language: ja

Category: MCP Servers

Updated: 2026-03-18

## 概要

shadcn MCP Serverは、shadcn/uiのための[Model Context Protocol (MCP)](https://modelcontextprotocol.io)の公式実装です。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

通常は以下で開始します:
```bash
npx shadcn@latest mcp
```
またはプロジェクトに設定し、対応するAIツールと併用します。

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

## Tags

- shadcn
- mcp
- ai-agent
- ui-components
- registry
- typescript
- react
- tailwind
- claude
- cursor

## Sources

- [Project website](https://ui.shadcn.com/docs/mcp)