Ant Design Pro MCP Server

项目结构

antd-pro-mcp/ ├── src/ │ ├── index.ts # MCP 服务器主入口 │ ├── types.ts # TypeScript 类型定义 │ └── generators/ # 组件生成器 │ ├── proTable.ts │ ├── proForm.ts │ ├── proLayout.ts │ ├── proCard.ts │ └── proDescriptions.ts ├── examples/ # 生成组件示例 ├── docs/ # 文档 ├── package.json ├── tsconfig.json └── README.md

一个用于自然语言生成 Ant Design Pro 页面组件的 MCP (Model Context Protocol) 服务器。

功能特性

• 🚀 ProTable 生成: 根据自然语言描述生成功能完整的表格组件
• 📝 ProForm 生成: 支持页面、弹窗、抽屉三种表单类型
• 🎨 ProLayout 生成: 支持侧边、顶部、混合三种布局类型
• 📊 ProCard 生成: 支持统计、图表、列表、网格四种卡片类型
• 📋 ProDescriptions 生成: 支持水平、垂直两种描述列表布局

安装

npm install

构建

npm run build

开发

npm run dev

在 Cursor 中使用

1. 构建项目

npm run build

2. 配置 Cursor MCP

在 Cursor 的设置中添加 MCP 服务器配置：

{
  "mcpServers": {
    "antd-pro-generator": {
      "command": "node",
      "args": ["/path/to/your/project/dist/index.js"],
      "env": {}
    }
  }
}

或者使用 npm 全局安装后：

npm install -g .

然后在 Cursor 配置中使用：

{
  "mcpServers": {
    "antd-pro-generator": {
      "command": "antd-pro-mcp",
      "args": [],
      "env": {}
    }
  }
}

3. 重启 Cursor

配置完成后重启 Cursor，MCP 服务器将自动启动。

可用工具

generate_pro_table

生成 ProTable 组件页面。

参数：

• description (必需): 自然语言描述，说明需要生成什么样的表格
• columns (可选): 表格列名数组
• features (可选): 需要的功能特性，如搜索、分页、排序等
• filename (可选): 生成的文件名

示例：

生成一个用户管理表格，包含姓名、邮箱、状态、创建时间列，需要搜索和分页功能

generate_pro_form

生成 ProForm 组件页面。

参数：

• description (必需): 自然语言描述，说明需要生成什么样的表单
• fields (可选): 表单字段数组
• formType (可选): 表单类型 (modal/drawer/page)
• filename (可选): 生成的文件名

示例：

生成一个用户信息编辑表单，包含姓名、邮箱、电话、地址字段，使用弹窗形式

generate_pro_layout

生成 ProLayout 布局页面。

参数：

• description (必需): 自然语言描述，说明需要生成什么样的布局
• layoutType (可选): 布局类型 (side/top/mix)
• features (可选): 需要的功能特性
• filename (可选): 生成的文件名

示例：

生成一个管理后台布局，使用侧边栏导航，包含菜单、面包屑、头部功能

generate_pro_card

生成 ProCard 组件页面。

参数：

• description (必需): 自然语言描述，说明需要生成什么样的卡片
• cardType (可选): 卡片类型 (statistic/chart/list/grid)
• filename (可选): 生成的文件名

示例：

生成一个数据统计仪表盘，显示用户数量、订单统计等指标

generate_pro_descriptions

生成 ProDescriptions 组件页面。

参数：

• description (必需): 自然语言描述，说明需要生成什么样的描述列表
• fields (可选): 描述字段数组
• layout (可选): 布局方向 (horizontal/vertical)
• filename (可选): 生成的文件名

示例：

生成一个用户详情页面，显示用户的基本信息和详细资料

使用示例

在 Cursor 中，你可以直接使用自然语言来生成组件：

1. 生成表格组件：

   请帮我生成一个产品管理表格，包含产品名称、价格、库存、状态、创建时间等字段，需要支持搜索、分页和排序功能
   

2. 生成表单组件：

   创建一个产品添加表单，包含产品名称、描述、价格、分类、状态等字段，使用抽屉形式展示
   

3. 生成布局组件：

   设计一个电商管理后台布局，使用混合导航模式，包含顶部导航和侧边菜单
   

4. 生成卡片组件：

   制作一个销售数据看板，包含各种统计图表和数据指标
   

5. 生成描述组件：

   创建一个订单详情页面，展示订单的所有相关信息
   

技术栈

• TypeScript: 类型安全的 JavaScript
• MCP SDK: Model Context Protocol 软件开发工具包
• Zod: 运行时类型验证
• Ant Design Pro: 企业级 UI 设计语言和 React 组件库

开发指南

添加新的生成器

1. 在 src/generators/ 目录下创建新的生成器文件
2. 在 src/types.ts 中添加相应的类型定义
3. 在 src/index.ts 中注册新的工具

自定义模板

每个生成器都包含可自定义的模板，你可以根据需要修改生成的代码结构和样式。

许可证

MIT License

贡献

欢迎提交 Issue 和 Pull Request！