Shadcn UI MCP Server

Shadcn UI MCP サーバー

Shadcn UI コンポーネントを用いた開発体験を向上させるために設計された、強力で柔軟な MCP (Model Control Protocol) サーバーです。このサーバーは、高度なツールと機能を備えた UI コンポーネントの構築と管理のための堅牢な基盤を提供します。

機能

ツール

この MCP サーバーは、Model Control Protocol を通じて使用できる一連のツールを提供します。

• list-components: 利用可能な shadcn/ui コンポーネントの一覧を取得します
• get-component-docs: 特定のコンポーネントのドキュメントを取得します
• install-component: shadcn/ui コンポーネントをインストールします
• list-blocks: 利用可能な shadcn/ui ブロックの一覧を取得します
• get-block-docs: 特定のブロックのドキュメントを取得します
• install-blocks: shadcn/ui ブロックをインストールします

機能性

• コンポーネント管理

  • 利用可能な shadcn/ui コンポーネントの一覧表示
  • 特定のコンポーネントの詳細なドキュメントの取得
  • 複数のパッケージマネージャー (npm、pnpm、yarn、bun) をサポートしたコンポーネントのインストール

• ブロック管理

  • 利用可能な shadcn/ui ブロックの一覧表示
  • 特定のブロックのドキュメントとコードの取得
  • 複数のパッケージマネージャーをサポートしたブロックのインストール

• パッケージマネージャーのサポート

  • npm、pnpm、yarn、bun に対する柔軟なランタイムサポート
  • ユーザーが使用しているパッケージマネージャーの自動検出

インストール

前提条件

• Node.js (v18 以上)
• npm または yarn パッケージマネージャー

Claude Desktop の設定

Claude Desktop で使用するには、サーバー設定を追加します。

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

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

Windsurf の設定

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

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

Cursor の設定

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

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

開発とデバッグ

ローカル開発

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

npm install

2. サーバーをビルドします:

npm run build

デバッグ

MCP サーバーは stdio を介して通信するため、デバッグが難しい場合があります。デバッグには MCP Inspector の使用を推奨します:

npm run inspector

Inspector はブラウザでデバッグツールにアクセスするための URL を提供し、次のことが可能になります:

• MCP 通信の監視
• ツール呼び出しと応答の検査
• サーバーの動作のデバッグ
• リアルタイムログの表示

関連プロジェクトと依存関係

このプロジェクトは、以下のツールとライブラリを使用して構築されています:

• Model Context Protocol TypeScript SDK - MCP サーバーとクライアントのための公式 TypeScript SDK
• MCP Inspector - MCP サーバー用のデバッグツール
• Cheerio - サーバー向けに特別に設計された、高速で柔軟かつ軽量な jQuery コアの実装

ライセンス

MIT ライセンス - このプロジェクトはご自身の目的で自由にご利用いただけます。

コントリビューション

コントリビューションを歓迎します! お気軽に Pull Request を送信してください。