Bundle MCP Server into VS Code extension

#mcp #vscode #node #typescript

If you are building MCP Server with Node.js, then you could bundle it into VS Code extension.

Why

You would ask why we need to do this?

There would be 3 benefits:

Zero setup for end users to install MCP Server
No extra toolchain is needed for users to install. User do not even need to install Node.js, since the MCP Server is running as part of VS Code extension in Extension Host process.
Total bundle size is small. In my Code Runner MCP Server extension, just 4 MB size in total.

How

Just 3 steps are needed!.

1) In your Node.js MCP Server, expose an API to start as 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"');
    }
}

2) In your VS Code extension, reference your MCP Server npm and start Streamable Http MCP Server, then you will get a localhost MCP Server 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) In your VS Code extension, update the endpoint of Streamable HTTP MCP Server into 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);
}