Shadcn UI MCP Server

Shadcn UI MCP Server

Shadcn UI MCP サーバーは、TypeScript ベースのサーバーで、AI アシスタントが Model Context Protocol (MCP) を介して shadcn/ui の React コンポーネントのソースコード、使用デモ、およびインストールガイドに直接アクセス、取得、および作業できるようにします。これは、AI モデル（Claude や IDE に統合されたものなど）と shadcn/ui コンポーネントライブラリとの間の架け橋として機能し、開発者と AI エージェントの効率的なワークフローをサポートします。

Author: Jpisnice


プロトコルを表示

Shadcn UI MCP サーバーとは？

Shadcn UI MCP サーバーは、AI アプリケーションに shadcn/ui コンポーネントや関連リソースを公開するオープンソースの MCP サーバーです。これにより、言語モデルやインテリジェントエージェントは、標準化されたインターフェースを介してコンポーネントのソースコードをプログラムによって取得したり、デモの使用例を表示したり、インストールスクリプトやフレームワーク固有のガイドを生成したりできます。これにより、shadcn/ui コンポーネントの知識を AI 駆動のワークフローやコードアシスタントにシームレスに統合できます。

設定方法

  1. リポジトリをクローンして、開発環境に配置します。

  2. Node.js（v18 以降）および npm がインストールされていることを確認してください。

  3. 次のコマンドで依存関係をインストールします:

    npm install

  4. 次のコマンドでサーバーをビルドして起動します:

    bash startup.sh

    または、同じ手順を個別に実行します:

    npm run clean
npm run build
npm run start

  5. 他のアプリケーションとの統合を有効にするには（たとえば、VS Code エージェントモード）、クライアント（VS Code の settings.json など）を構成し、SSE エンドポイントに接続します。例:

    "mcp": {
    "servers": {
        "shadcnui": {
            "type": "sse",
            "url": "http://localhost:3001/sse"
        }
    }
}

  6. オプションで、インタラクティブなデバッグとサーバー検査のために、組み込みの MCP インスペクター（デフォルトで http://127.0.0.1:6274 に配置されています）を使用します。

使用方法

  1. サーバーを起動し、正常に動作しているかを確認します（デフォルトの SSE エンドポイントは http://localhost:3001/sse です）。
  2. AI ツール、IDE、またはアシスタント（エージェントモードの VS Code など）で、MCP サーバーが外部ツールプロバイダーとして正しく構成されていることを確認します。
  3. 使用可能なコマンドを利用して:
    • すべての shadcn/ui UI コンポーネントをリストします
    • 任意のコンポーネントのソースコードを取得します（例：button, accordion）
    • コンポーネントのデモコードと使用例を取得します
    • パッケージマネージャー固有のインストールスクリプトを生成します
    • フレームワーク固有のインストールガイドをリクエストします
  4. curl、ブラウザ、またはインスペクター UI を使用して、API エンドポイントを直接テストし、機能を確認します（開発者向け）。
  5. 応答を分析し、結果をコーディングワークフローや AI 駆動の開発プロセスに統合します。

主な機能

  • 公式 GitHub リポジトリから最新の shadcn/ui コンポーネントのソースコードに直接アクセスできる。
  • デモコードや実用的なコンポーネント使用例を即座に取得でき、迅速なプロトタイピングをサポートする。
  • お好みのパッケージマネージャー（npm、yarn、pnpm、bun）に合わせてインストール手順を生成する。
  • 対応環境（Next.js、Vite、Remix など）向けのフレームワーク固有のインストールガイドを提供する。
  • 新しいツールやリソースを追加するための拡張可能性を備えた、使いやすい MCP サーバー。
  • VS Code エージェントモードを含む開発ツールや AI アシスタントとのシームレスな統合。

ユースケース

  • AI コーディングアシスタント: 開発者が shadcn/ui コンポーネントを探査、挿入、または変更するのに役立つ AI ツールやチャットボットに駆動されます。
  • IDE 統合: コンポーネントのソースまたはデモを取得し、インストールスクリプトをオンザフライで生成するためのインエディターワークフローを可能にします。
  • 自動プロジェクトセットアップ: ボットやスクリプトが特定のフレームワークやパッケージマネージャーのインストール手順をプログラムによって準備できるようにします。
  • 開発者学習ツール: 教育アプリケーションやドキュメント生成ツールに最新のコードスニペットやガイドを提供します。
  • AI 駆動によるコードリファクタリング: 常に最新のコンポーネントソースコードを提供することで、コンポーネントのアップグレードや移行タスクを支援します。

FAQ

Q1: サーバーはどのようにコンポーネントの最新バージョンを見つけますか？
サーバーは shadcn/ui GitHub リポジトリから直接コンポーネント情報を取得し、コンポーネントが保存されている方法や名前の付け方に適応するために複数の検索戦略を使用します。

Q2: コンポーネント名が見つからない、またはエラーが返された場合はどうすればよいですか？
公式の shadcn/ui ライブラリに表示されているコンポーネント名を再確認してください。それでも失敗する場合は、shadcn/ui リポジトリの構造を確認するか、最近の名前変更や廃止を探してください。

Q3: サーバーを拡張して新しいツールやリソースを追加できますか？
はい、サーバーは拡張性を考慮して設計されています。tools.ts に新しいツールを追加し、resources.ts にリソースを、resource-templates.ts にリソーステンプレートを追加できます。

Q4: このサーバーは本番環境で使用可能ですか？
堅牢ではありますが、このプロジェクトは主にローカル開発、実験、およびアシスタント統合を目的として設計されています。本番環境にデプロイする場合は、そのセキュリティとエラーハンドリングを確認し、堅牢にしてください。

Q5: サーバーまたは統合に関する問題をデバッグするにはどうすればよいですか？
http://127.0.0.1:6274 の MCP インスペクターを利用し、コンソールログを監視し、開発環境と shadcn/ui GitHub リポジトリへの正しいネットワークアクセスを確保してください。