多服务器命令协议聊天平台

MCP游乐场🛠️🌩️

A. 流线型游乐场 它允许您与大型语言模型聊天，并无缝插入外部 多服务器命令协议（MCP） 工具。在Streamlit客户端旁边启动多个FastMCP服务器（天气和货币），所有这些都是用Docker Compose编排的。客户是 提供者不可知 （OpenAI•亚马逊基岩•Anthropic•谷歌双子座•Groq）感谢LangChain+LangGraph。内置于 紫外线 用于闪电般快速的依赖性安装。

📖 了解更多

想深入了解这一切是如何运作的吗？查看这篇Medium文章中的详细演练： https://medium.com/@elkhan.alizada/your-own-ai-agent-playgirl-builded it with streamlit-langraph and docker-4caeb6fe0ac4

🖥️🔌 主界面-连接视图

🏗️ 建筑

✨ 主要特点

|特性|描述| | ------- |--------------------------------------------------------------------------------------------| | 🔌 多服务器MCP |注册任意数量的MCP服务器；代理自动检测可用工具并路由呼叫。 | | 🖥️ 流媒体聊天界面 |丰富的聊天体验，包括历史记录、侧边栏控件和实时工具执行输出。 | | 🧩 供应商不可知 |一个用于OpenAI、Bedrock、Anthropic、Google、Groq的LangChain接口。打开电源。 | | 🎯 动态模型选择 |直接从UI用自定义模型ID覆盖默认模型。 | | ➕ 动态MCP服务器管理 |通过UI动态添加/删除MCP服务器，而无需编辑配置文件。 | | 🤖 通过LangGraph实现反应代理 | create_react_agent 支持动态工具选择和推理。 | | 🐳 Docker优先 |为客户端和每台服务器提供单独的Dockerfiles+一个 docker-compose.yaml. | | 📦 可扩展 |插入新的MCP服务器或提供商，而无需触摸UI代码。 |

📂 项目布局

mcp-playground/
├─ docker-compose.yaml          # One-command orchestration
├─ client/                      # Streamlit UI
│  ├─ app.py                    # Main entry-point
│  ├─ config.py                 # Typed settings & defaults
│  ├─ servers_config.json       # MCP endpoint catalogue
│  ├─ ui_components/            # Streamlit widgets
│  └─ ...
└─ servers/
   ├─ server1/                  # Weather Service MCP
   │  └─ main.py
   └─ server2/                  # Currency Exchange MCP
      └─ main.py

🚀 快速开始

1·先决条件

• Docker≥24 &Docker编写
• 至少一个LLM提供者密钥（例如。 OPENAI_API_KEY)或AWS基岩信誉。

2·克隆并运行

git clone https://github.com/your-org/mcp-playground.git
cd mcp-playground
docker compose up --build

⚡ 紫外线快速构建：所有服务使用 紫外线 对于依赖管理，与传统的pip相比，Docker构建速度要快得多。依赖关系会被缓存，只有在以下情况下才会重新安装 pyproject.toml 变化。

|服务|URL|默认端口| | ------- | --- | ------------ | |Streamlit客户端| http://localhost:8501 | 8501 | |天气MCP| http://localhost:8000 | 8000 | |货币MCP| http://localhost:8001 | 8001 |

⚙️ 配置

默认设置

所有运行时设置都集中在 client/config.py 以及环境变量。

默认型号ID:

MODEL_OPTIONS = {
    'OpenAI': 'gpt-4o',
    'Antropic': 'claude-3-5-sonnet-20240620',
    'Google': 'gemini-2.0-flash-001',
    'Bedrock': 'us.anthropic.claude-sonnet-4-5-20250929-v1:0',
    'Groq': 'meta-llama/llama-4-scout-17b-16e-instruct'
}

🎯 动态模型覆盖

您可以直接在UI中覆盖任何提供者的默认模型：

1. 从下拉列表中选择您的提供商
2. 查看显示的默认型号
3. 在中输入自定义模型ID "🎯 自定义模型” 领域
4. 留空以使用默认值

示例：

• OpenAI：覆盖 gpt-4o 随着 o1 用于推理任务或 gpt-4o-mini 为了成本效益
• 人类学：使用 claude-opus-4.6 或 claude-sonnet-4.6 最新型号
• 谷歌：试试 gemini-2.0-flash-exp 或 gemini-exp-1206 用于实验特征
• 基岩：用途 us.anthropic.claude-opus-4-6-v1 作品4.6或 us.anthropic.claude-sonnet-4-6 Sonnet 4.6
• Groq：尝试不同的Llama模型，比如 llama-3.3-70b-versatile

➕ 动态MCP服务器管理

无需编辑即可添加自定义MCP服务器 servers_config.json:

1. 点击 "➕ 添加MCP服务器” 侧边栏中的扩展器
2. 填写服务器详细信息：
   • 服务器名称：唯一标识符（例如。， MyCustomServer)
   • 服务器URL：完整端点URL（例如。， http://localhost:8002/sse)
   • 运输类型: sse 或 http
   • 超时：连接超时（秒）（默认值：600）
   • SSE读取超时：SSE特定超时（默认值：900）
   • 标头 （可选）：具有自定义标头的JSON对象
     复制

     {"Authorization": "Bearer token"}
     

3. 点击 “添加服务器” 添加多个服务器
4. 服务器将一直保留在会话中，直到被删除

服务器源：

• 📄 从配置：来自的静态服务器 servers_config.json （无法通过UI删除）
• 📝 用户已添加：通过UI添加的动态服务器（可以使用删除🗑️ 按钮）

MCP端点也可以在中静态定义 servers_config.json 用于持久配置。

💬 使用游乐场

1. 选择提供商 ·在侧栏中选择您的LLM并粘贴相应的凭据。
2. 自定义模型（可选） ·使用提供商提供的任何模型覆盖默认模型ID。
3. 添加MCP服务器（可选） ·通过UI添加自定义MCP服务器或使用默认服务器。
4. 连接MCP服务器 ·点击连接；可用工具显示在 MCP工具 列表。
5. 聊天 ·键入一个问题。
   • 如果已连接，React代理将决定是否调用MCP工具（例如。 get_current天气).
   • 否则，它将退回到普通的LLM聊天。
6. 检查工具调用 ·工具调用以带有输入和输出的YAML块的形式流式传输。

尝试： "What will the weather be in Baku tomorrow and how much is 100 USD in AZN?"

🛠️ 包含MCP服务器

气象局 :8000

mcp = FastMCP("Weather Service", host="0.0.0.0", port=8000)

@mcp.tool()
async def get_current_weather(location: str) -> dict: ...

@mcp.tool()
async def get_forecast(location: str, days: int = 3) -> dict: ...

货币兑换 :8001

mcp = FastMCP("Currency Exchange", host="0.0.0.0", port=8001)

@mcp.tool()
async def get_currency_rates(date: str = None) -> dict: ...

@mcp.tool()
async def convert_currency(amount: float, from_currency: str, to_currency: str, date: str = None) -> dict: ...

🙏 致谢

• LangChain
• LangGraph
• FastMCP
• 溪流