Cursor + Apifox MCP Server:借助 AI 与 API 文档高效编写代码

通过将 Apifox MCP Server 与支持 AI 编程的 IDE(Cursor、VSCode + Cline 等)集成,可以实现一个突破性的工作流:让 AI 能够直接读取、理解并利用最新的 API 规范文档,从而将"API 文档即代码"的理念变为现实。

用 Apifox,节省研发团队的每一分钟

Cursor + Apifox MCP Server:借助 AI 与 API 文档高效编写代码

免费使用 Apifox

相关推荐

最新文章

API

一体化协作平台

API 设计

API 文档

API 调试

自动化测试

API Mock

API Hub

立即体验 Apifox
目录

在软件开发领域,API 已成为系统间通信的标准方式,而 AI 辅助编程正在改变我们的开发流程。


通过将 Apifox MCP Server 与支持 AI 编程的 IDE(Cursor、VSCode + Cline 等)集成,可以实现一个突破性的工作流:让 AI 能够直接读取、理解并利用最新的 API 规范文档,从而将"API 文档即代码"的理念变为现实。


本文将详细介绍我是如何在 Cursor 中连接 Apifox MCP Server 的,并展示这种结合如何显著提升开发效率、准确性和一致性。

什么是 Apifox MCP Server?

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


使用 Apifox MCP Server,可以将 Apifox 项目内的接口文档作为数据源提供给 Cursor 等支持 AI 编程的 IDE 工具,以便让 AI 能够直接访问项目对应的接口文档数据。


开发者可以通过 AI 助手完成以下工作:根据接口文档生成或修改代码、搜索接口文档内容等等,至于通过这个接口文档数据能让 AI 干什么更多更强大的活,请发挥你和你们团队的想象力。

Cursor + Apifox MCP Server:通过 API 文档来编写代码


在 Cursor 中配置 Apifox MCP Server

1. 前置准备

  • 确保你已安装 Node.js 环境(版本 ≥ 18,推荐使用最新的 LTS 版本)
  • 安装最新版本的 Cursor
  • 有可访问的 Apifox 项目


Apifox MCP Server 支持以下三种不同的使用场景,可以根据不同场景选择对应的配置方法:


通过 MCP 使用 Apifox 项目内的 API 文档:


通过 MCP 使用公开发布的 API 文档:

  • 适用场景:使用 AI 读取别人公开发布的 API 文档,让自己团队外的开发者,即 API 的调用方,通过 AI 读取自己团队公开发布的 API 文档
  • 特点:无需 Apifox 个人访问令牌。仅支持公开发布、任何人都可以直接访问的在线文档,不支持设置了密码、邮箱白名单、IP 白名单的在线文档。如果不希望公开接口文档,仅仅是内部人员可以访问,建议使用项目 ID 和个人访问令牌读取 Apifox 项目数据
  • 具体配置方法,请查看:通过 MCP 使用公开发布的 API 文档


通过 MCP 使用 OpenAPI/Swagger 文档:

  • 适用场景:使用 AI 读取本地或线上的 Swagger/OpenAPI 文件
  • 特点:不依赖 Apifox 项目或在线文档,无需 Apifox 个人访问令牌
  • 具体配置方法,请查看:通过 MCP 使用 OpenAPI/Swagger 文档


2. 获取必要的凭证


1)获取 Apifox Access Token

  • 打开 Apifox 应用
  • 将鼠标悬停在右上角头像上,点击 “账号设置 → API 访问令牌”
  • 创建一个新的 API 访问令牌并保存
Cursor + Apifox MCP Server:通过 API 文档来编写代码


2)获取 Apifox 项目 ID

  • 打开需要连接的 Apifox 项目
  • 在左侧边栏点击 “项目设置”
  • 在 “基本设置” 页面中复制项目 ID
Cursor + Apifox MCP Server:通过 API 文档来编写代码


3. 配置 Cursor 的 MCP 设置

你可以通过两种方式配置 Cursor 的 MCP:全局配置或项目配置。


方式一:全局配置(推荐)
1)打开 Cursor,点击右上角「设置」图标,选择左侧「MCP」选项,然后点击「+ Add new global MCP server」按钮。

Cursor + Apifox MCP Server:通过 API 文档来编写代码

2)在打开的 mcp.json 文件中添加以下配置,注意替换 <access-token><project-id> 为你自己的值:

{
  "mcpServers": {
    "API 文档": {
      "command": "npx",
      "args": [
        "-y",
        "apifox-mcp-server@latest",
        "--project=<project-id>"
      ],
      "env": {
        "APIFOX_ACCESS_TOKEN": "<access-token>"
      }
    }
  }
}


如果你使用的是 Windows 系统,可能需要使用这个配置:

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


方式二:项目特定配置1)在你的项目根目录下创建 .cursor 文件夹(如果不存在)2)在此文件夹中创建 mcp.json 文件3)使用与上面相同的配置

4. 验证 MCP 连接

配置完成后,你可以通过向 AI 询问以验证连接是否正常工作(Agent 模式),例如:

请通过 MCP 获取 API 文档,并告诉我项目中有几个接口

如果 AI 能够返回你 Apifox 项目中的 API 信息,说明连接成功。

Cursor + Apifox MCP Server:通过 API 文档来编写代码


实际应用场景:让 AI + API 开发更高效


下面我们来看一些将 Apifox MCP Server 与 Cursor 结合使用的实际场景:

场景一:快速生成模型代码

假设你正在开发一个电商应用,API 文档中已经定义了产品相关的接口和数据结构。


步骤:

1)打开 Cursor 并创建一个新项目

2)向 AI 发出如下请求:

通过 MCP 获取 API 文档,然后为产品相关 API 生成完整的 TypeScript 接口定义和服务类


AI 将:

1)通过 MCP 读取你的 API 文档

2)分析产品相关的接口和数据结构

3)生成符合你 API 规范的 TypeScript 接口和服务类代码


示例输出可能是这样的:

Cursor + Apifox MCP Server:通过 API 文档来编写代码

 

场景二:接口文档与代码同步更新

当 API 文档有更新时,需要同步更新代码。


步骤:

1)在 Apifox 中更新产品 API,添加新字段 discountPrice

2)向 AI 请求更新代码:

API 文档已更新,请刷新 MCP 缓存,并更新 Product 接口,添加 API 文档中新增的字段


AI 将:

1)刷新 MCP 缓存以获取最新的 API 文档

2)识别出新增的 discountPrice 字段

3)更新你的 Product 接口代码
示例:

export interface Product {
  id: string;
  name: string;
  description: string;
  price: number;
  discountPrice?: number; // 新增字段
  category: string;
  imageUrls: string[];
  inStock: boolean;
  createdAt: string;
  updatedAt: string;
}


场景三:根据 API 生成完整的 CRUD 操作

对于后端开发者,可以根据 API 文档自动生成完整的 Controller、Service 和 Repository 代码。


步骤:要求 AI 生成代码:

根据 API 文档,为用户管理模块生成完整的 Spring Boot MVC 代码,包括 Controller、Service 和 Repository

AI 将生成符合你 API 规范的完整 Spring Boot 代码结构。

场景四:API 文档搜索与问答

你可以使用 AI 来搜索和理解复杂的 API 文档。


示例查询:

在 API 文档中,查找与支付相关的所有接口,并解释它们的关系和使用流程


AI 会:1)通过 MCP 搜索 API 文档中与支付相关的接口

2)分析这些接口之间的关系

3)以易于理解的方式解释支付流程

场景五:根据 API 自动生成测试用例


步骤:请求 AI 生成测试代码:

根据 MCP 中的 API 文档,为产品创建接口生成完整的单元测试和集成测试代码,使用 Jest 框架

AI 将生成符合你 API 规范的测试代码,包括正常情况和各种边界条件的测试。

高级技巧与最佳实践

1. 管理多个 API 项目

如果你需要在同一个开发环境中使用多个 Apifox 项目的 API 文档,可以在 MCP 配置中添加多个服务:

{
  "mcpServers": {
    "商城 API 文档": {
      "command": "npx",
      "args": [
        "-y",
        "apifox-mcp-server@latest",
        "--project=123456"
      ],
      "env": {
        "APIFOX_ACCESS_TOKEN": "<access-token>"
      }
    },
    "CRM API 文档": {
      "command": "npx",
      "args": [
        "-y",
        "apifox-mcp-server@latest",
        "--project=654321"
      ],
      "env": {
        "APIFOX_ACCESS_TOKEN": "<access-token>"
      }
    }
  }
}


在向 AI 提问时,明确指定你想使用哪个 API 文档:

请使用商城 API 文档,为订单管理模块生成代码


2. 安全性最佳实践

为避免在团队协作时共享 Access Token,可以:

1)从配置文件中移除 "APIFOX_ACCESS_TOKEN": "<access-token>" 部分

2)在每个开发者的系统中设置环境变量 APIFOX_ACCESS_TOKEN


3. 提高 AI 响应质量的提示技巧

  • 明确指定需要的文档部分:例如,"请查看用户模块的 API 文档"
  • 指定代码风格和约定:例如,"按照我们团队的 TypeScript 命名规范生成代码"
  • 要求添加注释:例如,"生成代码时,为每个方法添加详细的 JSDoc 注释"
  • 分步请求:对于复杂任务,先请求 AI 列出计划,然后一步步执行

结语

Apifox MCP Server 与 Cursor 结合使用,为开发者提供了前所未有的 API 开发体验。通过让 AI 直接访问 API 文档,你可以:


1)大幅减少从 API 规范到代码实现的转换时间

2)降低人工错误的可能性

3)加速迭代和更新过程

4)提高代码质量和一致性


随着 Apifox MCP Server 的不断完善,我们可以期待更多强大的功能来优化 API 开发流程。无论是前端还是后端开发者,这种 AI 与 API 文档的结合都将带来显著的生产力提升。