# mcp-server-antd

**Repository Path**: debingfeng/mcp-server-antd

## Basic Information

- **Project Name**: mcp-server-antd
- **Description**: 一个专为 Ant Design 生态系统设计的 Model Context Protocol (MCP) 服务器，让您在 Cursor 和 VS Code 中快速访问 Ant Design 组件库资源，实现智能代码生成和开发辅助。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-30
- **Last Updated**: 2025-09-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# MCP Server Ant Design

一个专为 Ant Design 生态系统设计的 Model Context Protocol (MCP) 服务器，让您在 Cursor 和 VS Code 中快速访问 Ant Design 组件库资源，实现智能代码生成和开发辅助。

## 🚀 功能特性

- **智能代码生成**: 基于 Ant Design 组件快速生成 React/Vue/Angular 代码
- **组件搜索**: 快速搜索和查找 Ant Design 组件
- **文档查询**: 实时获取组件 API 文档和使用示例
- **模板生成**: 预置常用页面模板（登录、表格、仪表板等）
- **多框架支持**: 支持 React、Vue、Angular 三大主流前端框架
- **Pro 组件集成**: 包含 Ant Design Pro Components 高级组件
- **图表组件**: 集成 Ant Design Charts 图表库

## 📦 支持的组件库

- **Ant Design**: 基础 UI 组件库
- **Ant Design Charts**: 数据可视化图表库
- **Ant Design Pro**: 高级业务组件
- **Pro Components**: 重型组件和模板

## 🛠 安装和设置

### 1. 安装依赖

```bash
npm install
```

### 2. 构建项目

```bash
npm run build
```

### 3. 在 Cursor 中配置 MCP 服务器

#### 方法一：通过 Cursor 设置

1. 打开 Cursor
2. 按 `Cmd+,` (macOS) 或 `Ctrl+,` (Windows/Linux) 打开设置
3. 搜索 "MCP" 
4. 在 MCP 服务器配置中添加：

```json
{
  "mcpServers": {
    "mcp-server-antd": {
      "command": "node",
      "args": ["/Users/fengdebing/practise/mcp-server-antd/build/index.js"],
      "env": {
        "NODE_ENV": "production"
      }
    }
  }
}
```

#### 方法二：直接编辑配置文件

在 macOS 上编辑文件：
```bash
~/Library/Application Support/Cursor/User/globalStorage/storage.json
```

在 Windows 上编辑文件：
```bash
%APPDATA%\Cursor\User\globalStorage\storage.json
```

在 Linux 上编辑文件：
```bash
~/.config/Cursor/User/globalStorage/storage.json
```

### 4. 重启 Cursor

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

## 🎯 使用方法

### 代码生成

在 Cursor 的聊天界面中，您可以这样使用：

```
生成一个主按钮的代码
```

```
创建一个数据表格，包含姓名、年龄、地址列
```

```
生成一个登录表单页面
```

### 组件搜索

```
搜索表格相关的组件
```

```
查找数据输入组件
```

### 文档查询

```
获取 Button 组件的文档
```

```
查看 ProTable 的 API 文档
```

## 🔧 可用工具

MCP 服务器提供以下工具：

1. **generate_antd_code**: 生成 Ant Design 组件代码
2. **search_antd_components**: 搜索 Ant Design 组件
3. **get_antd_documentation**: 获取组件文档
4. **list_antd_templates**: 列出可用模板

## 📝 支持的组件

### 基础组件
- Button (按钮)
- Input (输入框)
- Select (选择器)
- DatePicker (日期选择器)
- Upload (上传)

### 数据展示
- Table (表格)
- List (列表)
- Card (卡片)
- Avatar (头像)
- Tag (标签)

### 数据录入
- Form (表单)
- Checkbox (多选框)
- Radio (单选框)
- Switch (开关)
- Slider (滑动输入条)

### 反馈
- Modal (对话框)
- Message (全局提示)
- Notification (通知提醒)
- Popconfirm (气泡确认框)

### Pro 组件
- ProTable (高级表格)
- ProForm (高级表单)
- ProLayout (高级布局)
- ProCard (高级卡片)

### 图表组件
- Line (折线图)
- Column (柱状图)
- Pie (饼图)
- Area (面积图)

## 🎨 模板

### 预置模板

1. **登录表单** (`login-form`)
   - 用户名密码登录
   - 表单验证
   - 响应式布局

2. **数据表格** (`data-table`)
   - 数据展示
   - 搜索过滤
   - 分页功能

3. **仪表板** (`dashboard`)
   - 数据统计
   - 图表展示
   - 卡片布局

## 🔍 故障排除

### 常见问题

1. **MCP 服务器未启动**
   - 检查 Node.js 版本 (需要 >= 18.0.0)
   - 确认项目已正确构建 (`npm run build`)
   - 检查配置文件路径是否正确

2. **组件代码生成失败**
   - 确认组件名称拼写正确
   - 检查是否支持所请求的框架
   - 查看 Cursor 的开发者工具控制台

3. **配置不生效**
   - 重启 Cursor
   - 检查 JSON 配置格式是否正确
   - 确认文件路径使用绝对路径

### 日志查看

服务器日志存储在 `logs/mcp-server-antd.log` 文件中：

```bash
tail -f logs/mcp-server-antd.log
```

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

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](LICENSE) 开源协议。

### 这意味着您可以：
- ✅ **商业使用** - 可以在商业项目中使用
- ✅ **修改代码** - 可以修改源代码
- ✅ **分发** - 可以分发原始或修改后的代码
- ✅ **私人使用** - 可以私人使用和修改
- ✅ **专利使用** - 授予专利使用权

### 您需要：
- 📋 **包含许可证** - 在分发时包含原始许可证声明
- 📋 **包含版权信息** - 保留原始版权信息

### 免责声明：
- ⚠️ 软件按"原样"提供，不提供任何形式的保证
- ⚠️ 作者不承担任何责任

MIT 协议是最宽松和流行的开源协议之一，与 Ant Design 官方使用的协议保持一致。

## 🔗 相关链接

- [Ant Design 官网](https://ant.design/)
- [Ant Design Pro](https://pro.ant.design/)
- [Ant Design Charts](https://charts.ant.design/)
- [Model Context Protocol](https://modelcontextprotocol.io/)
- [Cursor 编辑器](https://cursor.sh/)

## 📞 支持

如果您在使用过程中遇到问题，可以：

1. 查看本文档的故障排除部分
2. 提交 GitHub Issue
3. 查看 Ant Design 官方文档

---

**让 AI 助手更懂 Ant Design，让前端开发更高效！** 🎉