工具··

VS Code Copilot 配置 Apifox MCP:让 AI 直接读 API 文档

Apifox 官方未写清 VS Code Copilot 的 MCP 接入步骤。本文给出 mcp.json 配置、鉴权与验证方法,让 Copilot 直接读取 Apifox API 文档。

前言

MCP(Model Context Protocol) 是一种让 AI 助手能够访问外部数据源的协议。Apifox 已经支持 MCP,这意味着我们可以让 GitHub Copilot 直接读取 Apifox 中的 API 文档,在编码时获得更精准的 API 相关建议。

然而,Apifox 的 MCP 官方文档主要介绍了如何在 Claude Desktop 等客户端中配置,并没有说明如何在 VS Code 的 Copilot 中使用。本文将详细介绍完整的配置流程。


前置条件

在开始之前,请确保你已具备以下条件:

  • ✅ 已安装 VS Code
  • ✅ 已安装 GitHub Copilot 扩展
  • ✅ 拥有 Apifox 账号并有项目访问权限
  • ✅ 已安装 Node.js(用于运行 npx 命令)

配置步骤

第一步:获取 Apifox 项目 ID

  1. 登录 Apifox
  2. 进入你想要接入的项目
  3. 在浏览器地址栏中找到项目 ID,格式类似:https://app.apifox.com/project/123456,其中 123456 就是项目 ID

第二步:获取 Apifox API 访问令牌

  1. 点击 Apifox 右上角头像,选择「账号设置」
  2. 进入「API 访问令牌」页面
  3. 点击「新建令牌」,填写名称并创建
  4. 复制并妥善保存生成的令牌(只显示一次!)

第三步:在 VS Code 中配置 MCP

这是本文的核心步骤,Apifox 官方文档中未提及的部分:

  1. 打开 VS Code
  2. 按下 Ctrl + Shift + P(macOS 为 Cmd + Shift + P)唤起命令面板
  3. 输入 MCP: Add Server 并回车
  4. 在弹出的选择框中选择第一个选项:命令 (stdio)
  5. 输入命令:npx
  6. 输入服务器 ID:apifox(如果存在多个 Apifox 文档,需要注意命名避免冲突,如 apifox-user、apifox-order 等)
  7. 选择配置范围:全局 或 本地(根据自己需要选择)
  8. VS Code 会自动打开 mcp.json 配置文件

此时你会看到类似这样的初始配置:

{
  "servers": {
    "apifox": {
      "type": "stdio",
      "command": "npx",
      "args": []
    }
  }
}

第四步:完善 MCP 配置

修改 args 数组并添加 env 环境变量:

{
  "servers": {
    "apifox": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "apifox-mcp-server@latest",
        "--project=你的项目ID"
      ],
      "env": {
        "APIFOX_ACCESS_TOKEN": "你的apifox api访问令牌"
      }
    }
  }
}

第五步:启动 MCP 服务器

配置完成后,点击服务器名称(apifox)上方的 启动 按钮即可启动 MCP 服务器。

配置项说明

配置项说明
type通信类型,stdio 表示通过标准输入输出通信
command执行命令,使用 npx 运行 MCP 服务器
args命令参数,-y 表示自动确认安装,--project 指定项目 ID
env环境变量,存放 API 访问令牌

第六步:验证配置

配置完成后,重启 VS Code。你可以通过以下方式验证 MCP 是否正常工作:

  1. 打开 Copilot Chat(Ctrl + Shift + I)
  2. 切换到 Agent 模式
  3. 尝试询问关于你项目 API 的问题,例如:「列出所有用户相关的 API 接口」

如果配置正确,Copilot 将能够读取你的 Apifox 项目文档并给出准确的回答。


完整配置示例

以下是一个完整的 mcp.json 配置示例:

{
  "servers": {
    "apifox": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "apifox-mcp-server@latest",
        "--project=4721539"
      ],
      "env": {
        "APIFOX_ACCESS_TOKEN": "APS-xxxxxxxxxxxxxxxxxxxxxxxx"
      }
    }
  }
}

常见问题

Q1: 提示找不到 npx 命令?

确保已正确安装 Node.js,并且 npx 命令在系统 PATH 中。可以在终端运行 npx -v 验证。

Q2: MCP 服务器启动失败?

检查以下几点:

  • 项目 ID 是否正确
  • API 访问令牌是否有效
  • 网络是否能访问 Apifox 服务

Q3: Copilot 没有使用 MCP 数据?

确保在 Copilot Chat 中切换到 Agent 模式,而非普通的 Chat 模式。

Q4: 如何配置多个项目?

可以添加多个 MCP 服务器配置,使用不同的名称区分:

{
  "servers": {
    "apifox-project-a": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "apifox-mcp-server@latest", "--project=项目A的ID"],
      "env": {
        "APIFOX_ACCESS_TOKEN": "你的令牌"
      }
    },
    "apifox-project-b": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "apifox-mcp-server@latest", "--project=项目B的ID"],
      "env": {
        "APIFOX_ACCESS_TOKEN": "你的令牌"
      }
    }
  }
}

使用场景

配置完成后,你可以在开发中这样使用:

  • 🔍 查询 API:「帮我找到用户登录的接口」
  • 📝 生成代码:「根据 API 文档生成用户注册的请求函数」
  • 📖 理解接口:「解释一下订单列表接口的返回数据结构」
  • 🔧 调试辅助:「这个接口返回 400 错误可能是什么原因」

总结

通过本文的配置,你可以让 VS Code 中的 GitHub Copilot 直接访问 Apifox 的 API 文档,大大提升 API 相关开发的效率。核心步骤就是通过 Ctrl + Shift + P → MCP: Add Server → 选择命令 (stdio) → 输入 npx → 设置服务器名称 → 完善配置并启动即可。

希望这篇文章能帮助到同样在寻找 VS Code Copilot 配置方法的开发者们!