Ant Design Components

🚀 Ant Design コンポーネントの MCP サーバー

このプロジェクトは、Ant Design コンポーネントのドキュメントを基にしたモデルコンテキストプロトコル（MCP）サーバーです。このサーバーを通じて、Claude などの大規模言語モデル（LLM）が Ant Design コンポーネントのドキュメントを探索し、理解することができます。

🚀 クイックスタート

この MCP サーバーを使用することで、LLM が Ant Design コンポーネントの専用ツールを探索し、理解することが可能になります。以下に、サーバーの初期設定と使用方法を説明します。

✨ 主な機能

• 使いやすさ：Ant Design のリポジトリ全体をクローンする必要がありません。
• 高速起動：事前にコンポーネントのドキュメントを抽出しているため、迅速に起動できます。
• コンポーネントの一覧表示：利用可能なすべての Ant Design コンポーネントを一覧表示します。
• 特定コンポーネントの詳細ドキュメント取得：特定のコンポーネントの詳細なドキュメント（説明や使い方を含む）を取得できます。
• コンポーネントの属性と API 定義の確認：コンポーネントの属性（props）と API 定義を確認できます。
• コード例の閲覧：特定のコンポーネントのコード例を閲覧できます。
• コンポーネントの検索：名前または機能でコンポーネントを検索できます。

📦 インストール

初期設定

初めて MCP サーバーを使用する前に、Ant Design リポジトリからドキュメントを抽出する必要があります。

# まず、Ant Design リポジトリをクローンします（一時的なクローンでも構いません）
git clone https://github.com/ant-design/ant-design.git

# ドキュメントを抽出します
cd mcp-antd-components
npm run extract   # デフォルトの ./ant-design パスを使用
# または
node scripts/extract-docs.mjs /path/to/ant-design  # カスタムパス

# 抽出が完了したら、必要に応じて Ant Design リポジトリを削除できます

これにより、data ディレクトリにすべての抽出されたコンポーネントのドキュメントが作成され、MCP サーバーがこれらのドキュメントを使用します。

サーバーのテスト

すべてが正常に動作していることを確認するには、テストスクリプトを実行します。

npm test
# または
node scripts/test-server.mjs

これにより、MCP サーバーが起動し、サンプルクエリを使用してすべての利用可能なツールがテストされます。

💻 使用例

コマンドライン

MCP サーバーを起動するには、次のコマンドを実行します。

# 事前に抽出したデータを使用してサーバーを起動します
npm start
# または
npx -y mcp-antd-components

Claude Desktop との統合

Claude Desktop でこの MCP サーバーを使用するには、claude_desktop_config.json 設定ファイルを編集します。

{
  "mcpServers": {
    "Ant Design Components": {
      "command": "npx",
      "args": ["-y", "mcp-antd-components"]
    }
  }
}

設定ファイルの場所は以下の通りです。

• macOS/Linux: ~/Library/Application Support/Claude/claude_desktop_config.json
• Windows: $env:AppData\Claude\claude_desktop_config.json

Claude Code との統合

Claude Code CLI でこの MCP サーバーを使用するには、以下の手順に従います。

1. Ant Design コンポーネントの MCP サーバーを Claude Code に追加する

# 基本的な構文
claude mcp add antd-components npx -y mcp-antd-components

2. MCP サーバーが登録されていることを確認する

# すべての設定されたサーバーを一覧表示する
claude mcp list

# Ant Design コンポーネントのサーバーの詳細情報を取得する
claude mcp get antd-components

3. 必要に応じてサーバーを削除する

claude mcp remove antd-components

4. Claude Code でツールを使用する 設定が完了したら、Claude Code セッションで Ant Design コンポーネントに関する質問をすることで、ツールを使用できます。

📚 ドキュメント

MCP プロトコル

MCP（モデルコンテキストプロトコル）は、LLM と外部データソース間の通信を定義する一連のインターフェースとメッセージ形式です。これにより、LLM はトレーニング時の知識だけでなく、リアルタイムのリクエストに基づいて情報を動的に取得できます。この設計は、不断に変化する外部システムとの相互作用が必要なタスクに特に適しています。

メリット

1. 高速応答：MCP を使用すると、モデルは再トレーニングを待つことなく最新のデータを直接照会できます。
2. 柔軟性：複数のデータソースとインターフェースプロトコルをサポートしており、拡張が容易です。
3. 保守性：インターフェースを明確に定義することで、システムの保守と更新が簡素化されます。

更新について

Ant Design の新しいバージョンに合わせてドキュメントを更新するには、抽出スクリプトを再度実行し、更新されたリポジトリを指定します。これにより、常に最新のコンポーネントドキュメントを使用できます。

この方法には以下の利点があります。

1. ユーザーは Ant Design リポジトリ全体をクローンする必要がありません。
2. MCP サーバーの起動が高速化されます。
3. パッケージのサイズが小さくなります。
4. 新しいバージョンの更新が容易に管理できます。

この方法を使用することで、最新の Ant Design バージョンと常に同期しながら、効率的で柔軟な作業フローを維持できます。