Shadcn Ui MCP Server

🚀 shadcn-ui MCP サーバー

shadcn/ui コンポーネントのリファレンス資料に MCP サービスを提供するサーバーです。

このサーバーは TypeScript ベースの MCP サーバーで、shadcn/ui コンポーネントに関するリファレンス情報を提供します。モデルコンテキストプロトコル（MCP）サーバーを実装し、AI アシスタントが shadcn/ui コンポーネントのドキュメントとサンプルにアクセスできるように支援します。

✨ 主な機能

ツール

• list_shadcn_components - 利用可能なすべての shadcn/ui コンポーネントのリストを取得します。
• get_component_details - 特定のコンポーネントの詳細情報を取得します。
• get_component_examples - 特定のコンポーネントの使用例を取得します。
• search_components - キーワードでコンポーネントを検索します。

機能

このサーバーは以下のソースから情報を収集し、キャッシュします。

• 公式 shadcn/ui ドキュメントサイト (https://ui.shadcn.com)
• shadcn/ui GitHub リポジトリ

提供される構造化データには以下が含まれます。

• コンポーネントの説明
• インストール方法
• 使用例
• 属性とバリエーション
• コード例

📦 インストール

Claude Desktop の設定

Claude Desktop で使用するには、サーバーの設定を追加してください。

MacOS の場合：~/Library/Application Support/Claude/claude_desktop_config.json Windows の場合：%APPDATA%/Claude/claude_desktop_config.json%

オプション 1：ローカルビルドを使用する

{
  "mcpServers": {
    "shadcn-ui-server": {
      "command": "/path/to/shadcn-ui-server/build/index.js"
    }
  }
}

オプション 2：npx コマンドを使用する

{
  "mcpServers": {
    "shadcn-ui-server": {
      "command": "npx",
      "args": ["-y", "shadcn-ui-mcp-server"]
    }
  }
}

Windsurf の設定

以下の内容を ./codeium/windsurf/model_config.json に追加してください。

{
  "mcpServers": {
    "shadcn-ui-server": {
      "command": "npx",
      "args": ["-y", "shadcn-ui-mcp-server"]
    }
  }
}

Cursor の設定

以下の内容を .cursor/mcp.json に追加してください。

{
  "mcpServers": {
    "shadcn-ui-server": {
      "command": "npx",
      "args": ["-y", "shadcn-ui-mcp-server"]
    }
  }
}

デバッグ

MCP サーバーは標準入出力を介して通信するため、デバッグは難しい場合があります。MCP Inspector を使用することをおすすめします。これはパッケージスクリプトで実行できます。

npm run inspector

Inspector はブラウザのデバッグツールにアクセスするための URL を提供します。

🔧 開発

依存関係のインストール

npm install

サーバーのビルド

npm run build

自動再構築付きの開発

npm run watch