Simple MCP Client with LangGraph Agent

LangGraph エージェントを使用したシンプルな MCP クライアント

Express.js と TypeScript を使用し、LangGraph エージェントで複数の MCP サーバーに対応する軽量な MCP（Model Context Protocol）クライアントを実装します。

特長

• TypeScript を使用した Express.js サーバー
• 会話を処理する LangGraph エージェント
• ツール連携用の MCP クライアント
• ストリーミング応答

セットアップ

1. リポジトリをクローンします
2. 依存関係をインストールします： npm install
3. 次の変数を含む .env ファイルを作成します：

   PORT=3000
   NODE_ENV=development
   CORS_ORIGIN=*
   ANTHROPIC_API_KEY=your_anthropic_api_key
   

4. サーバーをビルドして起動します： npm run buildnpm start

API エンドポイント

チャットの初期化

GET /api/chat/init

チャットの生成

POST /api/chat

リクエストボディ：

{
  "input": "Hello, how can you help me?",
  "characterId": "character_123",
  "llmConfig": {
    "model": "claude-3-opus-20240229",
    "verbose": true
  },
  "chatHistory": [],
  "mcpServers": [
    {
      "name": "weather-service",
      "version": "1.0",
      "url": "https://example-mcp-server.com",
      "key": "optional_api_key"
    }
  ]
}

チャットの終了

GET /api/chat/close

MCP 連携

サーバーはリクエストで指定された MCP サーバーに接続し、LangGraph エージェントが使用できる利用可能なツールを取得します。

開発

自動リロードを有効にして開発サーバーを実行します：

npm run dev

使用例

// Send a message and stream the response
const response = await fetch("/api/chat", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    input: "What's the weather in New York?",
    characterId: "agent1",
    chatHistory: [],
    mcpServers: [
      {
        name: "weather-service",
        version: "1.0",
        url: "https://my-mcp-server.com",
      },
    ],
  }),
});

// Read the streaming response
const reader = response.body.getReader();
while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  const text = new TextDecoder().decode(value);
  const events = text.split("\n\n").filter(Boolean);
  for (const event of events) {
    const data = JSON.parse(event);
    console.log(data);
  }
}