shadcn-ui MCP Server

shadcn-ui MCP サーバー

shadcn/ui コンポーネントの参照情報を提供する MCP サーバー

これは、shadcn/ui コンポーネントの参照情報を提供する TypeScript ベースの MCP サーバーです。AI アシスタントが shadcn/ui コンポーネントのドキュメントや例にアクセスできるようにする Model Context Protocol（MCP）サーバーを実装しています。

機能

ツール

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

機能の詳細

このサーバーは、次の情報をスクレイピングしてキャッシュします。

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

次のような構造化データを提供します。

• コンポーネントの説明
• インストール手順
• 使用例
• Props とバリアント
• コードサンプル

開発

依存関係をインストールします。

npm install

サーバーをビルドします。

npm run build

自動再ビルドを有効にして開発する場合：

npm run watch

インストール

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 サーバーは stdio 経由で通信するため、デバッグは難しい場合があります。パッケージスクリプトとして利用できる MCP Inspector の使用をおすすめします。

npm run inspector

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