MCP Sample Chat
A local LLM chat application implementing the Model Control Protocol (MCP) architecture with Ollama, FastAPI, and Gradio that demonstrates clear separation of model, control, and presentation layers.
README
ローカルMCPチャット (Ollama + FastAPI + Gradio)
このプロジェクトは、MCP(Model Control Protocol)のテスト実装として、Ollamaを使用したローカルLLMチャットアプリケーションを構築しています。MCPの各レイヤーの役割と責任を明確に分離し、それぞれのコンポーネントがどのように連携するかを検証するための環境を提供します。
MCPの構成要素と役割
MCPは、LLMアプリケーションを構築する際の標準的なアーキテクチャパターンを提供します。このプロジェクトでは、以下のような構成でMCPを実装しています:
1. モデルレイヤー (Ollama)
- 役割: 実際のLLMモデルの実行と管理
- 責任:
- モデルのロードと管理
- 推論の実行
- モデル固有のパラメータ管理
- モデルのバージョン管理
- インターフェース: Ollama API (HTTP/JSON)
- 特徴:
- ローカルでのモデル実行
- モデルごとの独立した実行環境
- シンプルなAPIインターフェース
2. コントロールレイヤー (FastAPI)
- 役割: モデルとアプリケーションの間の制御層
- 責任:
- リクエストの検証と前処理
- モデル選択の制御
- プロンプトの正規化
- レスポンスの後処理
- エラーハンドリング
- ロギングとモニタリング
- インターフェース: REST API
- 特徴:
- モデルに依存しない抽象化
- 統一されたインターフェース
- スケーラブルな設計
3. プレゼンテーションレイヤー (Gradio)
- 役割: ユーザーインターフェースの提供
- 責任:
- ユーザー入力の受付
- インタラクションの管理
- レスポンスの表示
- エラー表示
- インターフェース: Web UI
- 特徴:
- 直感的なユーザーインターフェース
- リアルタイムなインタラクション
- デモンストレーションに適した設計
MCPの通信フロー
[ユーザー] → [Gradio UI]
↓
[リクエスト] → [FastAPI (コントロールレイヤー)]
↓
[モデル制御] → [Ollama (モデルレイヤー)]
↓
[レスポンス] → [FastAPI (コントロールレイヤー)]
↓
[整形済みレスポンス] → [Gradio UI]
↓
[ユーザー]
各レイヤー間の通信
-
プレゼンテーション → コントロール
- HTTPリクエスト(JSON形式)
- プロンプトとモデル選択情報
- エラーハンドリング情報
-
コントロール → モデル
- Ollama APIリクエスト
- 正規化されたプロンプト
- モデルパラメータ
- エラーハンドリング
-
モデル → コントロール
- モデルレスポンス
- 生成メタデータ
- エラー情報
-
コントロール → プレゼンテーション
- 整形済みレスポンス
- エラーメッセージ
- ステータス情報
プロジェクトの目的
- MCPの基本的な実装パターンの検証
- ローカルLLM(Ollama)との連携方法の確認
- チャットインターフェースの実装パターンの検証
- バックエンド(FastAPI)とフロントエンド(Gradio)の連携方法の確認
システムアーキテクチャ
[ユーザー] <-> [Gradio UI (app.py)] <-> [FastAPI (main.py)] <-> [Ollama]
各コンポーネントの役割
-
Gradio UI (app.py)
- ユーザーインターフェースの提供
- プロンプト入力とモデル選択の受付
- FastAPIバックエンドとの通信
- レスポンスの表示
-
FastAPI (main.py)
- MCPの実装の中核
- リクエストの受付と処理
- Ollama APIとの通信
- エラーハンドリングとロギング
- レスポンスの整形と返却
-
Ollama
- ローカルLLMの実行環境
- モデルの管理と推論実行
- モデルレスポンスの生成
機能
- ローカルで動作するLLMチャットインターフェース
- 複数のモデル(mistral)に対応
- シンプルで使いやすいGradio UI
- FastAPIバックエンドによる効率的なAPI処理
- MCPの基本的な機能実装
- プロンプトの受け付け
- モデル選択
- レスポンス生成
- エラーハンドリング
必要条件
- Python 3.8以上
- Ollama(ローカルにインストール済み)
- 必要なPythonパッケージ(requirements.txtに記載)
セットアップ
- リポジトリをクローン
git clone [repository-url]
cd mcp-sample
- 仮想環境の作成と有効化
python -m venv .venv
source .venv/bin/activate # Linuxの場合
# または
.venv\Scripts\activate # Windowsの場合
- 依存パッケージのインストール
pip install -r requirements.txt
- Ollamaの起動
ollama serve
使用方法
- FastAPIバックエンドの起動
uvicorn main:app --reload
- Gradioフロントエンドの起動
python app.py
- ブラウザで http://localhost:7860 にアクセス
アーキテクチャ
main.py: FastAPIバックエンドサーバー- Ollama APIとの通信を担当
- モデルの選択とプロンプトの処理
app.py: Gradioフロントエンド- ユーザーインターフェースの提供
- バックエンドAPIとの通信
注意事項
- Ollamaがローカルで起動している必要があります(デフォルトポート: 11434)
- 使用するモデルは事前にOllamaでダウンロードされている必要があります
- 初回のモデルダウンロードには時間がかかる場合があります
ライセンス
[ライセンス情報を記載]
貢献
[貢献方法を記載]
開発とテスト
開発環境のセットアップ
- 上記のセットアップ手順に従って環境を構築
- 開発用の設定
- FastAPIのデバッグモード:
uvicorn main:app --reload --log-level debug - Gradioのデバッグモード: 環境変数
GRADIO_DEBUG=1を設定
- FastAPIのデバッグモード:
テスト項目
-
基本機能テスト
- プロンプト入力と応答生成
- モデル選択の動作
- エラー時の挙動
-
MCP実装テスト
- APIエンドポイントの動作確認
- リクエスト/レスポンスの形式
- エラーハンドリング
-
統合テスト
- フロントエンドとバックエンドの連携
- Ollamaとの通信
- エラー時の全体の挙動
デバッグ
- FastAPIのログ:
uvicornのログレベルをdebugに設定 - Gradioのデバッグ: 環境変数
GRADIO_DEBUG=1を設定 - Ollamaのログ:
ollama serveの出力を確認
今後の展開
- より多くのモデルへの対応
- ストリーミングレスポンスの実装
- チャット履歴の管理機能
- より高度なMCP機能の実装
- エラーハンドリングの強化
- パフォーマンス最適化
注意事項
- Ollamaがローカルで起動している必要があります(デフォルトポート: 11434)
- 使用するモデルは事前にOllamaでダウンロードされている必要があります
- 初回のモデルダウンロードには時間がかかる場合があります
- このプロジェクトはMCPのテスト実装であり、本番環境での使用は想定していません
ライセンス
[ライセンス情報を記載]
貢献
[貢献方法を記載]
MCPの実装詳細
モデルレイヤー(Ollama)の実装
# main.py での実装例
async def generate(request: Request):
# モデルレイヤーとの通信
payload = {
"model": model,
"prompt": prompt,
"stream": False
}
# Ollama APIとの通信
res = await client.post(OLLAMA_API_URL, json=payload)
コントロールレイヤー(FastAPI)の実装
# main.py での実装例
@app.post("/generate")
async def generate(request: Request):
# リクエストの検証と前処理
body = await request.json()
prompt = body.get("prompt", "")
model = body.get("model", "mistral")
# モデルレイヤーとの通信
# レスポンスの後処理
# エラーハンドリング
プレゼンテーションレイヤー(Gradio)の実装
# app.py での実装例
def chat(prompt, model="mistral"):
# コントロールレイヤーとの通信
res = requests.post(API_URL, json={"prompt": prompt, "model": model})
# レスポンスの表示
return res.json().get("response", "応答がありません")
Recommended Servers
playwright-mcp
A Model Context Protocol server that enables LLMs to interact with web pages through structured accessibility snapshots without requiring vision models or screenshots.
Magic Component Platform (MCP)
An AI-powered tool that generates modern UI components from natural language descriptions, integrating with popular IDEs to streamline UI development workflow.
Audiense Insights MCP Server
Enables interaction with Audiense Insights accounts via the Model Context Protocol, facilitating the extraction and analysis of marketing insights and audience data including demographics, behavior, and influencer engagement.
VeyraX MCP
Single MCP tool to connect all your favorite tools: Gmail, Calendar and 40 more.
graphlit-mcp-server
The Model Context Protocol (MCP) Server enables integration between MCP clients and the Graphlit service. Ingest anything from Slack to Gmail to podcast feeds, in addition to web crawling, into a Graphlit project - and then retrieve relevant contents from the MCP client.
Kagi MCP Server
An MCP server that integrates Kagi search capabilities with Claude AI, enabling Claude to perform real-time web searches when answering questions that require up-to-date information.
E2B
Using MCP to run code via e2b.
Neon Database
MCP server for interacting with Neon Management API and databases
Exa Search
A Model Context Protocol (MCP) server lets AI assistants like Claude use the Exa AI Search API for web searches. This setup allows AI models to get real-time web information in a safe and controlled way.
Qdrant Server
This repository is an example of how to create a MCP server for Qdrant, a vector search engine.