把 MCP Server 打包进 VS Code extension

大家好!我是韩老师。

本文是 MCP 系列文章的第六篇,之前的五篇是:

写在最前:如果你正好在用 Node.js 开发一个 MCP Server,那么,这篇文章将对你有用!

WHY

首先,你肯定要问,把 MCP Server 打包进 VS Code extension,有什么好处?

好处,有三:

  1. 在 VS Code 中,用户不需要任何配置,就可以直接安装 MCP Server。
  2. 用户不需要安装任何额外的工具来运行 MCP Server。甚至于,用户不需要安装 Node.js/npx。
  3. 整个 MCP Server + VS Code extension 的体积很小。以我的 Code Runner MCP Server 的 VS Code extension 为例,在没有使用 webpack 的情况下,整个体积都只有 4 MB。

HOW

你肯定想要知道,如何做到?

其实,很简单,三步就能搞定!

  1. 在你的 MCP Server 中,export 一个启动 Streamable Http MCP Server 的函数:
复制代码
export async function startMcpServer(transport: Transport, options?: HttpServerOptions): Promise<void | McpServerEndpoint> {
    if (transport === 'stdio') {
        return startStdioMcpServer();
    } else if (transport === 'http') {
        return startStreamableHttpMcpServer(options?.port);
    } else {
        throw new Error('Invalid transport. Must be either "stdio" or "http"');
    }
}
  1. 在 VS Code extension 中,引用你的 MCP Server 的 npm,然后启动 Streamable Http MCP Server,然后得到一个 localhost 的 MCP URL:
复制代码
import { startMcpServer } from "mcp-server-code-runner";

async function startHttpMcpServer(): Promise<string | undefined> {
    const result = await startMcpServer("http", { port: 3098 });

    return result ? result.url : undefined;
}
  1. 把这个 localhost 的 MCP URL,配置到 VS Code 的 settings.json 中:
复制代码
async function updateMcpUrlToVsCodeSettings(mcpUrl: string) {
    const configuration = vscode.workspace.getConfiguration();
    const mcpServers = configuration.get<any>("mcp.servers", {});
    mcpServers["code-runner-streamable-http-mcp-server"] = {
        type: "http",
        url: mcpUrl,
    };
    await configuration.update("mcp.servers", mcpServers, vscode.ConfigurationTarget.Global);
}

好了,大功告成!

原理其实也很简单:因为 VS Code extension,就是一个 Node.js 的程序。MCP Server 作为 VS Code extension 的一部分,一起运行在了 Extension Host 这个进程中。所以,不需要用户的机器上额外安装 Node.js/npx 了!

完整代码,完全开源,欢迎大家围观!

MCP Server:

https://github.com/formulahendry/mcp-server-code-runner

VS Code extension:

https://github.com/formulahendry/vscode-code-runner-mcp-server

大家也可以也可以在 VS Code Marketplace 搜索 Code Runner MCP Server 来直接试用:

注意需要使用最新的 VS Code Insider,版本号 >= 1.100
https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner-mcp-server

相关推荐
为美好的生活献上中指4 天前
《Spring AI MCP 实战全景:AI 股票大师如何用模型上下文协议接入金融数据宇宙——从 JSON-RPC 握手到企业级部署与安全加固》
serverless·mcp·模型上下文协议·promptinjection·toolpoisoning·mcp生态
吴佳浩5 天前
Tool 的安全性与执行沙箱:从 Docker 到 gVisor 的防御架构
agent·ai编程·mcp
GPU实战笔记5 天前
云端 Python 开发:JupyterLab 还是 VS Code Remote-SSH?
python·vs code·jupyterlab·remote-ssh·远程开发
xrlfreedom5 天前
大厂 MCP 面试实录:桌面客户端 stdio Server 调试与提示注入防护方案设计
resources·mcp·提示注入防护
free-elcmacom5 天前
发际线警告!手撕《C陷阱与缺陷》终极 BOSS:signal 函数与 typedef 魔法
c语言·开发语言·visual studio code·visual studio
前端小白乘风5 天前
VS Code 终于能连微信了!发现一个硬核开源神仙插件:WeChat AHP
微信·visual studio code·deepseek
deepseek235 天前
WSO2 Agent Manager 正式可用:企业 Agent 从能跑到可治理,沙盒、身份与 MCP 如何落地
人工智能·ai agent·mcp·企业治理
学电子她就能回来吗5 天前
把自然语言变成可制造 CAD:开源 SolidWorks Automation Skill 的工程化实践
人工智能·python·自动化·solidworks·mcp
吴佳浩6 天前
Function Calling 为什么不够用?深入拆解 MCP 标准协议的设计哲学
agent·ai编程·mcp
吴佳浩6 天前
从零手写一个生产级 MCP Server:鉴权、流式传输与状态管理
agent·ai编程·mcp