AI个人学习
和实操指南
讯飞绘镜

扩展 Copilot Agent 能力:VS Code MCP 配置详解

VS Code 1.99 引入 Model Context Protocol 支持

Visual Studio Code( VS Code )在其 1.99 版本中正式引入了对模型上下文协议(Model Context Protocol, MCP)的支持。 MCP 是一个开放标准,旨在提供一个统一接口,让 AI 模型能够与外部工具和服务进行交互。

MCP 的引入主要是为了增强 GitHub Copilot 的 Agent 模式。通过这个协议,开发者可以配置 MCP 服务器,将自定义的工具和服务接入到 VS Code 的 AI 工作流中,极大地扩展了 AI 助手的潜力,使其能够执行更广泛、更动态的任务,例如查询实时数据、操作本地文件或调用特定的 API


 

前提条件:启用 Agent 模式与环境依赖

VS Code 1.99 将 MCP 集成到了 GitHub Copilot 的 Agent 模式中。因此,要使用 MCP 功能,必须首先启用 Agent 模式。这可以通过 VS Code 的 Chat 视图顶部的下拉菜单来完成。

cf0d32bc-a7f9-4571-bcff-aa366f84fc77.png

另外一个需要注意的地方,也是 MCP 目前面临的一个普遍反馈,就是运行 MCP 服务器可能需要预先安装 Node.js、 Docker 或其他依赖项。这是因为许多 MCP 服务器实现(尤其是用于执行脚本或容器化工具的)依赖这些外部环境。虽然这增加了初始设置的复杂度,但它也提供了连接各种强大自定义工具的灵活性。

 

配置 MCP 服务器

在 VS Code 中,MCP 的核心配置位于工作区(Workspace)的 .vscode/mcp.json 文件内。通过这个 JSON 文件,你可以定义一个或多个 MCP 服务器,Agent 模式将使用这些服务器提供的工具。

步骤 1:创建 MCP 配置文件

  1. 打开你的项目文件夹于 VS Code 中。
  2. 在项目根目录下,找到或创建一个名为 .vscode 的文件夹。
  3. 在 .vscode 文件夹内,创建一个名为 mcp.json 的文件。
  4. 将以下基本配置模板添加到 mcp.json 文件中:
    {
    "servers": {
    "example-server": {
    "type": "stdio",
    "command": "node",
    "args": ["path/to/your/script.js"]
    }
    }
    }
    

    在这个配置中:

    • servers: 一个对象,用于定义所有的 MCP 服务器,每个键是一个唯一的服务器名称(如 "example-server")。
    • type: 指定服务器的通信类型。常见类型包括:
      • stdio: 服务器通过标准输入/输出(Standard Input/Output)与 VS Code 通信,通常用于运行本地脚本或可执行文件。
      • sse: 服务器使用服务器推送事件(Server-Sent Events)进行通信,常用于连接到远程服务或需要持续推送更新的服务。
    • command 和 args: 定义了启动该服务器所需的命令及其参数。在这个例子中,它会使用 Node.js 来运行一个指定的 JavaScript 文件。

步骤 2:添加具体服务器配置

你可以手动编辑 mcp.json 文件来添加服务器,也可以使用 VS Code 命令面板提供的便捷方式:

  1. 打开命令面板(快捷键 Ctrl+Shift+P 或 Cmd+Shift+P)。
  2. 输入并运行 MCP: Add Server 命令。
  3. 选择 Workspace Settings, VS Code 会自动打开或创建 .vscode/mcp.json 文件,并可能提供智能提示(IntelliSense)来帮助你完成配置。

以下是一个配置名为 fetch 的服务器示例,该服务器使用 uvx 命令来运行 mcp-server-fetch 工具,目的是获取指定 URL 的网页内容:

{
"servers": {
"fetch": {
"type": "stdio",
"command": "uvx",
"args": ["mcp-server-fetch"]
}
}
}

981a9ad7-9c62-49b2-b41c-0ddd0c8fba79.png

步骤 3:安全处理敏感信息

在配置文件中硬编码 API 密钥或其他敏感凭证是不安全的。MCP 支持使用输入变量(Input Variables)来处理这种情况。当 VS Code 启动需要这些变量的服务器时,会提示用户输入。

{
"inputs": [
{
"type": "promptString",
"id": "api-key",
"description": "Your API Key",
"password": true
}
],
"servers": {
"perplexity": {
"type": "stdio",
"command": "docker",
"args": ["run", "-i", "--rm", "-e", "PERPLEXITY_API_KEY", "mcp/perplexity-ask"],
"env": {
"PERPLEXITY_API_KEY": "${input:api-key}"
}
}
}
}

在这个例子中:

  • inputs 数组定义了需要用户输入的变量。这里定义了一个 ID 为 api-key 的密码类型输入。
  • password: true 确保输入时内容被隐藏。
  • 在服务器配置的 env 部分,${input:api-key} 语法引用了之前定义的输入变量。VS Code 会负责安全地存储和传递这个值给服务器进程的环境变量 PERPLEXITY_API_KEY

 

使用和管理 MCP 工具

启用 Agent 模式并发现工具

当你正确配置了 .vscode/mcp.json 文件并保存后,切换到 GitHub Copilot 的 Agent 模式(通过 Chat 视图顶部的下拉菜单选择 Agent)。Agent 模式会自动检测并加载配置文件中定义的服务器及其提供的工具。

4af17127-c318-482e-baff-36af8b7e260b.png

调用工具

一旦服务器和工具被 Agent 模式识别,你就可以在 Chat 视图中通过自然语言或特定指令来调用它们。例如:

  • 如果你配置了上面示例中的 fetch 服务器,可以输入:@workspace /fetch https://bytenote.net 来获取该网页的内容。
  • 如果你配置了一个能查询时间的 MCP 服务器,可以尝试问:@workspace What's the time in Saigon?

Agent 会解析你的请求,判断是否需要调用外部工具,并与相应的 MCP 服务器交互以获取结果。

4007a28d-7c12-4467-95ac-e380439e2858.png

管理服务器状态

有时你需要查看已配置服务器的状态或进行管理(启动、停止、查看日志等)。

  1. 打开命令面板(Ctrl+Shift+P 或 Cmd+Shift+P)。
  2. 输入并运行 MCP: List Servers 命令。
  3. 这将打开一个视图,列出所有在 mcp.json 中定义的服务器及其当前状态(例如 StartedStopped)。
  4. 你可以点击列表中的服务器来执行启动、停止或重启等操作,并查看其输出日志,这对于调试服务器配置非常有用。

ba7b278c-f1ce-4637-9a75-cd1a475baa75.png

 

高级配置示例

配置多个服务器

mcp.json 文件可以定义多个服务器,每个服务器提供不同的功能。

{
"inputs": [
{
"type": "promptString",
"id": "perplexity-key",
"description": "Perplexity API Key",
"password": true
}
],
"servers": {
"Perplexity": {
"type": "stdio",
"command": "docker",
"args": ["run", "-i", "--rm", "-e", "PERPLEXITY_API_KEY", "mcp/perplexity-ask"],
"env": {
"PERPLEXITY_API_KEY": "${input:perplexity-key}"
}
},
"Fetch": {
"type": "stdio",
"command": "uvx",
"args": ["mcp-server-fetch"]
},
"RemoteServer": {
"type": "sse",
"url": "http://api.example.com/sse",
"headers": {
"VERSION": "1.2"
}
}
}
}

这个配置定义了三个服务器:

  • Perplexity: 使用 Docker 运行一个工具,可能用于执行复杂的搜索或问答,需要 API 密钥。
  • Fetch: 使用 uvx 运行一个本地工具,用于抓取网页内容。
  • RemoteServer: 连接到一个远程的 SSE 服务端点,可能用于接收实时通知或数据流。注意 sse 类型需要 url 参数,并且可以包含自定义 headers

使用预定义变量

MCP 配置支持一些预定义的变量,方便引用上下文信息。

{
"servers": {
"filesystem": {
"type": "stdio",
"command": "npx",
"args": ["@modelcontextprotocol/server-filesystem", "${workspaceFolder}"]
}
}
}

在这个例子中,${workspaceFolder} 是一个预定义变量,它会被替换为当前 VS Code 打开的工作区的根目录路径。这对于需要访问项目文件的工具非常有用。

通过 MCPVS Code 为开发者打开了一扇门,让 AI 助手能够借助外部工具的力量,更深入地融入到日常开发工作流中。虽然初始配置可能涉及一些环境设置,但其带来的定制化和能力扩展是相当可观的。

未经允许不得转载:首席AI分享圈 » 扩展 Copilot Agent 能力:VS Code MCP 配置详解
zh_CN简体中文