Cursor + Apifox MCP：告别手动复制接口，AI 助你高效完成接口文档开发

Cursor + Apifox MCP：告别手动复制接口，AI 助你高效完成接口文档开发

一、写在前面：为什么需要这个方案？

作为前端开发者，你是否遇到过这样的场景：

• 需要联调十几个接口，要一个一个去 接口文档 查找接口信息
• 反复复制粘贴接口路径、入参、返回值
• 手动创建一堆 TypeScript 类型定义
• 导出的接口文档冗余内容太多，AI 查找效果很差

最近我遇到了这样的需求，实在不想继续这种低效的工作方式。突然想到 Apifox 支持 MCP（Model Context Protocol）协议，为什么不让 AI 直接帮我们找接口参数呢？

这个方案不仅能快速获取接口信息，还能生成标准化的 API 文档，作为 Vibe Coding 中打通前后端协作的桥梁。

二、什么是 Apifox MCP Server？

2.1 MCP 协议简介

MCP（Model Context Protocol）是一种使 AI 与外部数据源交互的标准协议。就像是给 AI 应用设定了一个标准接口，让它们能够更轻松地连接各种数据源和工具。

2.2 Apifox MCP Server 的作用

Apifox MCP Server 可以将 Apifox 的接口文档提供给 Cursor 等支持 AI 编程的 IDE，或其他支持 MCP 的 AI 工具。

有了 Apifox MCP Server，开发者可以通过 AI 助手完成：

• ✅ 根据接口文档生成或修改代码
• ✅ 搜索接口文档内容
• ✅ 快速生成 TypeScript 接口定义
• ✅ 自动创建标准化的接口文档
• ✅ 实现"API 文档即代码"的开发理念

三、在 Cursor 中配置 Apifox MCP Server

3.1 前置准备

在开始之前，请确保你已经：

• ✅ 安装 Node.js 环境（版本 ≥ 18，本文使用 NVM 安装 22.13.0）
• ✅ 安装最新版本的 Cursor
• ✅ 有可访问的 Apifox 项目（本文使用 Apifox 2.7.39）

3.2 快速获取 MCP 配置

Apifox 提供了便捷的配置获取方式：

1. 打开 Apifox 应用
2. 进入需要集成的项目
3. 点击"项目设置" → "MCP 集成"
4. 复制生成的配置代码

生成的配置示例：

{
  "mcpServers": {
    "飞书 API copy - API 文档": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "apifox-mcp-server@latest",
        "--project-id=64xxxxxx"
      ],
      "env": {
        "APIFOX_ACCESS_TOKEN": "<access-token>"
      }
    }
  }
}

3.3 获取 Apifox Access Token

如果你使用的是 Windows 系统：

1. 打开 Apifox 应用
2. 鼠标悬停在右上角头像上
3. 点击"账号设置" → "API 访问令牌"
4. 点击"创建令牌"按钮
5. 输入令牌名称（如：Cursor MCP）
6. 复制生成的访问令牌并妥善保存

注意： Access Token 只会显示一次，请务必保存好！

3.4 添加 Cursor MCP 配置

1. 打开 Cursor
2. 点击右上角"设置"图标
3. 选择左侧"MCP"选项
4. 点击"+ Add new global MCP server"按钮
5. 在打开的 mcp.json 文件中粘贴配置
6. 将 <access-token> 替换为你的真实 Token
7. 保存文件并重启 Cursor

3.5 验证 MCP 连接

重要提示： Cursor 必须使用 Agent 模式 才能调用 MCP。

方式一：在 Cursor 中验证

在 Cursor 的聊天框中输入：

调用 飞书 API copy - API 文档 这个 MCP，看一下 MCP 里面包含多少个接口

如果 AI 能够返回项目中的接口数量和信息，说明配置成功！

方式二：手动启动验证（可选）

如需手动测试 MCP 连接，可在 PowerShell 中执行：

$env:APIFOX_ACCESS_TOKEN="APS-dYdfZ5yaSUVAMTb4Yz6pJ7I0ir5f8uoQ"
npx -y apifox-mcp-server@latest --project-id=6471700 --help

四、实际应用场景

4.1 场景一：快速生成 TypeScript 接口定义

需求： 需要为考勤相关接口创建 TypeScript 类型定义。

操作步骤：

在 Cursor 中输入提示词：

通过 MCP 获取 API 文档，查看考勤相关接口的 TypeScript 接口定义，并且补充 JSDoc 注释

AI 输出示例：

/**
 * 班次查询请求参数
 */
interface ShiftQueryRequest {
  /** 班次名称，示例值："早班" */
  shift_name: string;
}

/**
 * 班次信息
 */
interface ShiftInfo {
  /** 班次ID */
  shift_id: string;
  /** 班次名称 */
  shift_name: string;
  /** 打卡次数 */
  punch_times: number;
  /** 是否弹性打卡 */
  is_flexible: boolean;
  /** 弹性打卡时间(分钟) */
  flexible_minutes: number;
  /** 不需要打下班卡 */
  no_need_off: boolean;
  // ... 其他字段
}

/**
 * 班次查询响应
 */
interface ShiftQueryResponse {
  code: number;
  msg: string;
  data: ShiftInfo;
}

4.2 场景二：批量生成标准化接口文档

需求： 根据团队模板，批量生成接口文档。

操作步骤：

1. 准备接口文档模板（如 @api-template.md）
2. 在 Cursor 中输入提示词：

选取 3-5 个考勤相关接口，按照接口文档模板 @api-template.md 生成接口文档

AI 生成的文档示例：

# 飞书考勤 API 文档

## 考勤管理模块

### 1. 按名称查询班次
- **路径**: `/open-apis/attendance/v1/shifts/query`
- **方法**: POST
- **入参**: 
 
  {
    "shift_name": "早班"
  }

- **入参说明**:
  - **shift_name**: 班次名称，字符串类型，必填，示例值："早班"
- **返回值**: 

  {
    "code": 0,
    "msg": "success",
    "data": {
      "shift_id": "6919358778597097404",
      "shift_name": "早班",
      "punch_times": 1,
      "is_flexible": false,
      // ... 其他字段
    }
  }
 

### 2. 创建班次
- **路径**: `/open-apis/attendance/v1/shifts`
- **方法**: POST
- **入参**: 

  {
    "shift_name": "早班",
    "punch_times": 1,
    "is_flexible": false,
    // ... 其他字段
  }
 
- **入参说明**:
  - **shift_name**: 班次名称，字符串类型，必填
  - **punch_times**: 打卡次数，整数类型，必填
  - **is_flexible**: 是否弹性打卡，布尔类型，必填
  // ... 其他字段说明

4.3 场景三：快速查找特定接口

需求： 在大型项目中快速找到支付相关的所有接口。

操作步骤：

通过 MCP 查找所有与支付相关的接口，列出接口路径和主要功能

4.4 场景四：接口文档与代码同步更新

需求： API 文档更新后，同步更新前端代码。

操作步骤：

API 文档已更新，请刷新 MCP 缓存，检查用户模块的接口变更，并更新对应的 TypeScript 类型定义

五、最佳实践与注意事项

5.1 配置建议

1. Token 安全：不要将 Access Token 提交到代码仓库
2. 全局配置：推荐使用全局配置，适用于所有项目
3. 项目配置：如果不同项目使用不同的 Apifox 项目，可使用项目级配置

5.2 使用技巧

1. 明确指定 MCP：在提示词中明确说明"通过 xx项目 MCP 获取"
2. 分批处理：一次处理 3-5 个接口，避免输出过长
3. 模板复用：准备好接口文档模板，提高生成质量
4. 定期同步：API 更新后及时刷新 MCP 缓存

5.3 常见问题

Q: MCP 连接失败怎么办？

• 检查 Node.js 版本是否 ≥ 18
• 确认 Access Token 是否正确
• 确认项目 ID 是否正确
• 重启 Cursor

Q: AI 无法调用 MCP？

• 确保使用的是 Agent 模式
• 在提示词中明确说明"调用 MCP"或"通过 MCP"

Q: Windows 系统配置不生效？

• 使用 cmd /c npx 而不是直接使用 npx
• 确保环境变量配置正确

六、总结

通过 Cursor + Apifox MCP 的组合，我们实现了：

✅ 效率提升 ：告别手动复制粘贴，AI 自动生成代码 ✅ 质量保证 ：基于标准接口文档，减少人为错误 ✅ 团队协作 ：统一的接口文档格式，便于前后端对接 ✅ 持续同步：API 更新后快速同步到代码

这个方案特别适合：

• 需要频繁联调接口的前端开发
• 需要维护大量 TypeScript 类型定义的项目
• 实践 Vibe Coding 的团队
• 追求高效开发体验的开发者

希望这篇文章能帮助你提升接口开发效率，让 AI 成为你的得力助手！

相关文章

• Cursor + Apifox MCP Server：借助 AI 与 API 文档高效编写代码
• 通过 MCP 使用 Apifox 项目内的 API 文档
• 在 Trae 中接入 MCP，连接公开发布的 Apifox API 文档以让 AI 读取接口
• 通过 MCP 使用 OpenAPI/Swagger 文档

---

附录：完整配置文件示例

Windows 系统配置

{
  "mcpServers": {
    "项目名称 - API 文档": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "apifox-mcp-server@latest",
        "--project-id=你的项目ID"
      ],
      "env": {
        "APIFOX_ACCESS_TOKEN": "你的访问令牌"
      }
    }
  }
}

macOS/Linux 系统配置

{
  "mcpServers": {
    "项目名称 - API 文档": {
      "command": "npx",
      "args": [
        "-y",
        "apifox-mcp-server@latest",
        "--project=你的项目ID"
      ],
      "env": {
        "APIFOX_ACCESS_TOKEN": "你的访问令牌"
      }
    }
  }
}