[分享] 一款基于 Web 的 MCP 客户端可以快速访问基于 SSE 和 Streamable HTTP 类型的各种 MCP 服务器，方便快捷，即用即走。

最近折腾 MCP 发现个问题就是好多 AI 客户端太臃肿不够简洁，不够轻量于是就搞了个轻量基于 Web 的 MCP Playground （基于开源的 KChat 二次开发，由于 KChat 只有聊天对话不支持 MCP 于是二开主要增加浏览器端直接调用 MCP 服务器的功能）可以快速访问基于 SSE 和 Streamable HTTP 类型的远程 MCP 服务器，支持一键式导入、配置和连接 MCP 工具。

无需注册即可使用，方便快捷，即用即走，可以直接添加任意第三方远程 MCP 服务器使用。

产品地址：MCP Explorer Playground

项目概述

本项目是一个功能丰富的 AI 聊天应用，基于 Model Context Protocol (MCP) 构建。它允许用户连接和管理多个 MCP 服务器，并通过这些服务器调用各种工具来增强 AI 聊天体验。该应用内置多种 AI 模型包括 OpenAI GPT 、Google Gemini 、ZhipuAI 、Qwen 等系列，并提供个性化的流式响应等功能。项目采用前后端分离架构，前端使用 React 和 TypeScript 构建，后端使用 Node.js 和 Express 实现。

项目架构

前端架构

1. 技术栈：

   • React 19 + TypeScript
   • Tailwind CSS 用于样式
   • Vite 6 作为构建工具
   • React Hooks 和 Context API 用于状态管理

2. 组件结构：

   • App.tsx：主应用组件，负责全局状态管理和路由
   • ChatView.tsx：聊天界面组件，处理消息显示和用户交互
   • ChatInput.tsx：聊天输入组件，支持文本输入和工具选择
   • McpServerModal.tsx：MCP 服务器配置模态框，用于添加和编辑服务器
   • Sidebar.tsx：侧边栏组件，显示聊天历史、文件夹和角色
   • SettingsModal.tsx：设置模态框，管理应用配置
   • WelcomeView.tsx：欢迎界面，展示应用介绍
   • ModelSelector.tsx：模型选择器，支持多种 AI 模型切换

3. 状态管理：

   • 使用 React Context API 进行全局状态管理
   • 使用 useState 、useEffect 和自定义 Hooks 进行组件级状态管理
   • 使用 useChatMessaging Hook 处理复杂的聊天逻辑和消息流
   • 使用 useSettings 和 useChatData Hooks 管理设置和聊天数据

4. 国际化支持：

   • 通过 contexts/LocalizationContext 提供多语言支持
   • 支持英语、中文、繁体中文、日语、韩语、俄语、法语、德语、西班牙语、意大利语、波兰语等多种语言

5. 核心服务：

   • mcpService.ts：处理 MCP 服务器连接、工具获取和工具调用
   • backendService.ts：与后端 API 通信，处理聊天请求
   • storageService.ts：管理本地数据存储和持久化
   • modelService.ts：管理 AI 模型相关功能

后端架构

1. 技术栈：

   • Node.js + Express
   • CORS 中间件处理跨域请求
   • dotenv 用于环境变量管理
   • @modelcontextprotocol/sdk 用于 MCP 协议支持

2. 核心功能：

   • 代理请求到各种 AI 模型 API （ Google Gemini 、OpenAI 等）
   • MCP 服务器连接和工具调用代理
   • 流式响应处理
   • 设置管理

3. API 端点：

   • /chat/api/completions：聊天完成接口
   • /chat/mcp/connect：MCP 服务器连接接口
   • /chat/mcp/tools：获取 MCP 工具列表接口
   • /chat/mcp/tools/:toolName：调用 MCP 工具接口
   • /chat/api/settings：获取应用设置接口
   • /health：健康检查接口

4. MCP 服务器支持：

   • 支持多种 MCP 服务器类型：sse 、streamable-http （浏览器暂不支持 stdio 类型本地调用）
   • 实现了 MCP 客户端连接和工具调用代理
   • 使用缓存机制提高性能
   • 支持通过 URL 参数或 headers 进行认证

核心功能分析

1. MCP 服务器管理

功能描述

用户可以添加、编辑和删除 MCP 服务器配置，包括服务器名称、类型、URL 、请求头等信息。支持通过表单或 JSON 配置方式添加服务器，并能测试服务器连接和工具调用。

技术实现

• 通过 McpServerModal 组件提供服务器配置界面
• 支持表单和 JSON 两种配置方式
• 支持服务器连接测试和工具列表获取
• 支持在添加服务器时自动启用服务器工具
• 服务器配置存储在应用设置中

2. 聊天功能

功能描述

用户可以与 AI 模型进行聊天，支持文本输入、工具调用等功能。提供流式响应显示、消息编辑、删除等操作。

技术实现

• 使用 useChatMessaging Hook 处理复杂的聊天逻辑
• 支持流式响应显示，提供更好的用户体验
• 实现了多轮工具调用机制，支持复杂的任务执行
• 支持消息编辑、删除和重新生成

3. MCP 工具调用

功能描述

用户可以通过聊天界面调用 MCP 服务器提供的工具，获取外部数据或执行特定操作。支持多种工具参数类型，并能显示工具调用结果。

技术实现

• 通过后端代理调用 MCP 工具，确保安全性
• 支持多种工具参数类型
• 实现了工具调用结果的格式化显示
• 支持工具调用历史记录和测试功能
• 在 MCP 服务器配置界面提供工具测试功能

4. 流式响应处理

功能描述

AI 模型的响应以流式方式显示，提供更好的用户体验。支持显示 AI 的思考过程，让用户了解模型的推理过程。

技术实现

• 使用 Server-Sent Events (SSE) 技术实现流式响应
• 前端通过 sendMessageStream 函数处理流式数据
• 支持实时显示 AI 思考过程（ thoughts ）
• 支持在工具调用后继续流式输出

5. 对话管理

功能描述

用户可以创建、编辑、删除和归档对话，支持文件夹组织对话，方便管理大量对话历史。

技术实现

• 通过 Sidebar 组件管理对话历史
• 支持文件夹功能，可以创建和管理对话文件夹
• 支持对话的归档和恢复
• 支持对话标题自动生成

项目特点与亮点

1. 完整的 MCP 协议支持

项目实现了对 MCP (Model Context Protocol) 协议的完整支持，包括：

• 多种传输方式：sse 、streamable-http （浏览器暂不支持 stdio 类型本地调用）
• 服务器连接管理和会话保持
• 工具列表获取和工具调用
• 工具调用结果处理和展示
• 支持通过 URL 参数或 headers 进行服务器认证

2. 优雅的用户界面设计

• 采用现代化的 UI 设计，支持明暗主题切换
• 实现了响应式布局，适配不同屏幕尺寸
• 提供丰富的交互反馈，如加载状态、工具调用状态等
• 支持多语言国际化，满足不同用户需求
• 提供流畅的流式响应显示体验

3. 高效的工具调用机制

• 实现了多轮工具调用机制，支持复杂的任务执行
• 使用缓存机制提高工具列表获取效率
• 支持工具调用结果的格式化展示和交互
• 实现了工具调用的错误处理和重试机制
• 在 MCP 服务器配置界面提供工具测试功能

4. 灵活的配置管理

• 支持多种 MCP 服务器配置方式：表单配置和 JSON 配置
• 提供了丰富的服务器配置选项，如请求头、环境变量等
• 实现了配置的本地存储和持久化
• 支持通过 URL 参数快速添加服务器配置

5. 强大的扩展性

• 模块化的代码结构，便于功能扩展
• 清晰的接口定义，支持第三方 MCP 服务器集成
• 灵活的工具配置机制，支持不同类型的工具调用
• 可扩展的国际化支持，便于添加新语言

6. 丰富的 AI 模型支持

• 支持多种 AI 模型，包括 OpenAI GPT 、Google Gemini 、ZhipuAI 、Qwen 等系列
• 支持模型切换，满足不同场景需求
• 支持流式响应，提供更好的用户体验

7. 完善的对话管理

• 支持对话的创建、编辑、删除和归档
• 支持文件夹功能，方便管理大量对话历史
• 支持对话标题自动生成

8. 高级功能支持

• 支持文件上传和显示
• 支持消息编辑、删除和重新生成
• 支持建议回复功能
• 支持显示 AI 思考过程（ thoughts ）
• 支持全局系统提示词设置

技术难点与解决方案

1. MCP 服务器连接管理

难点：不同类型的 MCP 服务器需要不同的连接方式和会话管理机制，同时需要处理认证和会话保持。

解决方案：

• 实现了统一的 MCP 服务器接口，抽象不同类型服务器的差异
• 使用工厂模式创建不同类型的 MCP 客户端
• 实现了会话管理和连接池，提高连接复用效率
• 支持通过 URL 参数或 headers 进行服务器认证
• 使用缓存机制减少重复连接和工具列表获取

2. 流式响应处理

难点：需要实时处理和显示 AI 模型的流式响应，同时处理工具调用状态和 AI 思考过程。

解决方案：

• 使用 Server-Sent Events (SSE) 技术实现流式响应
• 实现了响应解析和状态管理机制
• 使用异步生成器处理流式数据，提高代码可读性
• 在工具调用后继续流式输出，提供连贯的用户体验
• 支持显示 AI 的思考过程（ thoughts/reasoning_content ）

3. 多轮工具调用

难点：需要实现多轮工具调用机制，同时避免无限循环和性能问题，确保工具调用结果正确传递。

解决方案：

• 实现了工具调用轮数限制和超时机制
• 使用状态机管理工具调用流程
• 优化了工具调用结果的传递和处理机制
• 支持并行工具调用，提高执行效率
• 实现了工具调用结果的格式化展示

4. 前后端数据同步

难点：需要确保前后端数据的一致性，特别是在处理复杂的工具调用和状态更新时。

解决方案：

• 通过 REST API 实现实现数据同步
• 实现了乐观更新和回滚机制
• 使用全局状态管理，确保数据一致性
• 通过事件机制通知 UI 更新状态

5. 工具配置管理

难点：需要在多个对话中独立管理 MCP 工具配置，同时支持全局和对话级别的配置。

解决方案：

• 实现了对话级别的工具配置存储
• 支持在 MCP 服务器配置界面测试工具
• 提供了直观的工具选择界面
• 实现了工具配置的持久化存储

总结

本项目是一个功能完善、设计优雅的 AI 聊天应用，基于 Model Context Protocol (MCP) 构建。它通过直观的用户界面和强大的功能，让用户能够轻松连接和管理多个 MCP 服务器，并通过这些服务器调用各种工具来增强 AI 聊天体验。项目支持多种 AI 模型、个性化角色设置、文件上传、流式响应等高级功能。

项目的技术亮点包括完整的 MCP 协议支持、优雅的用户界面设计、高效的工具调用机制、灵活的配置管理和丰富的功能特性。同时，项目也面临一些技术难点，如 MCP 服务器连接管理、流式响应处理、多轮工具调用和前后端数据同步，但通过合理的架构设计和解决方案，这些难点都得到了有效处理。

总体而言，本项目不仅为用户提供了实用的 AI 聊天和 MCP 工具调用功能，也为开发者提供了一个学习 MCP 协议、现代前端开发技术和 AI 应用开发的优秀案例。项目具有良好的扩展性和可维护性，为未来的功能扩展和性能优化提供了坚实的基础。