背景
社内でAIチャットボットを作る際にMCPを使う運びとなりました。
AIアプリケーションのツール連携において、MCPを使うケースが多数となってきています。
それだけにMCP連携の実装を押さえておくことは重要だと考えます。
そこで、本記事ではMCPの通信部分のみに着目したサンプル実装を通して、MCPのクライアント・サーバー連携を理解できるようになることを目指します。
対象読者
- JavaScript 初級者～中級者
- MCPの基礎概念を知っている人(MCPの概要についてはこちら)
- AIアプリケーションでツール連携をしたい人
- Streamable HTTPを使ったクライアント・サーバー連携を実装したい人
今回作るもの
MCPサーバーとして、addツールを作成します。
これは、2つの数値を入力すると合計値が返却されるツールです。
MCPクライアントから入力値10と20を与えてaddツールを呼び出すと、
合計値である30が返却されます。
これらのツール連携はStreamable HTTPの通信で行われます。
環境
| 項目 | バージョン |
|---|---|
| OS | Windows11 |
| ランタイム | Node.js v22.14.0 |
| 主要ライブラリ | @modelcontextprotocol/sdk、fastmcp、zod |
事前準備
- プロジェクトフォルダを作成
- 以下のコマンドを実行(入力を求められたらEnterを押してください)
npm init
- ライブラリのインストール
npm i @modelcontextprotocol/sdk@1.12.1
npm i fastmcp@2.2.0
npm i zod@3.25.46
手順
1. サーバープログラムの作成
Streamable HTTPにおけるサーバープログラムのサンプル実装が以下となります。
こちらの記事(TypeScript版の FastMCP を少し試す（自作MCPサーバー))を参考にして、FastMCPでStreamable HTTPのサーバー実装を行いました。
このコードは、2つの数値を入力として受け取り、その合計を返すツールです。
(localhost:8080/stream)をエンドポイントとしてツールを提供します。
server.js
import { FastMCP } from "fastmcp";
import { z } from "zod";
const server = new FastMCP({
name: 'Server',
version: '1.0.0',
});
server.addTool({
name: 'add',
description: 'Add two numbers',
parameters: z.object({
a: z.number(),
b: z.number(),
}),
execute: async (args) => {
return String(args.a + args.b);
},
});
server.start({
transportType: 'httpStream',
httpStream: {
endpoint: '/stream',
port: 8080,
},
});
console.log('Server is running on http://localhost:8080/stream');
2. クライアントプログラムの作成
Streamable HTTPにおけるクライアントプログラムのサンプル実装が以下となります。
- MCPクライアントを「1. サーバープログラムの作成」で作成したエンドポイント(localhost:8080/stream)に接続します。
- 次に
client.callToolでaddというツールに10と20の2つの数値を引数として渡し、ツールを呼び出します。
client.js
import { Client } from "@modelcontextprotocol/sdk/client/index.js";
import { StreamableHTTPClientTransport } from "@modelcontextprotocol/sdk/client/streamableHttp.js";
async function main() {
const client = new Client({
name: 'example-client',
version: '1.0.0',
});
const transport = new StreamableHTTPClientTransport(new URL('http://localhost:8080/stream'));
await client.connect(transport);
const result = await client.callTool({
name: "add",
arguments: { a: 10 , b: 20 },
});
console.log('Result:', result);
process.exit(0);
}
main().catch(console.error);
3. プログラム実行
以下のコマンドにより、サーバープログラムを起動します。
node server.js
サーバーを起動したら、以下のコマンドによりクライアントプログラムを実行します。
node client.js
実行結果
クライアントプログラムを実行して、10+20の計算結果(=30)が返却されていれば正常に処理されています。
まとめ
- Streamable HTTPの通信によるMCPのクライアント・サーバー連携の実装を行いました。
- 今後、こちらの通信方式を利用してLLMを通したfunction callingも行うようなツール連携を開発していきたいです。
Discussion