
VSCode + Cline + MCP 读取 API 接口,让 AI 帮忙写代码
本文详细介绍了如何通过MCP(ApifoxMCPServer)将Apifox项目中的API文档与AI助手(如Cursor、VSCode、Trae等IDE)进行集成。首先,确保已安装Node.js 18或更高版本,并准备好API访问令牌和项目ID。接着,文章分步骤指导了在Cursor、VSCode(需安装Cline插件)和Trae编辑器中配置MCP客户端的方法,包括填写mcp.json文件、验证连接
Apifox MCP Server 是一种将 Apifox 项目中的 API 文档提供给 AI 助手(如 Cursor、VSCode、Trae 等 IDE)访问的桥梁。通过配置 MCP,AI 可以读取 API 文档结构,从而帮助你快速生成接口调用代码、文档说明等。
本文将手把手教你如何配置 MCP 客户端,让 AI 无障碍接入你的 Apifox 项目。
一、配置 MCP 客户端
1. 前置准备
在开始配置前,请确保你具备以下条件:
-
✅ 已安装 Node.js 18 或更高版本(建议使用最新 LTS)
-
✅ 使用支持 MCP 的开发工具:
-
Cursor
-
VSCode(需安装 Cline 插件)
-
Trae 编辑器
2. 获取访问令牌与项目 ID
你需要两个关键信息:API 访问令牌
和 项目 ID
,用于授权 AI 访问你的 API 文档。
步骤一:获取 API 访问令牌
-
打开 Apifox,悬停右上角头像,点击「账号设置 → API 访问令牌」
-
创建新的访问令牌,复制并保存
步骤二:获取项目 ID
-
进入你的 Apifox 项目
-
点击左侧边栏的「项目设置」,在基本信息页面复制项目 ID
二、在不同 IDE 中配置 MCP
1. 在 Cursor 中配置
步骤一:打开 MCP 设置
在 Cursor 顶部菜单点击「设置 → MCP → Add new global MCP server」
步骤二:填写配置
打开的 mcp.json
文件中添加如下内容:
macOS / Linux 示例:
{
"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>"
}
}
}
}
请替换 <access-token>
和 <project-id>
为你的真实信息。
步骤三:验证连接
完成配置后,在 AI 中输入:
请通过 MCP 获取 API 文档,并告诉我项目中有几个接口
如果 AI 成功返回项目接口数量,即表示配置完成!
2. 在 VSCode + Cline 中配置
步骤一:安装 Cline 插件
打开 VSCode 插件市场,搜索并安装 "Cline" 插件。
步骤二:配置 MCP Servers
打开 Cline 面板 → 「MCP Servers」→ 「Configure MCP Servers」
填写配置内容,格式与 Cursor 一致。请根据你的操作系统选择合适的格式(见上文)。
步骤三:测试 MCP 配置是否生效
向 AI 输入如下请求验证:
请通过 MCP 获取 API 文档,并告诉我项目中有几个接口
AI 返回接口数据即代表配置成功!
3. 在 Trae 编辑器中配置
步骤一:进入 MCP 配置界面
打开 Trae 编辑器 → AI 侧边栏 → 设置 → MCP → 「+ 添加 MCP Servers」
选择「手动配置」
步骤二:填写 mcp.json
文件
配置内容同样使用以下格式:
macOS / Linux 示例:
{
"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>"
}
}
}
}
步骤三:验证 AI 能否读取接口
如前,输入:
请通过 MCP 获取 API 文档,并告诉我项目中有几个接口
验证连接是否成功:
三、注意事项
-
✅ 确保将
<access-token>
和<project-id>
替换为你自己的真实数据 -
✅ 可配置多个 MCP Server,支持多个项目
-
✅ 如将配置文件同步至代码仓库,请勿提交 access-token。建议使用本地环境变量替代。
私有化部署用户专属配置
如你使用的是私有化部署版本,请在 args 中加入以下参数:
"--apifox-api-base-url=<你的私有部署地址>"
完整示例:
{
"mcpServers": {
"API 文档": {
"command": "npx",
"args": [
"-y",
"apifox-mcp-server@latest",
"--project=<project-id>",
"--apifox-api-base-url=https://apifox.your-company.com"
],
"env": {
"APIFOX_ACCESS_TOKEN": "<access-token>"
}
}
}
}
四、扩展阅读
五、常见问题解答(FAQ)
❓ Windows 系统配置不生效?
请确保使用如下格式(含 cmd /c
):
{
"command": "cmd",
"args": ["/c", "npx", "-y", "apifox-mcp-server@latest", "--project=<project-id>"]
}
❓ Node.js 报版本错误?
运行以下命令检查当前 Node 版本:
node -v
若低于 v18,请升级至最新版本。
❓ API 文档有更新后,AI 仍读取旧数据?
可以手动提示 AI 重新拉取接口文档数据,例如:
请重新读取 API 文档数据,在 Pet DTO 里添加 API 文档新增的几个字段
通过 MCP,将 AI 与 Apifox 项目深度融合,你将体验到真正「所见即所得」的接口开发与文档生成体验!
如需更多帮助,请访问 Apifox 帮助中心。
更多推荐
所有评论(0)