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 的官方工具。欢迎贡献代码！