Antdv MCP

🚀 Ant Design Vue MCP

這是一個適用於 Ant Design Vue 文檔的模型上下文協議（MCP）服務器，配備索引器 CLI。本項目通過 MCP 工具為 Ant Design Vue 組件文檔（v3 和 v4）提供結構化訪問，使 AI 助手能夠查詢組件 API、搜索文檔並提供準確信息。

中文文檔：README.zh-CN.md

✨ 主要特性

• 📚 文檔索引器：爬取並索引 Ant Design Vue v3 和 v4 文檔。
• 🔍 全文搜索：藉助 SQLite FTS5 對頁面和 API 項進行全文搜索。
• 🛠️ MCP 工具：可通過 VS Code 以編程方式查詢組件 API。
• 📊 結構化 API 數據：將屬性、事件、插槽和方法提取到可查詢的數據庫中。
• 🏷️ 規範組件名稱：使用組件標籤（如 a-button）作為規範標識符。

📦 安裝指南

環境要求

• Node.js >= 20.0.0
• pnpm

安裝步驟

# 安裝依賴
pnpm install

# 構建所有包
pnpm build

💻 使用示例

1. 索引文檔

在使用 MCP 服務器之前，需要對 Ant Design Vue 文檔進行索引：

# 索引 v3 文檔
pnpm index:v3

# 索引 v4 文檔
pnpm index:v4

# 同時索引 v3 和 v4 文檔
pnpm index:all

索引器將執行以下操作：

1. 發現所有組件文檔頁面。
2. 獲取並解析每個頁面。
3. 提取組件元數據和 API 表。
4. 將所有內容存儲在 ./data/antdv.sqlite 的 SQLite 數據庫中。

注意：數據庫文件已被 git 忽略，必須在本地生成。

2. 配置 VS Code MCP

將 MCP 服務器添加到 VS Code 配置中。創建或編輯 ~/.config/Code/User/globalStorage/rooveterinaryinc.roo-cline/settings/cline_mcp_settings.json：

{
  "mcpServers": {
    "antdv": {
      "command": "node",
      "args": [
        "/absolute/path/to/antdv-mcp/packages/mcp-server/dist/index.js"
      ],
      "env": {
        "ANTDV_DB_PATH": "/absolute/path/to/antdv-mcp/data/antdv.sqlite"
      }
    }
  }
}

重要提示：服務器腳本和數據庫文件都要使用絕對路徑。

3. 可用的 MCP 工具

配置完成後，VS Code 中提供以下工具：

adv_search_docs

使用全文搜索功能搜索文檔。

{
  query: string,           // 搜索查詢
  version?: 'v3' | 'v4' | 'all',  // 默認值: 'all'
  limit?: number          // 默認值: 10
}

示例：搜索按鈕大小信息

{
  "query": "button size",
  "version": "v4",
  "limit": 5
}

adv_list_components

列出某個版本的所有可用組件。

{
  version: 'v3' | 'v4'
}

示例：列出所有 v4 組件

{
  "version": "v4"
}

adv_get_component_api

獲取組件的結構化 API 文檔。

{
  component: string,      // 組件名稱（例如 "a-button", "button", "Button"）
  version: 'v3' | 'v4'
}

示例：獲取 v4 版本按鈕的 API

{
  "component": "button",
  "version": "v4"
}

返回結果：

{
  component: Component,
  props: ApiItem[],
  events: ApiItem[],
  slots: ApiItem[],
  methods: ApiItem[]
}

adv_find_prop

查找特定屬性或 API 項，並提供相似名稱的建議。

{
  component: string,
  prop: string,
  version: 'v3' | 'v4'
}

示例：查找按鈕的 "type" 屬性

{
  "component": "a-button",
  "prop": "type",
  "version": "v4"
}

組件名稱解析

系統使用組件標籤（如 a-button）作為規範標識符。你可以使用以下方式進行查詢：

• 規範標籤：a-button
• 無前綴：button
• 帕斯卡命名法：Button
• 中文標題：通過別名匹配

所有輸出均使用規範標籤格式。

📚 詳細文檔

項目結構

antdv-mcp/
├── packages/
│   ├── shared/          # 共享類型和實用工具
│   ├── indexer/         # 文檔爬蟲和索引器
│   └── mcp-server/      # MCP 服務器實現
├── data/                # SQLite 數據庫（git 忽略，生成的）
├── package.json         # 根包，包含工作區腳本
└── pnpm-workspace.yaml  # pnpm 工作區配置

數據庫架構

表

• pages：包含全文搜索功能的完整頁面內容。
• components：組件元數據和別名。
• api_items：API 文檔（屬性/事件/插槽/方法）。

全文搜索

• pages_fts：頁面內容的 FTS5 索引。
• api_items_fts：API 描述的 FTS5 索引。

開發

構建

# 構建所有包
pnpm build

# 構建特定包
pnpm --filter @antdv-mcp/indexer build

測試

# 運行所有測試
pnpm test

# 運行特定包的測試
pnpm --filter @antdv-mcp/indexer test

代碼檢查

# 檢查所有包的代碼
pnpm lint

# 格式化代碼
pnpm format

工作原理

索引過程

1. 發現：爬取概述頁面以找到所有組件文檔 URL。
2. 獲取：通過速率限制下載每個組件頁面。
3. 變更檢測：使用 SHA-256 哈希跳過未更改的頁面。
4. 解析：使用 Cheerio 提取組件元數據和 API 表。
5. 規範化：標準化表頭並提取枚舉值。
6. 存儲：將結構化數據保存到支持全文搜索的 SQLite 數據庫中。

MCP 服務器

• 作為基於標準輸入輸出的 MCP 服務器運行。
• 從 SQLite 數據庫（只讀）讀取數據。
• 提供文檔查詢工具。
• 返回結構化的 JSON 響應。

🔧 技術細節

故障排除

數據庫未找到

確保先運行索引器：

pnpm index:all

MCP 服務器未在 VS Code 中顯示

• 檢查 cline_mcp_settings.json 中的路徑是否為絕對路徑。
• 確保服務器已構建：pnpm build。
• 重啟 VS Code。

未找到 API 項

某些組件可能具有非標準的表格格式。解析器可以處理常見情況，但可能會遺漏邊緣情況。

📄 許可證

本項目採用 MIT 許可證。

貢獻說明

這是一個通用的文檔索引器和 MCP 服務器，並非 Ant Design Vue 的官方工具。歡迎貢獻代碼！