MCP の TypeScript SDK で Streamable HTTP transport対応の自作MCPサーバーを作って VS Code（GitHub Copilot）から使う

はじめに

この記事は、以下で軽く試していた「Streamable HTTP transport対応の MCPサーバー」に関する話です。

●MCP の TypeScript SDK と最新の VS Code（GitHub Copilot）で Streamable HTTP transport を試す - Qiita
　https://qiita.com/youtoy/items/f93684d742d4a3da27b6

上記の記事では、VS Code の GitHub Copilot（エージェントモード）で MCPサーバーを使う構成だったのですが、その時の MCPサーバーは公式が公開している下記をそのまま使っていました。

●typescript-sdk/src/examples/server/simpleStreamableHttp.ts at main · modelcontextprotocol/typescript-sdk
　https://github.com/modelcontextprotocol/typescript-sdk/blob/main/src/examples/server/simpleStreamableHttp.ts

今回の内容

今回の内容は、Streamable HTTP transport に対応した MCPサーバーをシンプルな内容で自作するというものです（※ 前に標準入出力での通信を使う MCPサーバーは、シンプルな内容での自作を試していました）。

Streamable HTTP transport に対応した自作MCPサーバーを使うホスト・クライアント側については、今回も VS Code の GitHub Copilot（エージェントモード）を用います。

試す手順

下準備

今回の下準備で、以下のパッケージをインストールします。

npm i @modelcontextprotocol/sdk

自作MCPサーバー

次は自作MCPサーバーです。

前に作った標準入出力での通信を使う自作MCPサーバーは、以下の内容でした。

ツールの部分は、これと同じ内容（「足し算をして、さらに 10 を加算する」という処理）にします。そして、標準入出力を使う処理をしていた部分を、Streamable HTTP transport を用いる処理にします。

以下が用いたコードです。サーバーの部分は express を使うのが本当は良さそうですが、今回は Node.js の標準モジュールで実装してみました。

import { createServer } from "http";
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js";
import { z } from "zod";

const transport = new StreamableHTTPServerTransport({
  sessionIdGenerator: undefined,
});
const mcpServer = new McpServer({
  name: "my-server",
  version: "0.0.1",
});

// 足し算してさらに10を加えるツール
mcpServer.tool(
  "add_test",
  "与えられた数値の足し算をする（さらに10を足す）",
  { a: z.number(), b: z.number() },
  async ({ a, b }) => ({
    content: [{ type: "text", text: String(a + b + 10) }],
  })
);

await mcpServer.connect(transport);

const PORT = process.env.PORT || 3000;
createServer((req, res) => {
  if (req.method === "POST" && req.url === "/mcp") {
    let body = "";
    req.on("data", (chunk) => (body += chunk));
    req.on("end", async () => {
      try {
        const json = JSON.parse(body);
        await transport.handleRequest(req, res, json);
      } catch (err) {
        console.error("MCP error:", err);
        res.writeHead(500, { "Content-Type": "application/json" });
        res.end(
          JSON.stringify({
            jsonrpc: "2.0",
            error: { code: -32603, message: "Internal server error" },
            id: null,
          })
        );
      }
    });
  } else {
    // POST /mcp 以外はすべて Method Not Allowed
    res.writeHead(405, { "Content-Type": "application/json" }).end(
      JSON.stringify({
        jsonrpc: "2.0",
        error: { code: -32000, message: "Method not allowed." },
        id: null,
      })
    );
  }
})
  .listen(PORT, () =>
    console.log(`MCP HTTP Server listening on http://localhost:${PORT}/mcp`)
  );

// Ctrl+C でトランスポートをクローズ
process.on("SIGINT", async () => {
  console.log("Shutting down...");
  try {
    await transport.close();
    await mcpServer.close();
  } catch (e) {
    console.error("Shutdown error:", e);
  }
  process.exit(0);
});

これを nodeコマンドを使って起動します。

VS Code側の対応

今度は VS Code側の設定です。
以前の記事の時と同じような設定（※ 以下の画像は以前の時のもの）を、VS Code の設定の MCPサーバーを指定する部分に追加します。

設定内容は、前と名称を少し変えた以下としました（url の部分の http://localhost:3000/mcp は今回も同じです）。

{
  "servers": {
    "http-mcp-server": {
      "url": "http://localhost:3000/mcp"
    }
  }
}

VS Code側の対応で MCPサーバーを使う

あとは VS Code の GitHub Copilot のエージェントモードで、自作MCPサーバーのツールを使います。それを試した時のやりとりは、以下のとおりです。