MCP Gradio Client Proof of Concept

MCP Gradio 客户端概念验证

本仓库是使用 Gradio 实现 Model Context Protocol (MCP) 客户端的概念验证。它演示了如何在 Gradio 界面内使用 STDIO 和 SSE 通信方法与 MCP 服务进行交互。

Model Context Protocol (MCP) 旨在标准化大模型与工具之间的交互，为通信提供统一接口。该概念验证展示了 MCP 在构建具有工具集成的 AI 助手中的实际应用。

目录

• 简介
• 功能
• 安装
• 配置
  • STDIO 服务定义
  • SSE 服务定义
• 使用
• 注意事项
• 许可证
• 贡献

简介

该项目在 Gradio 应用中实现了 MCP 客户端，允许用户与通过 MCP 公开的工具进行交互。通过利用 MCP 的标准化通信协议，客户端可以无缝集成各种工具，增强大模型的功能。

来自 Model Context Protocol 的关键要素：

• 标准化：MCP 为大模型与工具的交互提供了标准化的方式，促进互操作性。
• 通信方法：支持多种通信方法，包括 STDIO 和 SSE，为工具集成提供灵活性。
• 工具集成：使大模型能够使用外部工具，增强其功能性和适用性。

功能

• Gradio 界面：用于与 MCP 客户端和工具交互的用户友好界面。
• STDIO 和 SSE 支持：演示了如何使用 STDIO 和 SSE 方法连接到 MCP 服务。
• 动态工具加载：自动发现并集成 MCP 服务公开的工具。
• 调试支持：可选的调试模式，帮助开发和故障排除。

安装

前置要求

• Python 3.12 或更高版本
• Node.js
• uvicorn（用于 STDIO 服务的 UVX）
• NPX（用于 STDIO 服务的 NPX）
• Python（用于 Python 模块 STDIO 服务）
• OpenAI API 密钥（用于大模型交互）

步骤

1. 克隆仓库

   git clone https://github.com/yourusername/mcp-gradio-client.git
   cd mcp-gradio-client
   

2. 创建虚拟环境 Unix/macOS：

   python -m venv venv
   source venv/bin/activate  # On Windows use `venv\Scripts\activate`
   

   Windows：

    python -m venv .venv
    .venv\Scripts\activate
   

3. Install Dependencies

   pip install -r requirements.txt
   

4. 设置环境变量

   在根目录创建 .env 文件，参考 .env.example 并添加你的 OpenAI API 密钥：

   OPENAI_API_KEY=your_openai_api_key
   

5. 运行应用

   启动 Gradio 应用：

   python gradio_ui.py
   

理解 MCP STDIO 与 SSE 服务

详见 stdio_versus_sse_mcp_servers.md 了解两种服务类型的差异。

配置

应用需要 config.json 文件来定义 MCP 服务。该文件应放在根目录中。 config.json 应具有以下格式：

{
  "mcpServers": {
    "stdio_server_name": {
      "type": "stdio",
      "command": "uvx",
      "args": [], 
      "env": {}
    },
    "sse_server_name": {
      "type": "sse",
      "url": "http://127.0.0.1:3001/sse",
      "headers": {}
    }
  }
}

详见 信息 - 如何配置 config.json 文件。请注意，虽然文件结构与 Claude Desktop 使用的结构很相似，但并不完全相同。 有几个重要的区别（均在另一个 readme 中注明）

• "type": "stdio"|"sse" 需要指定你使用的服务类型
• "command": "uvx"|"npx"|"python" 对于 Windows 用户可能需要调整。例如，npx 在 Windows 上需要改为 npx.cmd

STDIO 服务定义

• Type: 应设置为 "stdio"。
• Command: 启动 STDIO 服务的命令（例如 "python"、"uv"、"uvx" 或 "npx"）。
• Args: 命令的参数（例如 ["weather_server.py"]）。
• Env: 服务所需的环境变量。

注意: STDIO 服务由 Gradio 实例化，无需手动启动。它们通常通过 npx、uvicorn/uvx 或 python -m 命令参数启动。某些 Python STDIO 服务必须先下载并安装，如果它们不是可识别的包。

SSE 服务定义

• Type: 应设置为 "sse"。
• URL: SSE 服务运行的端点。
• Headers: （可选）连接所需的任何请求头。

注意: SSE 服务必须手动启动并运行，Gradio 客户端才能连接。确保在运行 Gradio 应用之前启动 SSE 服务。

使用

1. 启动 SSE 服务（如有） 确保 config.json 中定义的任何 SSE 服务正在运行。

2. 运行 Gradio 应用

   python gradio_ui.py
   

3. 与界面交互 在网络浏览器中打开提供的 URL（通常是 http://127.0.0.1:7860）来访问 Gradio 界面。

4. 提出问题 使用聊天界面与语言模型和 MCP 服务提供的工具进行交互。

注意

• STDIO 服务: Gradio 将根据您的配置自动实例化 STDIO 服务。
• SSE 服务: 必须在运行 Gradio 客户端之前手动启动。
• 调试模式: 使用界面中的复选框启用或禁用调试模式来查看详细日志。
• 工具安装: 如果某些工具不是标准包，可能需要额外的安装步骤。确保安装了所有必要的工具并可以访问。

许可证

本项目采用 MIT 许可证。详见 LICENSE 文件。

有关 Model Context Protocol 及其功能的更多信息，请访问 官方 MCP 文档。

贡献

git clone xxxxx
cd xxx

uv venv
source .venv/bin/activate
uv sync --frozen --all-extras --dev

venv
.venv/bin/activate

pytest -v

pre-commit install

pre-commit run --all-files

git checkout -b my-branch

git add . && git commit -m "My changes"

git push origin my-branch