MCP Chat Desktop 应用程序

项目概述

MCP Chat Desktop 是一个基于模型上下文协议（Model Context Protocol）的应用程序，旨在提供一个多模态对话体验。它支持通过集成各种工具和功能来增强聊天交互，包括文件系统访问、截图捕获等。

功能特点

• 多模态支持：整合多种输入和输出方式，如文本、图片、音频。
• 推理与 LaTeX 支持：支持数学公式和复杂逻辑推理的展示。
• MCP 工具可视化：直观显示可用工具及其调用流程。
• 动态 LLM 配置：允许用户灵活配置和切换不同的大型语言模型。

架构概述

应用程序采用模块化设计，通过插件形式扩展功能。核心组件包括：

1. 用户界面（UI）：提供聊天交互和功能展示。
2. 工具调用系统：负责工具的发现、调用和结果处理。
3. 适配层：兼容多种 LLM 提供商的服务接口。

安装与配置

安装依赖

npm install mcp-chat-ui mcp-server-filesystem mcp-server-puppeteer

配置文件示例

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "server-filesystem",
        "--root=D:/Github/mcp-test"
      ]
    }
  },
  "uiOptions": {
    "theme": "dark",
    "enableMultimodal": true
  }
}

使用说明

1. 启动应用程序：npm run start
2. 打开开发者工具：通过右键菜单或快捷键访问调试界面。
3. 配置服务器插件：
   • 安装所需服务器模块，如 server-everything, server-filesystem, server-puppeteer.
   • 使用 npx 或直接指定可执行文件路径启动服务。

多模态交互示例

const { mcp } = require('@modelcontextprotocol/sdk');
await mcp.showImage('图片URL', '图片标题');

故障排除

启动问题

• 问题：无法找到可执行文件。
  • 解决方法：检查 config.json 中的路径是否正确，建议使用绝对路径。

安装超时

• 问题：npm install 进行到一半停止。
  • 解决方法：设置环境变量 ELECTRON_MIRROR 使用镜像源，或更换网络环境。

打包失败

• 问题：使用 electron-builder 打包时超时。
  • 解决方法：清理缓存目录，建议使用默认终端执行命令。

示例截图

多模态支持

推理与 LaTeX 支持

MCP 工具可视化

MCP 工具调用流程

动态 LLM 配置

开发工具调试