目标：让 Cursor 里的 AI 能“直接看懂”我们 Apifox 里的接口文档，用来生成/修改后端代码、前端接口代码、注释、单测等。下面是描述前端如何引用Apifox接口进行页面开发。、

三个主角是谁？

Cursor

1. 一个支持 AI 编程的 IDE（基于 VS Code）。

2. 内置各种大模型（Claude / GPT 等）。

3. 可以通过 MCP（Model Context Protocol） 直接接入外部数据源和工具，比如数据库、文档、API 平台等。

MCP（Model Context Protocol）

a. 一个开放标准协议，用来让 AI 和各种外部系统沟通。

1. 可以理解成：“AI 版的 USB 接口”——只要实现 MCP，就能很方便地把某个系统接到各种 AI 工具中。

2. 用 MCP 就能让 Cursor 里的 AI 直接读 Apifox 里的接口文档。

Apifox MCP Server

a. 由 Apifox 官方提供的 MCP Server。

1. 作用：把 Apifox 项目中的接口文档，通过 MCP 的方式暴露给 Cursor 等支持 MCP 的 IDE。

2. 配好之后，AI 能做的事情包括但不限于：

• 根据接口文档生成/修改 Model、DTO、Controller、前端请求封装等代码

• 查询接口说明、入参出参字段

• 根据最新接口变更，帮你同步修改代码

前置准备

环境要求：

1. Node.js ≥ 18（推荐 LTS 版本）

2. 一台可以访问：

   • https://www.apifox.cn（或你们的 Apifox 私有化部署地址）

   • https://www.npmjs.com（用来安装 apifox-mcp-server）

3. 已安装好 Cursor。

Apifox 中需要准备的两样东西

在 Apifox 中：

个人访问令牌（Access Token）

作用：授权 MCP Server 代表你访问 Apifox 项目。

项目 ID（Project ID）

MCP Server 需要知道：要拉哪一个 Apifox 项目的接口文档。

3.在 Cursor 中配置 Apifox MCP Server

apifox-mcp-server 集成使用文档：https://github.com/apifox/apifox-mcp-server

1. 建议用官方提供的MCP

b.配置apifox 的mcp.json文件

c.上图我把配置写死了，团队共用ID和token就把配置改成变量

4.在 Cursor 中如何验证配置成功？

配置完后启动mcp，出现该提示Found 3 tools,0prompts,and 0resources说明，apifox已集成成功；出现Found 0 tools,0prompts,and 0resources说明mcp启动成功但为apifox未连接成功。

下图示例是连接成功示例：

5.如何使用

在AI对话框输入：

请用 apifox这个 MCP 帮我看看 Apifox 里有没有/fin/payment-request-order/page接口

或者

请用 apifox 这个 MCP 帮我看看 Apifox 里有没有/fin/payment-request-order/page接口，并根据接口文档实现请款单分页页面

读取apifox接口，并读取规范：

根据api规范和字段创建文件

最终根据API生成的页面：

总结：

利用 MCP 集成 Apifox，可以显著提升项目规范性与研发效率。只要团队在开发前明确接口规范，前后端就能基于统一的文档描述，让 AI 自动生成对应的代码结构、类型定义、请求封装甚至单测。不但能高效完成任务，还能减少反复沟通、避免理解偏差，大幅降低时间成本。