Ant Design MCP 服务器

基于模型上下文协议（MCP）的Ant Design组件服务器，提供丰富的Ant Design组件文档、示例和最佳实践指南，适用于AI助手。

🚀 特性

• 组件文档查询：获取Ant Design所有组件的详细文档
• 示例代码获取：提供每个组件完整的示例代码
• API文档查询：查询组件的API属性和方法
• 最佳实践指导：获得组件使用的最佳实践建议
• 更新日志查询：查看组件的版本更新历史
• 多版本支持：支持在不同版本的Ant Design之间切换

📦 安装

从源码构建

# 克隆仓库
git clone <repository-url>
cd antd-MCP

# 安装依赖
npm install

# 构建项目
npm run build

🛠️ 使用说明

启动MCP服务器

构建项目后，可以选择在本地客户端上配置MCP。

具体的配置方法可参考客户端说明。

以光标设置为例，在光标的工具部分进行配置：

// 从本地导入（推荐，后面也许就不推荐了）
{
  "mcpServers": {
    "antd-components-local": {
      "command": "node",
      "args": [
        "<repository-url>/antd-MCP/dist/cli.js"
      ]
    }
  }
}

// 从npm导入
{
  "mcpServers": {
    "antd-components-local": {
      "command": "npx",
      "args": [
        "antd-mcp"
      ]
    }
  }
}

提取Ant Design数据

如果需要从本地的Ant Design仓库提取最新数据：

# 先克隆antd仓库到本地
git clone https://github.com/ant-design/ant-design

# 执行脚本
npm run extract

# 可能会出现更新日志无法正常获取的现象（如果docs文件夹下没有components-changelog.json文件），可以执行以下脚本后重新执行extract脚本
npm run generate-component-changelog

抓取最佳实践

此功能仍需改进，脚本编写较差，抓取的数据目前较为混乱。如果有好的想法，请随时提交PR

# 抓取全部组件的最佳实践（需要提前提取Ant Design数据）
npm run crawl-practices

# 抓取指定组件的最佳实践
npm run crawl-practices Button ...

在MCP客户端中使用

将此服务器添加到您的MCP客户端配置中，即可使用以下功能：

• 📋 list-components - 列出所有可用的Ant Design组件
• 📖 get-component-docs - 获取指定组件的文档
• 💡 get-component-examples - 获取组件示例代码
• 🔍 get-component-api - 查询组件的API文档
• ⭐ get-best-practices - 获取组件使用的最佳实践
• 📝 get-component-changelog - 查看组件更新历史
• 🔄 change-component-version - 切换Ant Design版本

📁 项目结构

antd-MCP/
├── src/                    # 源代码
│   ├── tools/             # MCP工具实现
│   ├── scripts/           # 脚本工具
│   ├── utils/             # 工具函数
│   └── index.ts           # 主入口文件
├── docs/                  # Ant Design组件文档
│   └── components/        # 各组件文档和示例
├── cli.ts                 # 命令行入口
└── package.json           # 项目配置

🔧 开发

开发环境启动

您可以使用MCP提供的在线调试器进行调试

构建

npm run build

调试和检查

npm run inspector

生成组件更新日志

npm run generate-component-changelog

📋 系统需求

• Node.js >= 16.0.0
• Npm 或 yarn

🤝 贡献

欢迎提交Issue和Pull Requests！

开发流程

1. 分叉自己的仓库
2. 创建功能分支（git checkout -b feat/amazing-feature）
3. 提交更改（git commit -m 'Add some amazing feature'）
4. 推送到分支（git push origin feat/amazing-feature）
5. 打开Pull Request

分支命名规范

• feat/ - 新功能
• fix/ - 问题修复
• docs/ - 文档更新
• refactor/ - 代码重构
• test/ - 测试相关