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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/1af683b3-c591-40df-b997-a4051a3f9e95.png)


### 今回の内容

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

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



## 試す手順

### 下準備

今回の下準備で、[以下のパッケージ](https://www.npmjs.com/package/@modelcontextprotocol/sdk)をインストールします。

```zsh
npm i @modelcontextprotocol/sdk
```

### 自作MCPサーバー

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

[前に作った標準入出力での通信を使う自作MCPサーバー](https://qiita.com/youtoy/items/1d46724e40ab96607b18)は、以下の内容でした。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/c9573f90-e9b5-405e-b857-21c0d52a6de8.png)


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


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


```javascript
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側の設定です。
[以前の記事の時と同じような設定（※ 以下の画像は以前の時のもの）](https://qiita.com/youtoy/items/f93684d742d4a3da27b6#mcp%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%AE%E8%A8%AD%E5%AE%9A%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B)を、VS Code の設定の MCPサーバーを指定する部分に追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/cccb8f2f-4399-415c-b48a-2e30eb5c51b1.png)

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

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




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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/1d1bebc3-998c-4c90-a055-8a6778b9a835.png)