MCP Client Chat

简单MCP客户端

与MCP（模型上下文协议）工具集成的多模式AI聊天客户端。

主办地点：https://mcp-client-chat.valiantlynx.com

建筑

本项目遵循清洁建筑原则：

• 核心: an agent from machine-core -业务逻辑与MCP客户端
• 前端: app.py -流线型网络界面

特性

• 🤖 多模式AI聊天（文本+图像）
• 🔧 MCP工具集成 mcp.json
• 📝 支持图像和丰富内容的Markdown渲染
• 🖼️ 支持多张图片上传
• 📊 令牌使用跟踪
• 🔄 流媒体响应
• ⚙️ 可配置的模型和MCP服务器

安装

# Install dependencies
uv sync

用法

流线型Web界面

# Run the web app
uv run streamlit run src/mcp_client_chat/app.py

# Or with custom port
uv run streamlit run src/mcp_client_chat/app.py --server.port 8501

然后打开http://localhost:8501在您的浏览器中。

命令行界面

# Single query
uv run python src/mcp_client_chat/client.py "What is the weather?"

# With single image
uv run python src/mcp_client_chat/client.py "Describe this image" -i image.png

# With multiple images
uv run python src/mcp_client_chat/client.py "Compare these images" -i img1.png -i img2.jpg

# With image URL
uv run python src/mcp_client_chat/client.py "What's in this?" -i https://example.com/image.png

# With data URL
uv run python src/mcp_client_chat/client.py "Analyze" -i "data:image/jpeg;base64,/9j/4AAQ..."

配置

MCP服务器(mcp.json)

以VS代码格式配置MCP服务器：

{
  "servers": {
    "playwright": {
      "type": "http",
      "url": "https://playwright-mcp.valiantlynx.com/mcp"
    },
    "task-manager": {
      "type": "http",
      "url": "http://127.0.0.1:8081/mcp"
    },
    "notifier": {
      "type": "stdio",
      "command": "uv",
      "args": ["run", "python", "path/to/notify.py"]
    }
  }
}

环境变量

在中设置LLM提供程序配置 .env 或环境：

# Azure OpenAI
AZURE_OPENAI_API_KEY=your-key
AZURE_OPENAI_ENDPOINT=https://your-endpoint.openai.azure.com/
AZURE_OPENAI_DEPLOYMENT=gpt-4o

# Or OpenAI
OPENAI_API_KEY=your-key

项目结构

mcp-client-chat/
├── src/mcp_client_chat/
│   ├── agents/       # Core business logic. a simple chat agent
│   ├── app.py          # Streamlit frontend
│   ├── config.py       # Configuration & prompts
│   └── __init__.py
├── mcp.json            # MCP server configuration
├── pyproject.toml      # Dependencies
└── README.md

图像支持

客户端支持三种类型的图像输入：

1. 本地文件: ./image.png
2. HTTP/HTTPS URL: https://example.com/image.png
3. 数据URL: data:image/jpeg;base64,...

所有图像类型都会自动处理并转换为模型的base64数据URL。

发展

核心客户(client.py)

这 MCPClient 类提供：

• __init__(model_name, tools_urls, mcp_config_path) -初始化客户端
• process_image(image_path) -处理和编码图像
• run_query(query, image_paths) -使用可选图像执行查询

前端(app.py)

Streamlit应用程序提供：

• 带有markdown渲染的聊天界面
• 图像上传和预览
• MCP客户端配置
• 令牌使用跟踪
• 聊天记录管理

许可证

麻省理工学院