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

Trae

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 부조종사 的 Agent 模式中。因此,要使用 MCP 功能,必须首先启用 Agent 模式。这可以通过 VS Code 的 Chat 视图顶部的下拉菜单来完成。

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

另外一个需要注意的地方,也是 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"]
}
}
}
扩展 Copilot Agent 能力:VS Code MCP 配置详解

步骤 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 模式会自动检测并加载配置文件中定义的服务器及其提供的工具。

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

调用工具

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

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

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

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

管理服务器状态

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

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

 

高级配置示例

配置多个服务器

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 助手能够借助外部工具的力量,更深入地融入到日常开发工作流中。虽然初始配置可能涉及一些环境设置,但其带来的定制化和能力扩展是相当可观的。

© 저작권 정책
AiPPT

관련 문서

댓글 없음

없음
댓글 없음...