快捷導(dǎo)航

把 MCP Server 打包進(jìn) VS Code extension

更新時(shí)間：2025年05月01日 11:31:18 作者：formulahendry

文章介紹了如何將MCPServer打包進(jìn)VSCode extension,使得用戶可以在VSCode中直接安裝和運(yùn)行MCPServer,而無(wú)需額外配置和工具

WHY

首先，你肯定要問(wèn)，把 MCP Server 打包進(jìn) VS Code extension，有什么好處？

好處，有三：

在 VS Code 中，用戶不需要任何配置，就可以直接安裝 MCP Server。用戶不需要安裝任何額外的工具來(lái)運(yùn)行 MCP Server。甚至于，用戶不需要安裝 Node.js/npx。整個(gè) MCP Server + VS Code extension 的體積很小。以我的 Code Runner MCP Server 的 VS Code extension 為例，在沒(méi)有使用 webpack 的情況下，整個(gè)體積都只有 4 MB。

HOW

你肯定想要知道，如何做到？

其實(shí)，很簡(jiǎn)單，三步就能搞定！

1. 在你的 MCP Server 中，export 一個(gè)啟動(dòng) Streamable Http MCP Server 的函數(shù)：

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"');
    }
}

2. 在 VS Code extension 中，引用你的 MCP Server 的 npm，然后啟動(dòng) Streamable Http MCP Server，然后得到一個(gè) 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;
}

3. 把這個(gè) 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);
}

好了，大功告成！

原理其實(shí)也很簡(jiǎn)單：因?yàn)?VS Code extension，就是一個(gè) Node.js 的程序。MCP Server 作為 VS Code extension 的一部分，一起運(yùn)行在了 Extension Host 這個(gè)進(jìn)程中。所以，不需要用戶的機(jī)器上額外安裝 Node.js/npx 了！

完整代碼，完全開(kāi)源，歡迎大家圍觀！

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 來(lái)直接試用：

注意需要使用最新的 VS Code Insider，版本號(hào) >= 1.100

https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner-mcp-server

到此這篇關(guān)于把 MCP Server 打包進(jìn) VS Code extension的文章就介紹到這了,更多相關(guān)MCP Server 打包進(jìn) VS Code擴(kuò)展內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: