Ant Design Components

🚀 基於 Ant Design 組件文檔的模型上下文協議（MCP）服務器

本項目是一個基於 Ant Design 組件文檔的模型上下文協議（MCP）服務器，它能將螞蟻設計組件的文檔暴露給大型語言模型（LLMs），如 Claude。此服務器為 LLM 提供了一組專業工具，方便其探索和理解 Ant Design 組件。

🚀 快速開始

在首次使用 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 服務器並用示例查詢測試所有可用工具。

✨ 主要特性

• 👍 易於使用——無需克隆整個 Ant Design 倉庫
• ⚡ 提前提取組件文檔以實現快速啟動
• 📋 列出所有可用的 Ant Design 組件
• 📖 獲取特定組件的詳細文檔，包括描述和用法
• 🔍 查看組件屬性（props）及 API 定義
• 💻 覽特定組件的代碼示例
• 🔎 按名稱或功能搜索組件

📦 安裝指南

命令行

運行 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 版本的同步，同時保持高效和靈活的工作流程。