VS Code + Copilot 配置 Apifox MCP 完整指南

前言

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 服务器。

配置项说明

第六步：验证配置

配置完成后，重启 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 配置方法的开发者们！