把 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

相关推荐
deephub5 小时前
5个开源MCP服务器:扩展AI助手能力,高效处理日常工作
人工智能·深度学习·大语言模型·mcp
Ai野生菌5 小时前
MCP专题 | 探索MCP服务器世界:增强AI能力的精选推荐
服务器·人工智能·mcp·mcp server
带刺的坐椅9 小时前
100% 自主可控,Java Solon v3.3.1 发布(国产优秀应用开发基座)
java·spring·ai·信创·solon·mcp
魔术师ID1 天前
vue2.0 组件生命周期
前端·javascript·vue.js·学习·visual studio code
带刺的坐椅2 天前
高德地图 MCP,可用 Java SolonMCP 接入(支持 java8, java11, java17, java21)
java·ai·solon·高德地图·lbs·mcp
MingT 明天你好!2 天前
在vs code 中无法运行npm并报无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查
前端·npm·node.js·visual studio code
csdn5659738502 天前
中国版 Cursor---腾讯云 CodeBuddy | 从安装VSCode到数独小游戏问世
腾讯云·mcp·mcp server·codebuddy首席试玩官·mcp头号玩家
梦醒沉醉2 天前
MCP(一)——QuickStart
python·mcp
勇敢牛牛_3 天前
使用Rust开发的智能助手系统,支持多模型、知识库和MCP
ai·rust·rag·mcp
AI大模型系统化学习3 天前
Excel MCP: 自动读取、提炼、分析Excel数据并生成可视化图表和分析报告
人工智能·ai·大模型·ai大模型·大模型学习·大模型入门·mcp