Ant Design Components MCP Server

Ant 設計 コンポーネント モデル コンテキスト プロトコル サーバー

Claudeのような大規模言語モデル（LLM）にAnt設計コンポーネントのドキュメントを公開するモデルコンテキストプロトコル（MCP）サーバー。このサーバーにより、LLMは専用のツールセットを通じてAnt設計コンポーネントを探索し、理解することができます。

特徴

• 使い方は簡単 - Ant Design リポジトリ全体をクローンする必要はありません
• 起動を高速化するための事前抽出されたコンポーネントドキュメント
• 利用可能なすべての Ant Design コンポーネントを一覧表示する
• 説明や使用方法を含む詳細なコンポーネントドキュメントを入手します
• コンポーネントのプロパティとAPI定義を表示する
• 特定のコンポーネントのコード例を参照する
• 名前または機能でコンポーネントを検索する

初期設定

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

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

サーバーのテスト

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

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

使用法

コマンドライン

MCP サーバーを実行します。

クロードデスクトップ統合

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

設定ファイルの場所:

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

クロード・コード統合

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

1. Claude CodeにAnt Design Components MCPサーバーを追加する
   # Basic syntax claude mcp add antd-components npx -y mcp-antd-components
2. MCPサーバーが登録されていることを確認する
   # List all configured servers claude mcp list # Get details for your Ant Design components server claude mcp get antd-components
3. 必要に応じてサーバーを削除する
   claude mcp remove antd-components
4. Claude Codeのツールを使用する設定が完了すると、Claude Code セッションで Ant Design コンポーネントについて質問してツールを呼び出すことができます。

ヒント:

• -sまたは--scopeフラグをproject （デフォルト）またはglobalとともに使用して、構成が保存される場所を指定します。

MCPツール

サーバーは、LLM が Ant Design コンポーネントのドキュメントと対話するための次のツールを提供します。

• list-components : 利用可能なすべての Ant Design コンポーネントを PascalCase 形式で一覧表示します (例: Button、DatePicker)
• get-component-props : 特定のコンポーネントのプロパティと API ドキュメントを取得します (「Button」のようなパスカルケース名を使用します)
• get-component-docs : 特定のコンポーネントの詳細なドキュメントを取得します (「DatePicker」のようなパスカルケース名を使用します)
• list-component-examples : 特定のコンポーネントで利用可能なすべての例を一覧表示します（「Table」のようなパスカルケース名を使用します）
• get-component-example : 特定のコンポーネント例のコードを取得します（コンポーネント名は PascalCase で表記されます）
• search-components : 名前パターンでコンポーネントを検索します（PascalCase パターンで動作します）

例

試してみるクエリの例:

注: 内部ディレクトリ構造ではケバブケース (例: button、date-picker、table) が使用されていますが、コンポーネント名は、React コンポーネントの命名規則に合わせて PascalCase (例: Button、DatePicker、Table) で提供されます。

仕組み

scripts/extract-docs.mjsスクリプトは、Ant Design リポジトリからドキュメントを抽出し、 dataディレクトリに保存します。これには以下のものが含まれます。

• コンポーネントドキュメント（マークダウン）
• API/プロパティドキュメント
• サンプルコード
• 共通プロパティのドキュメント

このアプローチにはいくつかの利点があります。

1. ユーザーはAnt Designリポジトリ全体をクローンする必要はない
2. MCPサーバーの起動時間が短縮
3. より小さいパッケージサイズ
4. 新しいバージョンがリリースされたときに簡単に更新できます

Ant Design の新しいバージョンのドキュメントを更新するには、更新されたリポジトリで抽出スクリプトを再度実行するだけです。