MCP Playground 🛠️🌩️

一个基于Streamlit的游乐场，允许您与大型语言模型进行聊天，并无缝接入外部的多服务器命令协议（MCP）工具。使用Docker Compose编排多个FastMCP服务器（天气与货币），以及一个Streamlit客户端。客户端是供应商无关的（OpenAI • Amazon Bedrock • Anthropic • Google Gemini），这得益于LangChain + LangGraph。

📖 更多了解

想要深入了解它是如何工作的吗？请查看这篇Medium文章中的详细教程： https://medium.com/@elkhan.alizada/your-own-ai-agent-playground-build-it-with-streamlit-langgraph-and-docker-4caeb6fe0ac4

---

🖥️🔌 主要界面 - 连接视图

---

🏗️ 架构

---

✨ 关键特性

特性	描述
🔌 多服务器MCP	注册任意数量的MCP服务器；代理自动检测可用工具并路由调用。
🖥️ Streamlit聊天UI	具有历史记录、侧边栏控制和实时工具执行输出的丰富聊天体验。
🧩 供应商无关	一个LangChain接口适用于OpenAI、Bedrock、Anthropic、Google、Groq。切换自如。
🤖 通过LangGraph的React代理	create_react_agent支持动态工具选择和推理。
🐳 Docker优先	客户端和每个服务器的独立Dockerfile + 单个docker-compose.yaml。
📦 可扩展	添加新的MCP服务器或提供商而不触及UI代码。

---

📂 项目布局

mcp-playground/
├─ docker-compose.yaml          # 一键编排
├─ client/                      # Streamlit UI
│  ├─ app.py                    # 主入口点
│  ├─ config.py                 # 类型设置及默认值
│  ├─ servers_config.json       # MCP端点目录
│  ├─ ui_components/            # Streamlit小部件
│  └─ ...
└─ servers/
   ├─ server1/                  # 天气服务MCP
   │  └─ main.py
   └─ server2/                  # 货币兑换MCP
      └─ main.py

---

🚀 快速开始

1 · 前提条件

• Docker ≥ 24 & Docker Compose
• 至少一个LLM提供商密钥（例如OPENAI_API_KEY）或用于Bedrock的AWS凭证。

2 · 克隆并运行

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

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

---

⚙️ 配置

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

变量	目的
MODEL_ID	供应商选择器（OpenAI，Bedrock，Anthropic，Google，Groq）。
TEMPERATURE	抽样温度（侧边栏滑块）。
MAX_TOKENS	令牌限制（侧边栏）。

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

MCP端点位于**servers_config.json**中——编辑以添加/删除服务器而无需更改代码。

---

💬 使用游乐场

1. 选择供应商 · 在侧边栏中选择您的LLM，并粘贴相应的凭据。
2. 连接MCP服务器 · 切换连接；可用工具出现在MCP工具列表中。
3. 聊天 · 输入一个问题。
   • 如果已连接，React代理决定是否调用MCP工具（如get_current_weather）。
   • 否则，它会退回到纯LLM聊天。
4. 检查工具调用 · 工具调用以YAML块的形式返回，包含输入和输出。

尝试："明天巴库的天气会怎么样，100美元等于多少阿塞拜疆马纳特？"

---

🛠️ 包含的MCP服务器

天气服务 :8000

mcp = FastMCP("天气服务", 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("货币兑换", 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
• Streamlit