MCP Sample Chat

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.

Category
Visit Server

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]
    ↓
[ユーザー]

各レイヤー間の通信

  1. プレゼンテーション → コントロール

    • HTTPリクエスト(JSON形式)
    • プロンプトとモデル選択情報
    • エラーハンドリング情報
  2. コントロール → モデル

    • Ollama APIリクエスト
    • 正規化されたプロンプト
    • モデルパラメータ
    • エラーハンドリング
  3. モデル → コントロール

    • モデルレスポンス
    • 生成メタデータ
    • エラー情報
  4. コントロール → プレゼンテーション

    • 整形済みレスポンス
    • エラーメッセージ
    • ステータス情報

プロジェクトの目的

  • MCPの基本的な実装パターンの検証
  • ローカルLLM(Ollama)との連携方法の確認
  • チャットインターフェースの実装パターンの検証
  • バックエンド(FastAPI)とフロントエンド(Gradio)の連携方法の確認

システムアーキテクチャ

[ユーザー] <-> [Gradio UI (app.py)] <-> [FastAPI (main.py)] <-> [Ollama]

各コンポーネントの役割

  1. Gradio UI (app.py)

    • ユーザーインターフェースの提供
    • プロンプト入力とモデル選択の受付
    • FastAPIバックエンドとの通信
    • レスポンスの表示
  2. FastAPI (main.py)

    • MCPの実装の中核
    • リクエストの受付と処理
    • Ollama APIとの通信
    • エラーハンドリングとロギング
    • レスポンスの整形と返却
  3. Ollama

    • ローカルLLMの実行環境
    • モデルの管理と推論実行
    • モデルレスポンスの生成

機能

  • ローカルで動作するLLMチャットインターフェース
  • 複数のモデル(mistral)に対応
  • シンプルで使いやすいGradio UI
  • FastAPIバックエンドによる効率的なAPI処理
  • MCPの基本的な機能実装
    • プロンプトの受け付け
    • モデル選択
    • レスポンス生成
    • エラーハンドリング

必要条件

  • Python 3.8以上
  • Ollama(ローカルにインストール済み)
  • 必要なPythonパッケージ(requirements.txtに記載)

セットアップ

  1. リポジトリをクローン
git clone [repository-url]
cd mcp-sample
  1. 仮想環境の作成と有効化
python -m venv .venv
source .venv/bin/activate  # Linuxの場合
# または
.venv\Scripts\activate  # Windowsの場合
  1. 依存パッケージのインストール
pip install -r requirements.txt
  1. Ollamaの起動
ollama serve

使用方法

  1. FastAPIバックエンドの起動
uvicorn main:app --reload
  1. Gradioフロントエンドの起動
python app.py
  1. ブラウザで http://localhost:7860 にアクセス

アーキテクチャ

  • main.py: FastAPIバックエンドサーバー
    • Ollama APIとの通信を担当
    • モデルの選択とプロンプトの処理
  • app.py: Gradioフロントエンド
    • ユーザーインターフェースの提供
    • バックエンドAPIとの通信

注意事項

  • Ollamaがローカルで起動している必要があります(デフォルトポート: 11434)
  • 使用するモデルは事前にOllamaでダウンロードされている必要があります
  • 初回のモデルダウンロードには時間がかかる場合があります

ライセンス

[ライセンス情報を記載]

貢献

[貢献方法を記載]

開発とテスト

開発環境のセットアップ

  1. 上記のセットアップ手順に従って環境を構築
  2. 開発用の設定
    • FastAPIのデバッグモード: uvicorn main:app --reload --log-level debug
    • Gradioのデバッグモード: 環境変数 GRADIO_DEBUG=1 を設定

テスト項目

  1. 基本機能テスト

    • プロンプト入力と応答生成
    • モデル選択の動作
    • エラー時の挙動
  2. MCP実装テスト

    • APIエンドポイントの動作確認
    • リクエスト/レスポンスの形式
    • エラーハンドリング
  3. 統合テスト

    • フロントエンドとバックエンドの連携
    • 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

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.

Official
Featured
TypeScript
Magic Component Platform (MCP)

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.

Official
Featured
Local
TypeScript
Audiense Insights MCP Server

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.

Official
Featured
Local
TypeScript
VeyraX MCP

VeyraX MCP

Single MCP tool to connect all your favorite tools: Gmail, Calendar and 40 more.

Official
Featured
Local
graphlit-mcp-server

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.

Official
Featured
TypeScript
Kagi MCP Server

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.

Official
Featured
Python
E2B

E2B

Using MCP to run code via e2b.

Official
Featured
Neon Database

Neon Database

MCP server for interacting with Neon Management API and databases

Official
Featured
Exa Search

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.

Official
Featured
Qdrant Server

Qdrant Server

This repository is an example of how to create a MCP server for Qdrant, a vector search engine.

Official
Featured