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

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

特徴

• 使い方は簡単 - Ant Design リポジトリ全体をクローンする必要はありません

• 起動を高速化するための事前抽出されたコンポーネントドキュメント

• 利用可能なすべての Ant Design コンポーネントを一覧表示する

• 説明や使用方法を含む詳細なコンポーネントドキュメントを入手します

• コンポーネントのプロパティとAPI定義を表示する

• 特定のコンポーネントのコード例を参照する

• 名前または機能でコンポーネントを検索する

Related MCP server: react-analyzer-mcp

初期設定

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

# First, clone the Ant Design repository (can be temporary)
git clone https://github.com/ant-design/ant-design.git

# Extract documentation
cd mcp-antd-components
npm run extract   # Uses the default ./ant-design path
# OR
node scripts/extract-docs.mjs /path/to/ant-design  # For a custom path

# After extraction is complete, the Ant Design repo can be deleted if desired

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

サーバーのテスト

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

npm test
# OR
node scripts/test-server.mjs

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

使用法

コマンドライン

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

# Run server with pre-extracted data
npm start
# OR
npx -y mcp-antd-components

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

この MCP サーバーを Claude Desktop で使用するには、 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

クロード・コード統合

この 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 パターンで動作します）

例

試してみるクエリの例:

What components are available in Ant Design?
Show me the documentation for the Button component.
What props does the Table component accept?
Show me code examples for the Modal component.
Get the example "basic" for the Form component.
Find components related to Input or Form elements.

注: 内部ディレクトリ構造ではケバブケース (例: 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 の新しいバージョンのドキュメントを更新するには、更新されたリポジトリで抽出スクリプトを再度実行するだけです。