mcpField
O
open-mcp-client

open-mcp-client

github.com/mdhelaluddinbiswasフレームワーク・SDK183 週間前に更新
リポジトリ

open-mcp-client について

open-mcp-clientは、LangGraphエージェントとCopilotKitフロントエンドを組み合わせたクライアントアプリです。エージェントがMCPサーバーに接続してツールを呼び出し、フロントエンドがUIと状態を同期します。

主な機能

  1. 01LangGraphエージェントのMCPサーバー接続
  2. 02MCPサーバーのツール呼び出し
  3. 03CopilotKitフロントエンド
  4. 04UIと状態の同期
  5. 05フロントエンドとエージェントを個別または同時に実行

活用シーン

  1. 01MCP接続エージェントのインターフェースを構築
  2. 02エージェントとフロントエンドを分けて開発・デバッグ
  3. 03フロントエンドとエージェントをローカルで同時実行

MCP 対応

LangGraphエージェントがMCPサーバーに接続し、そのツールを呼び出します。

詳細

https://github.com/user-attachments/assets/f72e1f7d-3c84-4429-a465-23dff3d3bd63

使い始める

環境変数を設定する:

touch .env

ルートの .env に以下を追加します:

LANGSMITH_API_KEY=lsv2_...

次に、agent フォルダ内に別の .env ファイルを作成します:

cd agent
touch .env

agent/.env に以下を追加します:

OPENAI_API_KEY=sk-...
LANGSMITH_API_KEY=lsv2_...

開発

エラーとログをデバッグするため、フロントエンドとエージェントを異なるターミナルで個別に実行することをお勧めします:

# Terminal 1 - Frontend
pnpm run dev-frontend

# Terminal 2 - Agent
pnpm run dev-agent

また、以下で両方のサービスを一緒に実行することもできます:

pnpm run dev

その後、ブラウザで http://localhost:3000 を開きます。

アーキテクチャ

コードベースは2つの主要な部分に分かれています:

  1. /agent フォルダ – MCP サーバーに接続し、それらのツールを呼び出す LangGraph エージェント。
  2. /app フォルダ – UI とステート同期に CopilotKit を使用するフロントエンドアプリケーション。

コメント

Markdown 対応

MCP は初めてですか？

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。