Skip to content

MCP 开发者指南

模型上下文协议(Model Context Protocol,MCP)是一项开放标准,使 AI 模型能够通过统一接口与外部工具和服务交互。Visual Studio Code 实现了完整的 MCP 规范,使你能够创建 MCP 服务器,为扩展 VS Code 中 AI 代理能力提供工具、提示和资源。

MCP 服务器提供 VS Code 中可用的三类工具之一,另两类是内置工具和插件提供的工具。了解更多工具类型

本指南涵盖构建可与 VS Code 和其他 MCP 客户端无缝协作的 MCP 服务器所需的全部知识。

TIP

有关终端用户如何使用 MCP 服务器的信息,请参阅在 VS Code 中使用 MCP 服务器

为什么使用 MCP 服务器?

实现 MCP 服务器以通过语言模型工具扩展 VS Code Chat,具有以下优势:

  • 扩展代理模式:提供专用的领域工具,在响应用户提示时自动调用。例如,启用数据库脚手架和查询,以动态向 LLM 提供相关上下文。
  • 灵活的部署选项:支持本地和远程场景。
  • 复用:可跨不同工具和平台复用 MCP 服务器。

在以下场景中,可以考虑使用语言模型 API实现语言模型工具:

  • 希望使用插件 API 与 VS Code 深度集成。
  • 希望通过 Visual Studio Marketplace 分发工具及其更新。

VS Code 支持的 MCP 功能

VS Code 支持以下 MCP 能力:

  • 传输方式

    • 本地标准输入/输出(stdio)。
    • 可流式传输的 HTTP(http)。
    • 服务器发送事件(sse),提供旧版支持。
  • 功能

    • 工具:使用额外工具扩展代理模式
    • 提示:在 Chat 中将可复用提示添加为斜杠命令。
    • 资源:提供用户可添加为 Chat 上下文,或直接在 VS Code 中交互的数据和内容。
    • 引导:请求用户输入。
    • 采样:使用用户配置的模型和订阅发出语言模型请求。
    • 身份验证:使用 OAuth 授权访问 MCP 服务器。
    • 服务器说明。
    • 根目录:提供用户工作区根文件夹的信息。
    • MCP 应用:由工具返回交互式 UI 组件。

工具

工具定义

VS Code 在代理模式中支持 MCP 工具,可根据任务需要调用它们。用户可使用工具选择器启用和配置工具。工具说明会显示在工具选择器中,与工具名称并列;在运行工具前请求确认的对话框中也会显示。

代理模式中的 MCP 工具选择器

用户可在工具确认对话框中编辑模型生成的输入参数。未标记 readOnlyHint 注解的所有工具都会显示确认对话框。

MCP 工具输入参数确认对话框

动态工具发现

VS Code 还支持动态工具发现,允许服务器在运行时注册工具。例如,服务器可根据工作区中检测到的框架或语言,或根据用户聊天提示提供不同工具。

工具注解

要为工具行为提供额外元数据,可以使用工具注解

  • title:工具的人类可读标题,在调用工具时显示在 Chat 视图中。
  • readOnlyHint:表示工具为只读的可选提示。VS Code 运行只读工具时不会请求确认。

资源

资源使你能够以结构化方式向用户提供数据和内容。用户可以直接在 VS Code 中访问资源,或将其作为 Chat 提示的上下文。例如,MCP 服务器可以生成屏幕截图并将其作为资源提供,或提供对日志文件的访问,并实时更新这些文件。

定义 MCP 资源后,资源名称会显示在 MCP 资源快速选择中。可通过 MCP: Browse Resources 命令打开资源,或选择 Add Context 后选择 MCP Resource 将资源附加到聊天请求。资源可以包含文本或二进制内容。

MCP 资源快速选择

VS Code 支持资源更新,使用户能够在编辑器中实时查看资源内容的变化。

资源模板

VS Code 还支持资源模板,使用户在引用资源时能够提供输入参数。例如,数据库查询工具可要求输入数据库表名。

使用模板访问资源时,会在快速选择中提示用户输入所需参数。你可以提供补全建议参数值。

提示

提示是可复用的 Chat 提示模板,用户可在 Chat 中使用斜杠命令(mcp.servername.promptname)调用。提示可突出不同工具,或提供适应用户本地上下文和服务的内置复杂工作流,从而帮助用户了解服务器。

如果定义补全以建议提示输入参数的值,VS Code 会显示对话框来收集用户输入。

typescript
server.prompt(
    "teamGreeting", "Generate a greeting for team members",
    {
        name: completable(z.string(), (value) => {
            return ["Alice", "Bob", "Charlie"].filter(n => n.startsWith(value));
        })
    },
    async ({ name }) => ({
        messages: [{
            role: "assistant",
            content: { type: "text", text: `Hello ${name}, welcome to the team!` }
        }]
    })
);

带输入参数的 MCP 提示对话框

NOTE

用户可以在提示对话框中输入终端命令,并将命令输出用作提示输入。

在提示响应中包含资源类型时,VS Code 会将该资源作为上下文附加到 Chat 提示。

授权

VS Code 支持需要身份验证的 MCP 服务器,使用户能够与代表其服务帐户运行的 MCP 服务器交互。

授权规范将 MCP 服务器作为资源服务器与授权服务器清晰分离,使开发人员可将身份验证委托给现有身份提供程序(IdP),而无需从头构建 OAuth 实现。

VS Code 内置支持 GitHub 和 Microsoft Entra 身份验证。如果 MCP 服务器实现最新规范并使用 GitHub 或 Microsoft Entra 作为授权服务器,用户可以通过相应帐户的 Accounts menu > Manage Trusted MCP Servers 操作,管理哪些 MCP 服务器可访问其帐户。

包含管理受信任 MCP 服务器操作的帐户菜单

VS Code 支持使用 OAuth 2.1 和 2.0 标准向 GitHub 和 Microsoft Entra 之外的其他 IdP 授权。VS Code 会先启动动态客户端注册(DCR)握手;如果 IdP 不支持 DCR,则回退到客户端凭据工作流。这使不同 IdP 可以更灵活地相应地为每个 MCP 服务器创建静态客户端 ID 或特定的客户端 ID 与密钥对。

用户还可通过 Accounts menu 查看身份验证状态。要删除动态客户端注册,用户可在命令面板中使用 Authentication: Remove Dynamic Authentication Providers 命令。

以下清单可确保 MCP 服务器和 VS Code 的 OAuth 工作流正常运行:

  1. MCP 服务器定义了 MCP 授权规范
  2. IdP 必须支持 DCR 或客户端凭据。
  3. 重定向 URL 列表必须包含以下 URL:http://127.0.0.1:33418https://vscode.dev/redirect

当 MCP 服务器不支持 DCR 时,用户将使用回退客户端凭据流程:

MCP 服务器不支持 DCR 时的授权

请求 MCP 服务器客户端 ID 时的授权

请求 MCP 服务器客户端密钥时的授权

NOTE

VS Code 仍支持作为授权服务器运行的 MCP 服务器,但建议新服务器使用最新规范。

采样

VS Code 为 MCP 服务器提供采样访问。这样 MCP 服务器可使用用户配置的模型和订阅发出语言模型请求。例如,可使用采样汇总大型数据集、在向客户端发送前提取信息,或在工具中实现代理式决策逻辑。

MCP 服务器首次执行采样请求时,会提示用户授权服务器访问其模型。

允许 MCP 服务器访问模型的授权提示

使用特定模型发出采样请求时,请注意用户可通过命令面板中的 MCP: List Servers > Configure Model Access 命令限制 MCP 服务器可使用的模型。在 MCP 服务器中指定 modelPreferences 来提示用于采样的模型时,VS Code 将从允许的模型中选择。

MCP 服务器的配置模型访问对话框

用户可通过命令面板中的 MCP: List Servers > Show Sampling Requests 命令查看 MCP 服务器发出的采样请求。

工作区根目录

VS Code 向 MCP 服务器提供用户工作区根文件夹信息。

MCP 应用

MCP 应用使工具能够返回交互式 UI 组件,以在 Chat 中内联呈现,而不只是文本输出。这适用于拖放列表重新排序、可视化、表单和多步骤工作流等场景。

架构

MCP 应用使用“工具 + UI 资源”模式:

  1. 定义返回指向 UI 资源的 _meta.ui.resourceUri 的工具。
  2. 使用 ui:// URI 方案和 text/html;profile=mcp-app MIME 类型创建 UI 资源。
  3. HTML 资源在沙盒 iframe 中运行,并使用 MCP Apps SDK 与 VS Code 通信。

SDK

使用 @modelcontextprotocol/ext-apps 包构建 MCP 应用。SDK 提供:

  • App:与宿主通信的主接口。

    • connect():与 VS Code 建立连接。
    • callServerTool(name, args):调用源 MCP 服务器上的工具。
    • sendMessage(content):向 Chat 输入框发送消息。
    • updateModelContext(context):为后续会话轮次提供上下文。
    • openLink(url):请求在浏览器中打开 URL。
    • sendLog(level, message):发送调试日志,不会添加到会话中。
  • 通知处理程序:设置这些处理程序以接收来自 VS Code 的事件。

    • ontoolinput:接收完整工具参数。
    • ontoolinputpartial:接收流式传输的部分参数。
    • ontoolresult:接收工具执行结果。
    • ontoolcancelled:处理工具取消。
    • onhostcontextchanged:响应主题或区域设置变化。
    • onteardown:在卸载前清理。

VS Code 行为和限制

功能VS Code 支持情况
显示模式仅支持 inline,不支持 fullscreenpip
发送消息填充 Chat 输入框,不会自动发送。
上下文更新显示为附件。
写入剪贴板支持。
摄像头、麦克风、地理位置不支持。

安全性

MCP 应用在强制执行内容安全策略(CSP)的沙盒 iframe 中运行。定义 UI 资源时,请声明应用需要访问的域:

  • connectDomains:用于 fetch/XHR 请求的域名。
  • resourceDomains:用于图像、字体和其他资源的域名。
  • frameDomains:可嵌入 iframe 的域名。

了解更多

图标

VS Code 支持 MCP 服务器、资源和工具提供的 icons。MCP 图标具有 src 属性,它是图像的 URI:

  • 使用 HTTP 或 SSE 传输的 MCP 服务器可以从其托管所在的同一授权域提供图像。例如,配置为 https://example.com/mcp 的服务器可从 example.com 提供图像。
  • 使用 stdio 传输的 MCP 服务器可以使用 file:/// URI 从文件系统提供图像。
  • 任何 MCP 服务器都可以嵌入以 data: 开头的数据 URI 图像。

向 VS Code 添加 MCP 服务器

用户可以通过多种方式在 VS Code 中添加 MCP 服务器:

  • 直接从 Web 安装:在网站上使用专用 MCP 安装 URL(vscode:mcp/install)。
  • 工作区配置:在工作区的 .vscode/mcp.json 文件中指定服务器配置。
  • 全局配置:在用户配置文件中全局定义服务器。
  • 自动发现:VS Code 可从 Claude Desktop 等其他工具发现服务器。
  • 插件:VS Code 插件可通过编程方式注册 MCP 服务器。
  • 命令行:使用 VS Code 命令行选项 --add-mcp 从命令行安装 MCP 服务器。

了解向 VS Code 添加 MCP 服务器的不同方式。

管理 MCP 服务器

可从 VS Code 的插件视图(kb(workbench.view.extensions))管理已安装 MCP 服务器列表。

插件视图中的 MCP 服务器

右键单击 MCP 服务器,或选择齿轮图标,对服务器执行不同的管理操作。也可以从命令面板运行 MCP: List Servers 命令查看已配置 MCP 服务器列表,再选择服务器并执行操作。

TIP

打开 .vscode/mcp.json 文件时,VS Code 会在编辑器中显示命令,以便直接从编辑器启动、停止或重启服务器。

带管理 CodeLens 的 MCP 服务器配置

创建 MCP 安装 URL

VS Code 提供 URL 处理程序,可通过链接安装 MCP 服务器:vscode:mcp/install?{json-configuration}(Insiders:vscode-insiders:mcp/install?{json-configuration})。

{\"name\":\"server-name\",\"command\":...} 的形式提供 JSON 服务器配置,然后对其进行 JSON 序列化和 URL 编码。例如,可使用以下逻辑创建安装 URL:

typescript
// 对于 Insiders,请使用 `vscode-insiders` 而非 `code`
const link = `vscode:mcp/install?${encodeURIComponent(JSON.stringify(obj))}`;

该链接可在浏览器中使用,或在命令行中打开,例如在 Linux 上通过 xdg-open $LINK 打开。

在插件中注册 MCP 服务器

要在插件中注册 MCP 服务器,需要执行以下步骤:

  1. 在插件的 package.json 文件中定义 MCP 服务器定义提供程序。
  2. 使用 vscode.lm.registerMcpServerDefinitionProvider API 在插件代码中实现 MCP 服务器定义提供程序。

可以从如何在 VS Code 插件中注册 MCP 服务器的基础示例开始。

1. 在 package.json 中进行静态配置

希望注册 MCP 服务器的插件必须在 package.json 中提供 contributes.mcpServerDefinitionProviders 配置点配置点package.json的一部分,用于配置插件启动命令、用户可更改的插件配置,可以理解为插件的主要配置文件。,并指定提供程序 id。该 id 应与实现中使用的 ID 匹配。

json
{
    ...
    "contributes": {
        "mcpServerDefinitionProviders": [
            {
                "id": "exampleProvider",
                "label": "Example MCP Server Provider"
            }
        ]
    }
    ...
}

2. 实现提供程序

要在插件中注册 MCP 服务器,请使用 vscode.lm.registerMcpServerDefinitionProvider API 提供服务器的 MCP 配置。该 API 接受 providerId 字符串和 McpServerDefinitionProvider 对象。

McpServerDefinitionProvider 对象具有三个属性:

  • onDidChangeMcpServerDefinitions:MCP 服务器配置变更时触发的事件。
  • provideMcpServerDefinitions:返回 MCP 服务器配置数组(vscode.McpServerDefinition[])的函数。
  • resolveMcpServerDefinition:MCP 服务器需要启动时由编辑器调用的函数。可使用此函数执行可能需要用户交互的额外操作,例如身份验证。

McpServerDefinition 对象可以是以下类型之一:

  • vscode.McpStdioServerDefinition:表示通过运行本地进程并操作其 stdin 和 stdout 流提供的 MCP 服务器。
  • vscode.McpHttpServerDefinition:表示通过可流式传输 HTTP 传输方式提供的 MCP 服务器。
MCP 服务器定义提供程序示例

以下示例演示如何在插件中注册 MCP 服务器,并在启动服务器时提示用户输入 API 密钥。

ts
import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    const didChangeEmitter = new vscode.EventEmitter<void>();

    context.subscriptions.push(vscode.lm.registerMcpServerDefinitionProvider('exampleProvider', {
        onDidChangeMcpServerDefinitions: didChangeEmitter.event,
        provideMcpServerDefinitions: async () => {
            let servers: vscode.McpServerDefinition[] = [];

            // 简单 stdio 服务器定义示例
            servers.push(new vscode.McpStdioServerDefinition(
            {
                label: 'myServer',
                command: 'node',
                args: ['server.js'],
                cwd: vscode.Uri.file('/path/to/server'),
                env: {
                    API_KEY: ''
                },
                version: '1.0.0'
            });

            // HTTP 服务器定义示例
            servers.push(new vscode.McpHttpServerDefinition(
            {
                label: 'myRemoteServer',
                uri: 'http://localhost:3000',
                headers: {
                    'API_VERSION': '1.0.0'
                },
                version: '1.0.0'
            }));

            return servers;
        },
        resolveMcpServerDefinition: async (server: vscode.McpServerDefinition) => {

            if (server.label === 'myServer') {
                // 从用户获取 API 密钥,例如使用 vscode.window.showInputBox
                // 使用 API 密钥更新服务器定义
            }

            // 返回 undefined 表示不应启动服务器,或抛出错误
            // 如果存在待处理的工具调用,编辑器将取消它并向语言模型返回错误消息
            return server;
        }
    }));
}

排查和调试 MCP 服务器

VS Code 中的 MCP 开发模式

开发 MCP 服务器时,可在 MCP 服务器配置中添加 dev 键,为 MCP 服务器启用_开发模式_。该对象有两个属性:

  • watch:用于监视文件变更并重启 MCP 服务器的 glob 模式或 glob 模式数组。

  • debug:允许为 MCP 服务器设置调试器。VS Code 当前支持调试 Node.js 和 Python MCP 服务器。

    Node.js MCP 服务器

    要调试 Node.js MCP 服务器,请将 debug.type 属性设置为 node

    json
    {
        "servers": {
            "my-mcp-server": {
                "type": "stdio",
                "command": "node",
                "cwd": "${workspaceFolder}",
                "args": [ "./build/index.js" ],
                "dev": {
                    "watch": "src/**/*.ts",
                    "debug": { "type": "node" }
                }
            }
        }
    }
    Python MCP 服务器

    要调试 Python MCP 服务器,请将 debug.type 属性设置为 debugpy。如果 debugpy 模块未安装在默认 Python 环境中,还可选择将 debug.debugpyPath 属性设置为该模块的路径。

    json
    {
        "servers": {
            "my-python-mcp-server": {
                "type": "stdio",
                "command": "python",
                "cwd": "${workspaceFolder}",
                "args": [ "./server.py" ],
                "dev": {
                    "watch": "**/*.py",
                    "debug": {
                        "type": "debugpy",
                        "debugpyPath": "/path/to/debugpy"
                    }
                }
            }
        }
    }

MCP 输出日志

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

MCP 服务器错误

在聊天视图中选择错误通知,再选择 Show Output 选项以查看服务器日志。或者从命令面板运行 MCP: List Servers,选择服务器后再选择 Show Output

MCP 服务器错误输出

最佳实践

  • 遵循命名约定,确保名称唯一且描述清晰。
  • 实现适当的错误处理和验证,并提供描述性错误消息。
  • 使用进度报告,让用户了解长时间运行的操作。
  • 保持工具操作聚焦且原子化,避免复杂交互。
  • 清晰记录工具文档,说明何时应使用工具。
  • 妥善处理缺少的输入参数,提供默认值或清晰的错误消息。
  • 为资源设置 MIME 类型,确保 VS Code 正确处理不同内容类型。
  • 使用资源模板,使用户访问资源时能够提供输入参数。
  • 缓存资源内容,提高性能并减少不必要的网络请求。
  • 为采样请求设置合理的令牌限制,避免过度占用资源。
  • 在使用采样响应前进行验证

命名约定

建议 MCP 服务器及其组件采用以下命名约定:

组件命名约定准则
工具名称
  • 在 MCP 服务器内唯一。
  • 描述操作及其目标。
  • 使用蛇形命名法,结构为 {verb}_{noun}
  • 示例:generate_reportfetch_dataanalyze_code
工具输入参数
  • 描述参数用途。
  • 多词参数使用 camelCase。
  • 示例:pathqueryStringuserId
资源名称
  • 在 MCP 服务器内唯一。
  • 描述资源内容。
  • 使用标题式大小写。
  • 示例:Application LogsDatabase TableGitHub Repository
资源模板参数
  • 描述参数用途。
  • 多词参数使用 camelCase。
  • 示例:namerepofileType
提示名称
  • 在 MCP 服务器内唯一。
  • 描述提示的预期用途。
  • 多词参数使用 camelCase。
  • 示例:generateApiRouteperformSecurityReviewanalyzeCodeQuality
提示输入参数
  • 描述参数用途。
  • 多词参数使用 camelCase。
  • 示例:filePathqueryStringuserId

开始创建 MCP 服务器

VS Code 拥有开发自己的 MCP 服务器所需的全部工具。虽然任何能够处理 stdout 的语言都可用于编写 MCP 服务器,但 MCP 官方 SDK 是很好的起点:

MCP for Beginners 课程也有助于开始构建第一个 MCP 服务器。

相关内容