MCP サーバーとクライアントの例 (TypeScript)

このプロジェクトでは、TypeScript と@modelcontextprotocol/sdkを使用して、単純な Model Context Protocol (MCP) サーバーとスタンドアロン MCP クライアントの作成と対話方法を示します。

セットアップには以下が含まれます:

1. my-mcp-greeter-server : 挨拶関連のツール、リソース、およびプロンプトを提供する MCP サーバー。

2. my-mcp-client-script : サーバーを起動し、サーバーに接続し、プログラムによってその機能と対話するシンプルなコマンドライン クライアント スクリプト。

この例では、クライアントとサーバー間の通信に**stdio (標準入出力)**トランスポート メカニズムが使用されます。

実行されたプロセスの概要

このプロジェクトは、主に以下のフェーズに従って構築されました。

1. サーバー開発: MCP サービス プロバイダーの作成。

2. クライアント開発: サーバーのサービスを利用するスクリプトを作成します。

3. テストとインタラクション: サーバーを起動し、通信をデモンストレーションするクライアント スクリプトを実行します。

4. (オプション) 統合: VS Code 拡張機能などの既存の MCP クライアントとサーバーを統合する方法について説明します。

Related MCP server: TypeScript MCP Server Boilerplate

前提条件

始める前に、以下がインストールされていることを確認してください。

• Node.js （v16以上を推奨）

• npm (通常はNode.jsに含まれています)

• テキストエディタまたはIDE（VS Codeなど）

• npx (通常 npm に含まれています) - MCP Inspector を使用したテストに役立ちます。

フェーズ 1: MCP サーバーの構築 ( my-mcp-greeter-server )

1. プロジェクトのセットアップ:

   • ディレクトリmy-mcp-greeter-serverを作成しました。

   • npm プロジェクトを初期化しました: npm init -y 。

   • 必要な依存関係をインストールしました: npm install @modelcontextprotocol/sdk zod 。

   • インストールされた開発依存関係: npm install -D typescript @types/node 。

   • TypeScript 構成を初期化しました: npx tsc --init 。

   • tsconfig.jsonを設定しました ( "module": "Node16" 、 "target": "ES2022" 、 "outDir": "./build" 、 "rootDir": "./src"などを設定)。

   • package.jsonを更新して"type": "module"を含め、 build / startスクリプトを追加しました。

   • ソースファイルsrc/index.tsを作成しました。

2. サーバー実装 ( src/index.ts ) :

   • 必要なモジュール ( McpServer 、 StdioServerTransport 、 z ) をインポートしました。

   • サーバーnameとversionの定数を定義しました。

   • McpServerをインスタンス化し、名前とバージョンを渡し、その機能 (ツール、リソース、プロンプト) を宣言します。

   • ツール ( greet ) を定義: server.tool()を使用して、クライアントから呼び出し可能な関数を作成しました。説明を追加し、 Zod ( name , politeness ) で入力パラメータを定義し、パーソナライズされた挨拶文字列を返すハンドラーを実装しました。

   • リソース ( server-info ) を定義: server.resource()を使用して静的データを公開しました。一意の URI ( info://greeter/about ) を提供し、サーバー名とバージョンを返すハンドラーを実装しました。

   • プロンプト（ suggest-greeting ）を定義： server.prompt()を使用して再利用可能なインタラクションテンプレートを作成しました。説明を追加し、LLMインタラクションをガイドするためのユーザー/アシスタントメッセージの事前定義済みセットを返すハンドラーを実装しました。

   • Stdio トランスポートを使用: 通信方法としてStdioServerTransportインスタンス化しました。

   • 接続済み: サーバーを準備するためにawait server.connect(transport)が呼び出されます。

   • ログ記録: 実行中の可視性のためにconsole.errorステートメントを追加しました。これは、プロトコル メッセージに stdout が使用される stdio トランスポートでは特に重要です。

   • Kept Alive : 接続後すぐに Node.js プロセスが終了しないようにしました。

3. 構築と修正：

   • npm run build実行して、 buildディレクトリで TypeScript を JavaScript にコンパイルしました。

   • サーバー バージョンに直接アクセスすることに関連する TypeScript エラーを修正し、代わりに定義済みの定数を使用するようにしました。

フェーズ 2: MCP クライアント スクリプトの構築 ( my-mcp-client-script )

1. プロジェクトのセットアップ:

   • 別のディレクトリmy-mcp-client-scriptを作成しました。

   • npm プロジェクトを初期化しました: npm init -y 。

   • 必要な依存関係をインストールしました: npm install @modelcontextprotocol/sdk 。

   • インストールされた開発依存関係: npm install -D typescript @types/node 。

   • サーバー プロジェクトと同様にtsconfig.json初期化および構成しました。

   • package.json``"type": "module"およびbuild / startスクリプトで更新しました。

   • ソースファイルsrc/client-script.tsを作成しました。

2. クライアント実装 ( src/client-script.ts ) :

   • 必要なモジュール ( Client 、 StdioClientTransport 、 path 、 url ) をインポートしました。

   • 決定されたサーバー パス:サーバーのコンパイルされたindex.jsファイルへのパス (相対または絶対) を計算しました。

   • 設定済みのStdioトランスポート： StdioClientTransportをインスタンス化し、 command （ node ）とargs （サーバースクリプトへのパス）を指定します。クライアントトランスポートがサーバープロセスを起動するため、この設定は重要です。

   • インスタンス化されたクライアント: Clientインスタンスを作成し、ID を付与して、ツールとリソースを使用する意図を宣言しました。

   • 接続済み: await client.connect(transport)が呼び出され、サーバー プロセスが起動され、stdio ストリームを介して MCP 接続が確立されました。

   • サーバーとやり取りしました:

     • await client.callTool()を使用してgreetツールを呼び出しました。

     • await client.readResource()を使用してserver-infoリソースを読み取ります。

     • await client.getPrompt()を使用して、 suggest-greetingプロンプトを取得しました。

   • ログに記録された結果: console.logを使用して、サーバーから受信した応答を表示しました。

   • 閉じられた接続: finallyブロックでawait client.close()を使用して、接続を正常にシャットダウンし、サーバー プロセスを終了します。

フェーズ3: 構築と実行

1. 両方のプロジェクトをビルドする:

   • cd my-mcp-greeter-server && npm run build

   • cd ../my-mcp-client-script && npm run build

2. クライアントを実行します:

   • cd my-mcp-client-script

   • npm run start （またはnode build/client-script.js ）

   • クライアント ( console.log ) とサーバー ( console.error ) の両方からのインターリーブ出力を観察し、通信とツール/リソース/プロンプトの実行が成功したことを確認しました。

役割の説明

• サーバー ( GreeterServer ) :

  • サービスを提供します: 特定の機能 (挨拶ツール、サーバー情報、プロンプト テンプレート) を公開します。

  • パッシブ リスナー (stdio 内) : クライアントが標準ストリーム経由で接続するのを待機します。

  • ロジックを実行: クライアントからの要求に応じて、ツール/リソース/プロンプトに関連付けられたコードを実行します。

  • 結果を送信します: MCP 仕様に従って結果をフォーマットし、クライアントに送り返します。

• クライアント ( client-script.ts ) :

  • サービスを使用する: サーバーが提供する機能を使用します。

  • イニシエーター (stdio) : サーバー プロセスを起動し、接続を確立します。

  • 要求を送信します: 呼び出すツール、読み取るリソース、取得するプロンプトを決定し、適切な MCP 要求を送信します。

  • 結果を受信: サーバーから返された応答を処理します。

  • フローの制御: 相互作用のシーケンスを管理し、接続をいつ閉じるかを決定します。

対話型でサーバーをテストする

クライアント スクリプトがプログラムによるやり取りをテストしている間、MCP インスペクターを使用してサーバーの機能を個別にテストできます。

# Make sure the server is NOT already running
# Replace /path/to/... with the actual absolute path
npx @modelcontextprotocol/inspector node /path/to/my-mcp-greeter-server/build/index.js