mcpField
M
MCP TurboClient

MCP TurboClient

github.com/techspawn聊天应用183 周前更新

关于 MCP TurboClient

MCP TurboClient 是基于 FastAPI 的网页聊天应用,面向需要通过 OpenAI API 与多个 MCP 服务交互的用户。它提供 Web 界面、WebSocket 聊天,并可保存 API 密钥。

主要功能

  1. 01同时连接多个 MCP 服务
  2. 02通过 OpenAI API 处理消息
  3. 03提供网页聊天界面
  4. 04使用 WebSocket 通信
  5. 05保存 OpenAI API 密钥

适用场景

  1. 01在一个聊天界面调用多个 MCP 服务
  2. 02通过 OpenAI 模型处理对话消息
  3. 03经 WebSocket 进行实时聊天
  4. 04在网页界面配置 API 密钥

MCP 相关

作为 MCP 客户端,它可同时连接多个 MCP 服务,并将聊天消息经 OpenAI API 处理。服务器配置保存在 config.json 中。

详细介绍

Turbo MCP Client 🚀

一个基于 FastAPI 的应用程序,提供用于与 Models Context Protocol(MCP)服务交互的网络界面,同时利用 OpenAI 的 API 来处理消息。

概述

该应用程序允许用户:

  • 同时连接到多个 MCP 服务
  • 通过 OpenAI 的 API 处理消息
  • 通过基于网络的聊天界面与系统交互
  • 配置和存储 API 许可证密钥

技术栈

客户端: html、css、js、bootstrap、animatedjs

服务器: FastAPI、Openai、MCP

功能

  • 一次连接多个服务
  • 随处使用 websocket

截图

App Screenshot

App Screenshot

安装

  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
    

环境变量

要运行此项目,您需要将以下环境变量添加到 .env 文件中

MODEL_NAME=gpt-4o

配置

  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 密钥。

使用

  1. 启动应用程序:

    uvicorn main:app --reload
    
  2. 打开浏览器并导航到 http://localhost:8000

  3. 在网络界面中输入您的 OpenAI API 密钥以将其保存到数据库

  4. 使用聊天界面发送消息,这些消息将通过 MCP 服务和 OpenAI 进行处理

使用

  1. 启动应用程序:

    uvicorn main:app --reload
    
  2. 打开浏览器并导航到 http://localhost:8000

  3. 在网络界面中输入您的 OpenAI API 密钥以将其保存到数据库

  4. 使用聊天界面发送消息,这些消息将通过 MCP 服务和 OpenAI 进行处理

项目结构

├── 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 端点

  • GET /:主聊天界面
  • POST /get_settings:保存 OpenAI API 许可证密钥
  • WebSocket /chat:实时聊天通信

贡献

欢迎贡献!

查看 contributing.md 了解入门方式。

支持

如需支持,请发送电子邮件至 [email protected]

许可证

MIT

评论

支持 Markdown

第一次接触 MCP?

从协议是什么,到在客户端里装上第一个服务,这几条回答覆盖了大多数入门问题。

一个开放协议,规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话,MCP 服务负责提供工具、资源和提示模板,两者通过标准消息通信,同一个服务可以被不同客户端复用。