mcp-client について
mcp-clientはLangGraphエージェントとCopilotKitフロントエンドで構成されるアプリケーションフレームワークです。MCPサーバーに接続してツールを呼び出すエージェントと、UIや状態同期を担うフロントエンドを備えています。
主な機能
- 01LangGraphエージェントによるMCPサーバー接続
- 02MCPサーバーのツール呼び出し
- 03CopilotKitのフロントエンドUI
- 04フロントエンドとエージェントの個別実行
活用シーン
- 01Web UI付きエージェントの開発
- 02フロントエンドとエージェントのデバッグ
- 03エージェントによるMCPツールの利用
MCP 対応
エージェントがMCPサーバーに接続し、そのツールを呼び出します。
詳細
https://github.com/user-attachments/assets/364b6705-14d4-4e6d-bea7-fb9f12664fab
はじめに
環境変数を設定する:
touch .env
ルートの .env に以下を追加します:
LANGSMITH_API_KEY=lsv2_...
OPENAI_API_KEY=sk-...
次に、agent フォルダ内に別の .env ファイルを作成します:
cd agent
touch .env
agent/.env に以下を追加します:
OPENAI_API_KEY=sk-...
LANGSMITH_API_KEY=lsv2_...
Poetry を設定する:
Poetry はエージェントサービスの依存関係管理に使用されます。Poetry をインストールするには、以下を実行します:
pip install poetry
インストールを確認するには、以下を実行します:
poetry --version
開発
エラーとログをデバッグするために、フロントエンドとエージェントを別々のターミナルで実行することをお勧めします:
# Terminal 1 - Frontend
pnpm run dev-frontend
# Terminal 2 - Agent
pnpm run dev-agent
または、以下で両方のサービスを一緒に実行できます:
pnpm run dev
その後、ブラウザで http://localhost:3000 を開きます。
アーキテクチャ
コードベースは2つの主な部分に分かれています:
/agentフォルダ – MCP サーバーに接続し、それらのツールを呼び出す LangGraph エージェント/appフォルダ – UI と状態の同期に CopilotKit を使用するフロントエンドアプリケーション
コメント
Markdown 対応
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。