Ant 設計 コンポーネント モデル コンテキスト プロトコル サーバー
Claudeのような大規模言語モデル（LLM）にAnt設計コンポーネントのドキュメントを公開するモデルコンテキストプロトコル（MCP）サーバー。このサーバーにより、LLMは専用のツールセットを通じてAnt設計コンポーネントを探索し、理解することができます。
特徴
使い方は簡単 - Ant Design リポジトリ全体をクローンする必要はありません
起動を高速化するための事前抽出されたコンポーネントドキュメント
利用可能なすべての Ant Design コンポーネントを一覧表示する
説明や使用方法を含む詳細なコンポーネントドキュメントを入手します
コンポーネントのプロパティとAPI定義を表示する
特定のコンポーネントのコード例を参照する
名前または機能でコンポーネントを検索する
Related MCP server: antd-components-mcp
初期設定
MCP サーバーを初めて使用する前に、Ant Design リポジトリからドキュメントを抽出する必要があります。
これにより、MCP サーバーが使用する、抽出されたすべてのコンポーネント ドキュメントを含むdataディレクトリが作成されます。
サーバーのテスト
すべてが正しく動作していることを確認するには、テスト スクリプトを実行します。
これにより、MCP サーバーが実行され、サンプル クエリを使用して利用可能なすべてのツールがテストされます。
使用法
コマンドライン
MCP サーバーを実行します。
クロードデスクトップ統合
この MCP サーバーを Claude Desktop で使用するには、 claude_desktop_config.json構成ファイルを編集します。
設定ファイルの場所:
macOS/Linux:
~/Library/Application Support/Claude/claude_desktop_config.jsonWindows:
$env:AppData\Claude\claude_desktop_config.json
クロード・コード統合
この MCP サーバーを Claude Code CLI で使用するには、次の手順に従います。
Claude CodeにAnt Design Components MCPサーバーを追加する
# Basic syntax claude mcp add antd-components npx -y mcp-antd-componentsMCPサーバーが登録されていることを確認する
# List all configured servers claude mcp list # Get details for your Ant Design components server claude mcp get antd-components必要に応じてサーバーを削除する
claude mcp remove antd-componentsClaude 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/プロパティドキュメント
サンプルコード
共通プロパティのドキュメント
このアプローチにはいくつかの利点があります。
ユーザーはAnt Designリポジトリ全体をクローンする必要はない
MCPサーバーの起動時間が短縮
より小さいパッケージサイズ
新しいバージョンがリリースされたときに簡単に更新できます
Ant Design の新しいバージョンのドキュメントを更新するには、更新されたリポジトリで抽出スクリプトを再度実行するだけです。