LangChain MCP Client Streamlit App

LangChain MCP クライアント Streamlit アプリ

この Streamlit アプリケーションは、MCP（Model Context Protocol）サーバーに接続し、さまざまな LLM プロバイダー（OpenAI、Anthropic、Google、Ollama）を使用して操作するためのユーザーインターフェースを提供します。

⚠️ 開発状況

このアプリケーションは現在、活発に開発中です。 動作はしますが、バグ、不完全な機能、予期しない動作に遭遇する可能性があります。ご理解いただき、アプリケーションの改善に役立つフィードバックをお寄せください。

機能

• 複数プロバイダーの LLM サポート：OpenAI、Anthropic Claude、Google Gemini、Ollama
• OpenAI 推論モデルのサポート：o3-mini、o4-mini に対する、専用のパラメーター処理による拡張サポート
• ストリーミング応答：対応モデルでトークンごとにリアルタイムでストリーミング
• ファイル添付とマルチモーダル入力：チャットメッセージに画像、PDF、テキスト／Markdown ファイルを添付できます（画像はビジョン対応モデルのみ）
• MCP（Model Context Protocol）連携：ツールにアクセスするために MCP サーバーに接続
• 高度なメモリ管理：短期セッションメモリと、セッションをまたいで保持される永続メモリ
• 複数サーバーのサポート：複数の MCP サーバーに同時に接続
• ツールテストインターフェース：カスタムパラメーターで個々のツールをテスト
• チャット専用モード：MCP サーバーなしでシンプルな会話に利用
• 高度なモデル設定：カスタム温度、最大トークン数、タイムアウト、システムプロンプト
• インテリジェントなモデル検証：パラメーターの自動検証と互換性チェック
• 包括的なログ記録：すべてのツール実行と会話を追跡
• エクスポート／インポート：会話履歴の保存と読み込み
• コンテナ化されたデプロイ：簡単な Docker セットアップ

新機能 - ファイル添付（マルチモーダル入力）

このアプリケーションでは、チャットメッセージにファイルを添付できるようになりました。

対応ファイル形式

• ✅ 画像：PNG、JPG、JPEG、GIF、WEBP（ビジョン対応モデルが必要です）
• ✅ ドキュメント：PDF（テキストはクライアント側で抽出されます）
• ✅ テキスト：TXT、MD

ファイルの添付方法

1. チャット入力欄にファイルを直接ドラッグ＆ドロップするか、
2. チャットの上にある「📎 ファイルを添付（PDF、TXT、画像）」エキスパンダーを使用して、複数のファイルを選択します。

添付ファイルは次のメッセージと一緒に送信され、会話のメタデータに表示されます。

仕組み

• 画像：インライン画像ブロックとして送信されます。OpenAI GPT-4o／o4 ファミリー、Anthropic Claude 3.x、Google Gemini モデルが対応しています。このアプリでは Ollama は対応していません。
• PDF：pypdf を使用してローカルでテキストが抽出され、プロンプトに付随するコンテキストテキストとして含まれます。
• テキスト／Markdown：ファイルの内容が読み込まれ、追加のコンテキストテキストとして含まれます。

プロバイダーのサポートに関する注意事項

• OpenAI：画像にはビジョン対応モデル（例：gpt-4o、o4-*、gpt-4.1、gpt-4-turbo）を使用してください。テキストと PDF は、テキストモデル全般で利用できます。
• Anthropic：Claude 3 ファミリー（Sonnet／Opus／Haiku）は画像とテキストに対応しています。
• Google：Gemini モデルは画像、テキスト、MCP ツール呼び出しに対応しています。
• Ollama：画像には対応していません。PDF とテキストはテキストとして含まれます。

新機能 - ストリーミングのサポート

このアプリケーションでは、対応するすべてのモデルでリアルタイムのストリーミング応答を利用できるようになりました。

ストリーミング対応モデル

• ✅ OpenAI：すべての GPT モデル（GPT-4o、GPT-4、GPT-3.5-turbo）と推論モデル（o3-mini、o4-mini）
• ✅ Anthropic：すべての Claude モデル（Claude-3.5-Sonnet、Claude-3-Opus、Claude-3-Haiku）
• ✅ Google：すべての Gemini モデル（Gemini-2.0-Flash、Gemini-2.5-Pro-Exp）
• ✅ Ollama：すべてのローカルモデル（Granite、Qwen など）
• ❌ OpenAI o1 シリーズ：o1、o1-mini、o1-preview（API の制限により非対応）

仕組み

1. ストリーミングを有効化：サイドバーの「🌊 ストリーミング設定」セクションで切り替えます
2. リアルタイム表示：応答は生成されるとトークンごとに表示されます
3. ツール連携：ツールの実行状況をリアルタイムで確認できます
4. フォールバック対応：問題が発生した場合、自動的に非ストリーミングに切り替わります

メリット

• ユーザーエクスペリエンスの向上：応答が生成されていく様子を確認できます
• 体感応答時間の短縮：モデルが生成している間に読み始めることができます
• リアルタイムのフィードバック：ツールの実行開始をすぐに確認できます
• インタラクティブな感覚：より魅力的な会話体験を実現します

OpenAI Reasoning Models のサポート

アプリケーションに、OpenAI の推論モデルを特別に処理する強化されたサポートが追加されました。

サポート対象の推論モデル

• ✅ o3-mini：ストリーミングに対応した高速な推論モデル
• ✅ o4-mini：ストリーミングに対応した高度な推論モデル
• ❌ o1 シリーズ：o1、o1-mini、o1-preview（一意の API 要件があるためサポートされていません）

推論モデルの機能

• パラメーターの自動最適化：max_tokens の代わりに max_completion_tokens を使用します
• Temperature の処理：推論モデルでは temperature が自動的に無効になります（固定の temperature を使用します）
• 推論の労力：最適なパフォーマンスのため、推論の労力を「medium」に自動設定します
• ストリーミングのサポート：o3／o4 シリーズはリアルタイムストリーミングに対応します（o1 シリーズは非対応です）
• スマートな検証：互換性のないパラメーターの組み合わせを、明確なエラーメッセージとともに防ぎます

ユーザーエクスペリエンス

• 明確な警告：推論モデルを選択した際に視覚的なインジケーターを表示します
• 代替案の提案：o1 シリーズを選択した際に、互換性のあるモデルを推奨します
• シームレスな統合：既存のすべての機能（メモリ、ツール、ストリーミング）で動作します

設定システム

LLM プロバイダーとパラメーター

• OpenAI：
  • 通常のモデル：GPT-4o、GPT-4、GPT-3.5-turbo。temperature（0.0～2.0）、最大トークン数（1～16384）、タイムアウト（10～600 秒）を設定できます
  • 推論モデル：o3-mini、o4-mini。専用のパラメーター処理（temperature なし、max_completion_tokens、reasoning_effort）に対応しています
  • 非対応：o1、o1-mini、o1-preview（互換性のない API 要件があります）
• Anthropic：Claude-3.5-Sonnet、Claude-3-Opus、Claude-3-Haiku。temperature（0.0～1.0）、最大トークン数（1～8192）、タイムアウト（10～600 秒）を設定できます
• Google：Gemini-2.5-Flash-Lite、Gemini-2.5-Pro。temperature（0.0～2.0）、最大トークン数（1～32768）、タイムアウト（10～600 秒）を設定できます
• Ollama：ローカルモデル（Granite3.3:8b、Qwen3:4b）。temperature（0.0～2.0）、最大トークン数（1～32768）、タイムアウト（10～600 秒）を設定できます

カスタムモデルのサポート

すべてのプロバイダーで 「Other」 オプションが利用でき、カスタムモデル名を指定できます。

• OpenAI：任意の OpenAI モデル名を入力できます（例：gpt-4-turbo、o3-mini、カスタムのファインチューニング済みモデル）
• Anthropic：任意の Anthropic モデル名を入力できます（例：claude-3-sonnet-20240229）
• Google：任意の Google モデル名を入力できます（例：gemini-pro、gemini-1.5-pro）
• Ollama：ローカルで利用可能な任意のモデル名を入力できます（例：llama3、codellama、カスタムモデル）

システムプロンプト

• 組み込みプリセット：用途に応じた5種類の専用システムプロンプト
• カスタムプロンプト：独自のシステムプロンプトを作成して保存できます
• リアルタイム適用：設定の変更を即座に反映し、フィードバックを確認できます
• 設定ステータス：適用済み、変更済み、デフォルトの状態を示す視覚的なインジケーター

設定の管理

• 設定の適用：変更を検出して設定を適用するスマートボタン
• エクスポート／インポート：バックアップや共有用に設定を JSON ファイルとして保存できます
• リセットオプション：デフォルト設定または以前に適用した設定に戻せます
• 変更の検出：設定の変更をリアルタイムで追跡します

メモリシステム

メモリの種類

1. 短期（セッション）：

   • 会話はブラウザーのセッションメモリに保存されます
   • ブラウザーを閉じるかアプリを再起動すると失われます
   • LangGraph の InMemorySaver を使用します

2. 永続（セッション間）：

   • 会話は SQLite データベース（conversations.db）に保存されます
   • ブラウザーのセッション間およびアプリの再起動後も保持されます
   • カスタムのメタデータ管理を備えた LangGraph の SqliteSaver を使用します
   • チャット中に会話を自動保存します
   • 保存済みの会話を閲覧、読み込み、管理できます

高度なメモリ機能

• 会話のインポート／エクスポート：プレビューと確認機能を備えた、過去の会話のインポート
• スレッド管理：一意の ID を持つ複数の会話スレッドを切り替え
• メモリ分析：メッセージ数、メモリ使用量、会話の統計、データベースのサイズを追跡
• 会話ブラウザー：メタデータと検索機能を使って、保存済みのすべての会話を表示、管理
• 履歴ツールとの連携：メモリが有効な場合、エージェントは get_conversation_history ツールを利用でき、次のことが可能になります。
  • 種類や内容で過去の会話を検索
  • 以前のやり取りを参照し、コンテキストを維持
  • 会話のトピックを要約し、メッセージを絞り込み
  • 整形された見やすい出力で、会話履歴の特定の部分にアクセス

メモリの安全性とパフォーマンス

• インポートの検証：適用前の形式検証とプレビューを備えた、安全なインポートシステム
• ループ防止：メモリ操作中の無限ループを防ぐ堅牢な保護機能
• 柔軟な制限：設定可能なメッセージ数の上限とメモリ制約
• リアルタイムの状態表示：メモリの状態、スレッド情報、変更検出を視覚的に表示

ツールのテストと分析

• 個別のツールテスト：「🔧 Test Tools」タブからアクセス
• 動的なパラメーターフォーム：ツールスキーマに基づいてフォームを自動生成し、リアルタイムで検証
• パフォーマンス追跡：実行時間、成功率／失敗率、詳細な統計
• テスト履歴：エクスポート機能を備えた、テスト結果の完全な履歴
• 結果分析：成功率の計算と平均実行時間の指標
• JSON エクスポート：外部分析用にテスト結果とパフォーマンスデータをエクスポート

今後の改善

• STDIO MCP サーバー：標準入力／出力（STDIO）を使った MCP サーバーへの接続をサポートし、より柔軟なサーバー設定を実現
• RAG（ドキュメントのインデックス作成）：アップロードしたドキュメントをセッションをまたいでインデックス化し、検索（添付ファイルには現在対応していますが、完全な検索機能は今後の予定です）
• ツール検証の強化：MCP ツールの高度なパラメーター検証とスキーマチェック
• マルチスレッド処理：複数のツール実行とサーバー接続の並列処理

インストール

1. このリポジトリをクローンします。

git clone https://github.com/guinacio/langchain-mcp-client.git
cd langchain-mcp-client

推奨：UV を使ったインストール

UV はプロジェクト専用の .venv を管理し、pyproject.toml／uv.lock に基づいてバージョンを固定します。

uv sync --all-extras --dev

UV を使ってアプリを起動します。

uv run streamlit run app.py

アプリケーションは http://localhost:8501 で利用できます。

セキュリティとデプロイ

このアプリケーションはローカル優先であり、複数ユーザー向けの認証機能は含まれていません。 そのため、付属の Docker Compose 設定では、Streamlit とサンプル MCP サーバーは 127.0.0.1 のみに公開されます。このバインドを 0.0.0.0 に変更したり、信頼できるリバースプロキシで認証を追加したりせずに、トンネルやパブリックなイングレスを通じてアプリを公開したりしないでください。

永続化された会話は、サーバーが発行するセッションごとの名前空間によって分離されます。 アップグレード前のグローバルスコープの会話行は、移行時に隔離され、新しいセッションには公開されません。 ブラウザーの再起動後もデータを保持する必要がある、信頼できる単一ユーザー向けデプロイでは、強力な MCP_CLIENT_STORAGE_KEY を設定してください。このデプロイを利用するすべてのユーザーが同じ名前空間を共有するため、複数ユーザー向けのホスティングではこのモードを使用しないでください。

外向きの MCP URL と Ollama URL は、サーバー側で検証されます。ローカル開発ではループバック URL が有効です。リンクローカル、クラウドメタデータ、および予約済みアドレスは常にブロックされます。信頼できる RFC1918／プライベートネットワークのサーバーへのアクセスには、デプロイ担当者が MCP_ALLOW_PRIVATE_URLS=true を設定する必要があります（ローカル専用の Docker Compose サービスではすでに設定されています）。

ローカル環境設定の例：

MCP_CLIENT_STORAGE_KEY="generate-a-long-random-value"
MCP_ALLOW_PRIVATE_URLS=true  # only when trusted LAN MCP/Ollama hosts are needed

代替方法：pip と requirements.txt を使ったインストール

python -m venv venv
source venv/bin/activate  # On Windows: venv\Scripts\activate
pip install -r requirements.txt
streamlit run app.py

MCP サーバーのセットアップ

このアプリケーションを使用するには、MCP サーバーを起動するか、有効な MCP サーバーの URL が必要です。 簡単なテストには、weather_server.py にあるシンプルな MCP サーバーを使用してください。

UV で実行（推奨）：

uv run python weather_server.py

別の方法（pip/venv）：

python weather_server.py

サーバーはデフォルトでポート 8000 で起動します。Streamlit アプリでは、URL http://localhost:8000/sse を使って接続できます。

トラブルシューティング

• 接続の問題：MCP サーバーが起動しており、アクセス可能であることを確認してください
• API キーのエラー：選択した LLM プロバイダーの正しい API キーを入力したことを確認してください
• ツールのエラー：ツールの使用中に発生したエラーの詳細については、サーバーのログを確認してください
• 推論モデルの問題：
  • 「o1 Series Models Not Supported」と表示された場合は、代わりに o3-mini または o4-mini を使用してください
  • 推論モデルでは、カスタムの温度設定はサポートされていません
  • 一部の推論モデルではストリーミングがサポートされていない場合があります（モデル固有の警告を確認してください）
• カスタムモデル名：「Other」オプションを使用する場合は、モデル名がプロバイダーの API で指定されている名前と完全に一致し、利用権限があることを確認してください。
• ファイルの添付：
  • 画像を扱うには、視覚機能に対応したモデル（例：GPT-4o/o4、Claude 3.x、Gemini）が必要です。ここでは Ollama はテキストのみです。
  • PDF のテキスト抽出は PDF の品質に左右されます。スキャン画像では、抽出できるテキストが限られる場合があります。

リソース

• LangChain MCP アダプター
• Model Context Protocol
• Streamlit ドキュメント