mcp-client について
mcp-clientは、LangGraphエージェントと組み合わせたWebアプリです。MCPサーバーに接続してツールを呼び出すエージェントの開発を想定し、CopilotKitのフロントエンドを備えています。
主な機能
- 01LangGraphベースのエージェント
- 02MCPサーバーへの接続
- 03MCPツールの呼び出し
- 04CopilotKitフロントエンド
- 05フロントエンドとエージェントを別々に実行
活用シーン
- 01MCPツールを呼び出すエージェントの構築
- 02フロントエンドとエージェントの個別開発
MCP 対応
LangGraphエージェントはMCPサーバーに接続し、そのツールを呼び出します。READMEにはサーバー管理や追加のMCP機能は記載されていません。
詳細
はじめに
環境変数の設定:
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つのメイン部分に分かれています:
/agentフォルダ – MCP サーバーに接続してそれらのツールを呼び出す LangGraph エージェント。/appフォルダ – UI とステート同期に CopilotKit を使用するフロントエンドアプリケーション。
コメント
Markdown 対応
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。