shadcn-ui MCP サーバー

shadcn/ui コンポーネント参照用の MCP サーバー

これはTypeScriptベースのMCPサーバーで、shadcn/uiコンポーネントのリファレンス情報を提供します。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リポジトリ

次のような構造化データが提供されます:

• コンポーネントの説明

• インストール手順

• 使用例

• 小道具とバリエーション

• コードサンプル

Related MCP server: Shadcn UI MCP Server

発達

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

npm install

サーバーを構築します。

npm run build

自動リビルドを使用した開発の場合:

npm run watch

インストール

クロードデスクトップ構成

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"]
    }
  }
}

ウィンドサーフィンの構成

これを./codeium/windsurf/model_config.jsonに追加します:

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

カーソルの設定

これを.cursor/mcp.jsonに追加します:

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

デバッグ

MCPサーバーはstdio経由で通信するため、デバッグが困難になる場合があります。パッケージスクリプトとして提供されているMCP Inspectorの使用をお勧めします。

npm run inspector

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