🚀 在 VS Code 中获取

在 VS Code 中使用 MCP 服务器 (预览版)

模型上下文协议 (MCP) 是一种开放标准,使 AI 模型能够通过统一的接口与外部工具和服务进行交互。在 VS Code 中,MCP 支持通过允许您将任何 MCP 兼容的服务器连接到您的代理编码工作流程,从而增强 GitHub Copilot 的代理模式。本文将指导您完成在 Visual Studio Code 中设置 MCP 服务器和使用代理模式工具的过程。

注意

VS Code 中代理模式下的 MCP 支持目前处于预览阶段。

什么是 MCP?

模型上下文协议 (MCP) 为 AI 模型发现和与外部工具、应用程序和数据源交互提供了一种标准化的方式。当您在 VS Code 中向具有代理模式的语言模型输入聊天提示时,模型可以调用各种工具来执行任务,例如文件操作、访问数据库或调用 API 以响应您的请求。

MCP 遵循客户端-服务器架构

  • MCP 客户端(如 VS Code)连接到 MCP 服务器并代表 AI 模型请求操作
  • MCP 服务器提供一个或多个工具,这些工具通过明确定义的接口公开特定功能
  • 模型上下文协议 (MCP) 定义了客户端和服务器之间通信的消息格式,包括工具发现、调用和响应处理

例如,文件系统 MCP 服务器可能提供用于读取、写入或搜索文件和目录的工具。GitHub 的 MCP 服务器提供用于列出存储库、创建拉取请求或管理问题的工具。MCP 服务器可以在您的机器本地运行或远程托管,VS Code 支持这两种配置。

通过标准化这种交互,MCP 消除了每个 AI 模型和每个工具之间进行自定义集成的需要。这允许您通过简单地将新的 MCP 服务器添加到您的工作区来扩展 AI 助手的 capabilities。了解有关 模型上下文协议规范 的更多信息。

支持的 MCP 功能

VS Code 支持本地标准输入/输出 (stdio) 和服务器发送事件 (sse) 用于 MCP 服务器传输。目前在 3 个原语toolspromptsresources)中,服务器只能向 Copilot 的代理模式提供 tools。工具的列表和描述可以使用列表已更改事件动态更新。VS Code 使用 roots (规范) 向服务器提供当前工作区文件夹。

查找 MCP 服务器

MCP 的 官方服务器存储库 是参考、官方和社区贡献服务器的绝佳起点,这些服务器展示了 MCP 的多功能性。您可以探索各种功能的服务器,例如文件系统操作、数据库交互和 Web 服务。

MCP 仍然是一个相对较新的标准,并且生态系统正在迅速发展。随着越来越多的开发人员采用 MCP,您可以期望看到越来越多的服务器和工具可用于与您的项目集成。

添加 MCP 服务器

要将 MCP 服务器添加到您的工作区,请按照以下步骤操作(请参阅下文了解如何将服务器添加到您的用户设置)

  1. 在工作区的 .vscode/mcp.json 文件中配置 MCP 服务器,以与项目协作者共享配置。请务必避免硬编码敏感信息(如 API 密钥和其他凭据),方法是使用输入变量或环境变量文件。

    在您的工作区中创建一个 .vscode/mcp.json 文件,然后选择添加服务器按钮以添加新服务器的模板。VS Code 为 MCP 服务器配置文件提供 IntelliSense。

    或者,从命令面板运行 MCP: 添加服务器 命令,并提供服务器信息以添加新的 MCP 服务器配置。如果您的工作区中尚不存在 .vscode/mcp.json 文件,请选择工作区设置以创建该文件。

    以下示例展示了如何配置 Perplexity MCP 服务器,其中 VS Code 会在服务器启动时提示您输入 API 密钥。了解有关 配置格式 的更多信息。

    {
      // 💡 Inputs are prompted on first server start, then stored securely by VS Code.
      "inputs": [
        {
          "type": "promptString",
          "id": "perplexity-key",
          "description": "Perplexity API Key",
          "password": true
        }
      ],
      "servers": {
        // https://github.com/ppl-ai/modelcontextprotocol/
        "Perplexity": {
          "type": "stdio",
          "command": "npx",
          "args": ["-y", "@modelcontextprotocol/server-perplexity-ask"],
          "env": {
            "PERPLEXITY_API_KEY": "${input:perplexity-key}"
          }
        }
      }
    }
    
  2. 或者,在 mcp VS Code 用户设置 中指定服务器,以在所有工作区中启用 MCP 服务器。

    如果您从命令面板中使用 MCP: 添加服务器 命令,请选择用户设置以在用户设置中添加新的 MCP 服务器配置。

  3. VS Code 可以自动检测和重用您在其他工具(如 Claude Desktop)中定义的 MCP 服务器。使用 chat.mcp.discovery.enabled 设置启用自动发现。

  4. 从命令面板运行 MCP: 列出服务器 命令以查看和管理配置的 MCP 服务器。

配置格式

使用以下 JSON 配置格式来定义 MCP 服务器。

  • "servers": {} 字段包含 MCP 服务器的列表,并遵循 Claude Desktop 的配置格式。

    将服务器名称指定为键,并将服务器配置作为值提供。VS Code 在 MCP 服务器列表中显示服务器名称。

    在服务器配置中提供以下字段。您可以使用 预定义变量 在服务器配置中,例如引用工作区文件夹 (${workspaceFolder})。

    使用 stdio 连接

    字段 描述 示例
    type 服务器连接类型。 "stdio"
    command 启动服务器可执行文件的命令。 "npx""node""python""docker"
    args 传递给命令的参数数组。 ["server.py", "--port", "3000"]
    env 服务器的环境变量。 {"API_KEY": "${input:api-key}"}
    envFile 从中加载其他环境变量的 .env 文件的路径。 "${workspaceFolder}/.env"

    使用 sse 连接

    字段 描述 示例
    type 服务器连接类型。 "sse"
    url 服务器的 URL(对于 "type": "sse")。 "https://127.0.0.1:3000"
    headers 服务器的 HTTP 标头(对于 "type": "sse")。 {"API_KEY": "${input:api-key}"}
  • "inputs": [] 字段允许您定义配置值的自定义占位符,从而避免硬编码敏感信息。

    VS Code 会在服务器首次启动时提示您输入这些值,并安全地存储它们以供后续使用。要避免显示键入的值,请将 password 字段设置为 true

    了解有关如何在 VS Code 中配置 输入变量 的更多信息。

配置示例

以下代码片段显示了一个 MCP 服务器配置示例,该示例指定了三个服务器并定义了 API 密钥的输入占位符。

// Example .vscode/mcp.json
{
  // 💡 Inputs will be prompted on first server start,
  //    then stored securely by VS Code.
  "inputs": [
    {
      "type": "promptString",
      "id": "perplexity-key",
      "description": "Perplexity API Key",
      "password": true
    }
  ],
  "servers": {
    // https://github.com/ppl-ai/modelcontextprotocol/
    "Perplexity": {
      "type": "stdio",
      "command": "docker",
      "args": ["run", "-i", "--rm", "-e", "PERPLEXITY_API_KEY", "mcp/perplexity-ask"],
      "env": {
        "PERPLEXITY_API_KEY": "${input:perplexity-key}"
      }
    },
    // https://github.com/modelcontextprotocol/servers/tree/main/src/fetch
    "fetch": {
      "type": "stdio",
      "command": "uvx",
      "args": ["mcp-server-fetch"]
    },
    "my-remote-server": {
      "type": "sse",
      "url": "http://api.contoso.com/sse",
      "headers": { "VERSION": "1.2" }
    }
  }
}

在代理模式下使用 MCP 工具

添加 MCP 服务器后,您可以在代理模式下使用它提供的工具。要在代理模式下使用 MCP 工具

  1. 打开聊天视图(⌃⌘I (Windows, Linux Ctrl+Alt+I)),然后从下拉列表中选择代理模式。

    Agent mode dropdown option

  2. 选择工具按钮以查看可用工具列表。

    或者,选择或取消选择要使用的工具。您可以通过在搜索框中键入内容来搜索工具。

    MCP tools list

    提示

    您还可以在提示中直接引用工具,方法是键入 #,后跟工具名称。您可以在所有聊天模式(提问、编辑和代理模式)下执行此操作。

  3. 您现在可以在聊天输入框中输入提示,并注意工具是如何根据需要自动调用的。

    默认情况下,当调用工具时,您需要先确认操作,然后才能运行它。这是因为工具可能在您的机器本地运行,并且可能执行修改文件或数据的操作。

    使用继续按钮下拉选项自动确认当前会话、工作区或所有未来调用的特定工具。

    MCP Tool Confirmation

  4. 或者,在运行工具之前验证和编辑工具输入参数。

    选择工具名称旁边的 chevron 以查看其详细信息和输入参数。您可以在运行工具之前编辑输入参数。

    MCP Tool Input Parameters

管理工具

从命令面板运行 MCP: 列出服务器 命令以查看配置的 MCP 服务器列表。

MCP server list

当您选择服务器时,您可以启动、停止或重新启动服务器。您还可以查看服务器配置和服务器日志以诊断问题。

提示

当您打开 .vscode/mcp.json 文件时,VS Code 会直接从编辑器显示用于启动、停止或重新启动服务器的命令。

MCP server configuration with lenses to manage server.

命令行配置

您还可以使用 VS Code 命令行界面将 MCP 服务器添加到您的用户配置文件或工作区。

要将 MCP 服务器添加到您的用户配置文件,请使用 --add-mcp 命令行选项,并以 {\"name\":\"server-name\",\"command\":...} 形式提供 JSON 服务器配置。

code --add-mcp "{\"name\":\"my-server\",\"command\": \"uvx\",\"args\": [\"mcp-server-fetch\"]}"

URL 处理程序

VS Code 还包含一个 URL 处理程序,您可以使用它来安装 MCP 服务器。要形成 URL,请构造一个 obj 对象,其格式与您提供给 --add-mcp 的格式相同,然后使用以下逻辑创建链接

// For Insiders, use `code-insiders` instead of `code`
const link = `code:mcp/install?${encodeURIComponent(JSON.stringify(obj))`;

此链接可以在浏览器中使用,也可以在命令行中打开,例如通过 Linux 上的 xdg-open $LINK

故障排除

当 VS Code 遇到 MCP 服务器问题时,它会在聊天视图中显示错误指示器。

MCP Server Error

在聊天视图中选择错误通知,然后选择显示输出选项以查看服务器日志。或者,从命令面板运行 MCP: 列出服务器,选择服务器,然后选择显示输出

MCP Server Error Output

创建 MCP 服务器

VS Code 拥有开发您自己的 MCP 服务器所需的所有工具。虽然 MCP 服务器可以使用任何可以处理 stdout 的语言编写,但 MCP 的官方 SDK 是一个不错的起点

常见问题解答

我可以控制使用哪些 MCP 工具吗?

是的,您有多种选项来控制哪些工具处于活动状态

  • 在代理模式下,选择聊天视图中的工具按钮,并根据需要切换特定工具的开/关。
  • 通过使用添加上下文按钮或键入 #,将特定工具添加到您的提示。
  • 为了更高级的控制,您可以使用 .github/copilot-instructions.md 来微调工具的使用。