mcpField
T
Turbo MCP Client

Turbo MCP Client

github.com/techspawnチャットアプリ183 週間前に更新

Turbo MCP Client について

複数の MCP サーバーと対話するインターフェースを提供する FastAPI ベースのウェブアプリケーション。OpenAI API と統合され、同時接続とリアルタイム通信をサポートしています。

主な機能

  1. 01複数 MCP サーバー接続
  2. 02OpenAI メッセージ処理
  3. 03WebSocket リアルタイム通信
  4. 04Web チャットインターフェース
  5. 05API キー管理

活用シーン

  1. 01マルチサーバーチャット対話
  2. 02リアルタイム AI メッセージ処理

MCP 対応

複数の MCP サーバーへの同時接続をサポートする MCP クライアントで、OpenAI API でメッセージを処理し、WebSocket でリアルタイム通信を実現します。

詳細

Turbo MCP Client 🚀

Models Context Protocol(MCP)サーバーと対話するためのウェブインターフェースを提供し、OpenAI の API を利用してメッセージを処理する FastAPI ベースのアプリケーションです。

Overview

このアプリケーションにより、ユーザーは以下のことができます:

  • 複数の MCP サーバーに同時に接続
  • OpenAI の API を通じてメッセージを処理
  • ウェブベースのチャットインターフェースを経由してシステムと対話
  • API ライセンスキーを設定・保存

Tech Stack

Client: html, css, js, bootstrap, animatedjs

Server: FastAPI, Openai, MCP

Features

  • 複数のサーバーに同時に接続
  • どこでも WebSocket を使用可能

Screenshots

App Screenshot

App Screenshot

Installation

  1. リポジトリをクローンします:

    git clone https://github.com/techspawn/Turbo-MCP-Client.git
    cd openai-mcp
    
  2. 依存関係をインストールします:

    uv pip install -r requirements.txt
    
  3. 環境変数を設定します:

    export MODEL_NAME="gpt-4o" # or your preferred OpenAI model
    

Environment Variables

このプロジェクトを実行するには、.env ファイルに以下の環境変数を追加する必要があります

MODEL_NAME=gpt-4o

Configuration

  1. ルートディレクトリに config.json ファイルを作成します:

    {
      "mcpServers": {
        "server1": {
          "command": "your_command",
          "args": ["arg1", "arg2"]
        },
        "server2": {
          "command": "another_command",
          "args": ["arg1", "arg2"]
        }
      }
    }
    
  2. SQLite データベースを初期化します:

    import sqlite3
    
    conn = sqlite3.connect("mcp_config.db")
    cursor = conn.cursor()
    cursor.execute("CREATE TABLE IF NOT EXISTS config (license_key TEXT)")
    conn.commit()
    conn.close()
    
  3. ウェブインターフェースから OpenAI API キーを設定します。

Usage

  1. アプリケーションを起動します:

    uvicorn main:app --reload
    
  2. ブラウザを開き、http://localhost:8000 にアクセスします

  3. ウェブインターフェースで OpenAI API キーを入力して、データベースに保存します

  4. チャットインターフェースを使用してメッセージを送信します。メッセージは MCP サーバーと OpenAI を通じて処理されます

Usage

  1. アプリケーションを起動します:

    uvicorn main:app --reload
    
  2. ブラウザを開き、http://localhost:8000 にアクセスします

  3. ウェブインターフェースで OpenAI API キーを入力して、データベースに保存します

  4. チャットインターフェースを使用してメッセージを送信します。メッセージは MCP サーバーと OpenAI を通じて処理されます

Project Structure

├── images/                    # Directory for storing image assets
│   ├── chat_window.png        # Screenshot of the chat window
│   └── setting_page.png       # Screenshot of the settings page
├── models/                    # Contains Python modules related to data models
│   ├── __init__.py            # Makes the 'models' directory a Python package
│   ├── client.py              # Defines client-related logic (e.g., API client, user handling)
│   ├── config.py              # Handles application configuration settings
│   └── py.typed               # Indicates that this package supports type hints
├── static/                    # Placeholder for static assets (CSS, JavaScript, images)
├── templates/                 # Directory for HTML templates
│   ├── base.html              # Base template for consistent layout across pages
│   ├── chat.html              # Template for the chat interface
│   └── settings.html          # Template for the settings page
├── .env                       # Environment variables (e.g., API keys, credentials)
├── .gitignore                 # Specifies files to be ignored by Git
├── .python-version            # Defines the Python version for this project
├── config.json                # JSON configuration file for application settings
├── database.py                # Handles database connection and operations
├── folder_structure.txt        # Text file describing the project structure
├── LICENSE                    # License file specifying usage terms
├── main.py                     # Entry point of the application
├── mcp_config.db               # SQLite database file or config storage
├── pyproject.toml              # Python project metadata and dependency management
├── README.md                   # Project documentation and setup instructions
├── requirements.txt            # List of required dependencies
└── uv.lock                     # Lock file for package versions (possibly from `uv` or another package manager)

API Endpoints

  • GET /: メインチャットインターフェース
  • POST /get_settings: OpenAI API ライセンスキーを保存
  • WebSocket /chat: リアルタイムチャット通信

Contributing

貢献は常に歓迎します!

詳細は contributing.md をご覧ください。

Support

サポートが必要な場合は、[email protected] にメールしてください

License

MIT

コメント

MCP は初めてですか?

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。