Ant Design with MCP - 后台管理系统
📖 项目简介
这是一个使用 Model Context Protocol (MCP) 实现自动代码生成的完整后台管理系统示例。通过 MCP 服务，AI 助手可以自动获取 Ant Design 组件和 ahooks 库的最新文档和使用示例，从而生成高质量、符合最佳实践的代码。
✨ 核心特性
- 🤖 AI 驱动开发: 通过 MCP 服务自动获取组件文档和示例
- 📚 智能代码生成: 基于最新的 Ant Design 和 ahooks 文档生成代码
- 🎯 最佳实践: 遵循官方推荐的使用方式和设计模式
- 🔧 开发规范: 统一的代码风格和项目结构
🛠 技术栈
- React 18.3.1: 现代化的 React 开发
- TypeScript: 类型安全的开发体验
- Ant Design 6.0.0: 企业级 UI 组件库
- ahooks 3.9.0: 强大的 React Hooks 工具库
- React Router 7.7.1: 路由管理
- SCSS: BEM 命名规范的样式方案
🚀 MCP 配置指南
1. 配置 MCP 服务
在项目的 .vscode/mcp.json 文件中配置 MCP 服务：
{
"inputs": [],
"servers": {
"ant-design": {
"type": "stdio",
"command": "ant-design-mcp"
},
"ahooks": {
"type": "stdio",
"command": "ahooks-mcp"
},
"memory": {
"type": "stdio",
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-memory"]
}
}
}2. 安装 MCP 服务
# 安装 Ant Design MCP 服务
npm install -g ant-design-mcp
# 安装 ahooks MCP 服务
npm install -g ahooks-mcp3. 开发指令配置
在 .github/instructions/ 目录下配置 AI 助手的开发规范：
00-dev.instructions.md - 基础开发规范
- React 函数式组件 + TypeScript
- 箭头函数语法
- SCSS + BEM 命名规范
- 导入顺序规范
- 文件头注释规范
01-mcp.ant.instructions.md - MCP 使用规范
- 强制使用 MCP 服务获取组件信息
- Ant Design 组件使用流程
- ahooks Hooks 使用流程
- 标准工作流程示例
📋 可用的 MCP 工具
Ant Design 组件工具
// 获取所有组件列表
mcp_ant-design_get_all_component_names()
// 搜索组件
mcp_ant-design_search_components({ keyword: "table" })
// 获取组件详细信息
mcp_ant-design_get_component_info({ componentName: "Table" })
// 获取组件使用示例
mcp_ant-design_get_component_example({ componentName: "Table" })
// 按类别获取组件
mcp_ant-design_get_components_by_category({ category: "Data Display" })ahooks 工具
// 获取所有 Hook 列表
mcp_ahooks_get_all_hook_names()
// 搜索 Hook
mcp_ahooks_search_hooks({ keyword: "request" })
// 获取 Hook 详细信息
mcp_ahooks_get_hook_info({ name: "useRequest" })
// 按类别获取 Hooks
mcp_ahooks_get_hooks_by_category({ category: "Request" })
// 获取所有类别
mcp_ahooks_get_all_categories()💡 使用示例
场景 1：创建用户管理页面
- 搜索相关组件
// AI 助手自动调用
mcp_ant-design_search_components({ keyword: "table" })
mcp_ant-design_search_components({ keyword: "form" })- 获取组件详细信息
mcp_ant-design_get_component_info({ componentName: "Table" })
mcp_ant-design_get_component_info({ componentName: "Form" })
mcp_ant-design_get_component_info({ componentName: "Modal" })- 获取 Hooks 信息
mcp_ahooks_get_hook_info({ name: "useRequest" })
mcp_ahooks_get_hook_info({ name: "useAntdTable" })- AI 自动生成代码
- 基于最新文档生成 TypeScript 类型定义 - 生成符合最佳实践的组件代码 - 自动添加必要的导入和配置
场景 2：添加新功能
当需要添加新功能时，只需告诉 AI：
"请添加一个数据统计页面，包含图表展示和数据筛选功能"AI 会自动：
- 调用 MCP 搜索相关组件（Chart、DatePicker、Select 等）
- 获取组件的详细 API 和示例
- 查询合适的 ahooks（如 useRequest、useDebounce）
- 生成完整的、类型安全的代码
📁 项目结构
ant-design-with-mcp/
├── .github/
│ └── instructions/ # AI 助手开发指令
│ ├── 00-dev.instructions.md # 基础开发规范
│ └── 01-mcp.ant.instructions.md # MCP 使用规范
├── .vscode/
│ └── mcp.json # MCP 服务配置
├── src/
│ ├── components/
│ │ ├── Layout/ # 布局组件
│ │ │ └── MainLayout.tsx # 主布局（头部、侧边栏、面包屑）
│ │ ├── Dashboard/ # 工作台页面
│ │ ├── UserManagement/ # 用户管理页面
│ │ ├── Settings/ # 系统设置页面
│ │ └── NotFound/ # 404 页面
│ ├── routes/
│ │ ├── index.tsx # 路由配置和菜单生成
│ │ └── routeConfig.tsx # 路由懒加载配置
│ ├── services/
│ │ └── userService.ts # 模拟 API 服务
│ ├── types/
│ │ └── user.ts # TypeScript 类型定义
│ ├── scss/
│ │ └── common.scss # 公共样式
│ ├── App.tsx # 应用入口
│ └── index.tsx # React 渲染入口
├── package.json
└── README.md🎨 已实现功能
1. 后台布局系统
- 响应式顶部导航栏
- 可折叠侧边栏菜单（自动根据路由配置生成）
- 面包屑导航
- 用户信息下拉菜单
2. 工作台页面
- 系统统计数据卡片
- 快捷入口
- 系统通知
3. 用户管理
- 用户列表表格（分页、排序、搜索）
- 添加用户（表单验证）
- 编辑用户
- 删除用户（确认提示）
- 20 条中文模拟数据
4. 系统设置
- 基础设置: 系统名称、版本、语言、时区
- 安全设置: 密码修改、双因素认证、会话超时、API 密钥
5. 技术特性
- React Router 路由管理
- 路由组件懒加载（React.lazy + Suspense）
- 菜单自动生成（基于路由配置）
- TypeScript 类型安全
- SCSS 模块化样式
🔧 快速开始
安装依赖
npm install启动开发服务器
npm start应用将在 http://localhost:3000 打开
## 🤖 AI 辅助开发流程
### 准备工作
1. **配置 VS Code**
- 安装 GitHub Copilot 扩展
- 配置 `.vscode/mcp.json` 文件
2. **安装 MCP 服务**npm install -g ant-design-mcp ahooks-mcp
3. **配置开发指令**
- 在 `.github/instructions/` 中编写 AI 助手规范
- 使用 `---` 和 `applyTo` 指定应用范围
### 开发新功能
#### 示例：添加数据统计页面
1. **与 AI 对话**用户: "请创建一个数据统计页面，包含用户增长趋势图、活跃用户饼图和数据汇总卡片"
2. **AI 自动执行**
- 🔍 搜索相关组件: `mcp_ant-design_search_components({ keyword: "chart" })`
- 📖 获取组件文档: `mcp_ant-design_get_component_info({ componentName: "Card" })`
- 🎣 查询 Hooks: `mcp_ahooks_get_hook_info({ name: "useRequest" })`
- ✨ 生成代码并自动保存
3. **AI 生成内容**
- TypeScript 类型定义
- React 函数式组件
- 符合 BEM 规范的 SCSS 样式
- 自动添加路由配置
- 更新菜单项
### 开发指令示例
在 `.github/instructions/` 中配置：
applyTo: '**/*.{tsx,ts}'
强制使用 MCP 服务
- 使用任何 Ant Design 组件前，必须调用 MCP 获取最新文档
- 优先使用 ahooks 提供的 Hooks
- 遵循 TypeScript 类型安全原则
- 使用 BEM 命名规范编写样式
## 🎯 MCP 最佳实践
### 1. 组件开发流程
// Step 1: 搜索组件 mcp_ant-design_search_components({ keyword: "table" })
// Step 2: 获取详细文档 mcp_ant-design_get_component_info({ componentName: "Table" })
// Step 3: 查看示例代码 mcp_ant-design_get_component_example({ componentName: "Table" })
// Step 4: 获取相关 Hooks mcp_ahooks_search_hooks({ keyword: "table" }) mcp_ahooks_get_hook_info({ name: "useAntdTable" })
// Step 5: AI 自动生成代码
### 2. 代码质量保证
- ✅ 类型安全: 所有组件都有 TypeScript 类型
- ✅ 最佳实践: 基于官方文档生成代码
- ✅ 统一规范: 遵循项目配置的开发指令
- ✅ 自动更新: MCP 服务提供最新的组件信息
### 3. 常见场景
| 场景 | MCP 工具调用 |
|------|-------------|
| 创建表单 | `search_components("form")` → `get_component_info("Form")` |
| 数据展示 | `get_components_by_category("Data Display")` |
| 状态管理 | `get_hooks_by_category("State")` |
| 请求处理 | `get_hook_info("useRequest")` |
| 表格操作 | `get_hook_info("useAntdTable")` |
## 📚 学习资源
- [Ant Design 官方文档](https://ant.design/)
- [ahooks 官方文档](https://ahooks.js.org/)
- [Model Context Protocol](https://modelcontextprotocol.io/)
- [ant-design-mcp](https://github.com/your-org/ant-design-mcp)
- [ahooks-mcp](https://github.com/your-org/ahooks-mcp)
## 🤝 贡献指南
1. Fork 本仓库
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 开启 Pull Request
## 📄 开源协议
MIT License
## 👤 作者
leon.wang