MCP の TypeScript SDK と最新の VS Code（GitHub Copilot）で Streamable HTTP transport を試す

## はじめに

今回の内容は、以下 2つをシンプルに組み合わせて、とりあえず雑に試してみたというものです。


https://x.com/code/status/1920527499693334844


https://x.com/LangChainJP/status/1916417339190382758



### MCPに関するお試し

最近、MCP関連のお試しをちょこちょこやっています。

●「mcp user:youtoy」の検索結果 - Qiita
　https://qiita.com/search?q=mcp%20user%3Ayoutoy&sort=created

#### その中の一部を抜粋

例えば、以下の内容などです。

●Mastra の AgentNetwork を使って「複数エージェントと MCPサーバーの組み合わせ」を試す - Qiita
　https://qiita.com/youtoy/items/8a20d6c1a2af6d82826c

●シンプルな自作MCPサーバーを VS Code に設定して GitHub Copilot の Agent mode で利用（Node.js で TypeScript を直接扱う） - Qiita
　https://qiita.com/youtoy/items/1d46724e40ab96607b18

## 今回の内容

今回、以下のバージョンで対応された MCP の Streamable HTTP transport を使ったものを試してみます。

●Release 1.10.0 · modelcontextprotocol/typescript-sdk
　https://github.com/modelcontextprotocol/typescript-sdk/releases/tag/1.10.0

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/937f0bb8-6b67-4fbf-bbd6-15dea964e275.png)

### 利用する MCPサーバー（Streamable HTTP transport を使ったもの）の公式サンプル


公式の MCPサーバーのサンプル（Streamable HTTP transport を使ったもの）が以下にあるようです。

●modelcontextprotocol/typescript-sdk: The official Typescript SDK for Model Context Protocol servers and clients
　https://github.com/modelcontextprotocol/typescript-sdk?tab=readme-ov-file#streamable-http

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/b066d81d-4825-42e2-a13c-ddfa39fd2dac.png)

その中のシンプルな実装のサーバーを流用してみます。

●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/0c4c3a4b-46ca-4678-8768-fa73d1736801.png)


### サーバーを起動

上記をローカルにもってきて、サーバーを起動してみます。

適当な手順になってしまいますが、コードをローカルにもってきて、express を使えるようにして、以下のコマンドでサーバーを起動しました。

```zsh
npx tsx src/examples/server/simpleStreamableHttp.ts
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/4b6d4e54-1548-4534-9d40-ff82ce767437.png)


### VS Code側の準備

VS Code側の準備を進めます。VS Code での設定は、以下を使えば良さそうです。

●April 2025 (version 1.100)
　https://code.visualstudio.com/updates/v1_100#_mcp-support-for-streamable-http

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/a313a10d-335b-4f9e-9d79-6e603717e7be.png)


#### MCPサーバーの設定を追加する

自身の VS Code のせってに以下を追加しました。

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

そして、以下のようにサーバーを起動しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/2b696d4f-7f4d-43b0-9914-029198dc3599.png)


ローカルサーバーが 3000番ポートで起動した状態になりました。


### GitHub Copilot で試す

あとは、GitHub Copilot のエージェントモードで上記を使います。ツールは複数あるようですが、以下のシンプルな挨拶をするものを使いました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/712adea7-274e-4918-8ce4-4e7ceced19bb.png)


#### greetツールを使ってみる

以下、GitHub Copilot で上記ツールを利用するよう依頼して、それに対する応答を得た状態の画面です（※ 2回分）。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/5a33a607-80ca-4385-ab7e-567d888d9803.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/72220e3a-c0c0-4560-9a85-66c936204c63.png)

ツールの出力が最終の応答に活用された感じがないですが、とりあえずツール「greet」が使われているのが確認できました。


今回はただ動かしてみただけという感じになりましたが、Streamable HTTP transport を利用した MCPサーバー（公式の TypeScript SDK で実装されたもの）とクライアント・ホスト（VS Code の GitHub Copilot エージェントモード）とのやりとりを試せました。