はじめに
この記事は、以下で軽く試していた「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サーバーのツールを使います。それを試した時のやりとりは、以下のとおりです。
Views: 0
