AI导哈

多模态AI聊天客户端

一个集成MCP（模型上下文协议）工具的多模态AI聊天客户端，支持文本和图像交互，提供丰富的配置选项和多种图像输入方式。

  • by mythrantic
  • Python
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 mythrantic/mcp-client-chat

使用说明

简单MCP客户端

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

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

聊天代理位于 agents/chat_agent.py 使用 机器核心人工智能代理或组织抽象

建筑

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

  • 核心: 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客户端配置
  • 令牌使用跟踪
  • 聊天记录管理

许可证

麻省理工学院

相关 MCP