mcpField
M
MCP Web Client

MCP Web Client

github.com/jinruoxinchen聊天应用2784 周前更新
代码仓库

关于 MCP Web Client

MCP Web Client 是一个基于 Web 的 MCP 客户端，用于创建和管理 Chatbot 应用，并通过 SSE 与后端 MCP 服务器集成。项目采用前后端分离架构，使用 SQLite，便于快速部署和测试。

主要功能

  1. 01多 Chatbot 管理，集成 Dify
  2. 02通过 SSE 连接和管理多个 MCP 服务器
  3. 03SSE 实时聊天与工具调用
  4. 04支持 Markdown 和代码高亮的界面
  5. 05基于 SQLite 的轻量级部署

适用场景

  1. 01快速搭建并测试 Chatbot 应用
  2. 02在 Web 界面中连接多个 MCP 服务器
  3. 03通过 Docker Compose 进行开发环境部署

MCP 相关

作为 MCP 客户端，通过 SSE 连接和管理后端的 MCP 服务器，并借助 supergateway 接入各类 MCP 服务器。

详细介绍

来自项目 README

MCP Web Client

一个基于 Web 的 MCP (Model Context Protocol) 客户端，用于创建和管理高级 Chatbot 应用，并通过 SSE 与后端 MCP 服务器集成。

特性

  • 多 Chatbot 管理：集成 Dify 进行 Chatbot 的创建和管理
  • MCP 服务器集成：通过 SSE 连接和管理多个 MCP 服务器
  • 实时交互：使用 SSE 进行实时聊天和工具调用
  • 直观的用户界面：现代化、响应式的用户界面，支持 Markdown、代码高亮等
  • 轻量级部署：使用 SQLite 数据库，便于快速部署和测试

架构

MCP Web Client 采用前后端分离的架构：

  • 前端：使用 Next.js 和 React 构建的单页应用
  • 后端：使用 Node.js 和 Express 构建的 RESTful API 和 SSE 服务
  • MCP 集成：使用 supergateway 连接各种 MCP 服务器
  • Chatbot 管理：集成 Dify 的 API 进行 Chatbot 的管理

快速开始

环境需求
  • Node.js >= 20.0.0
  • npm 或 pnpm
  • Docker 和 Docker Compose（用于开发和部署）
开发环境设置
  1. 克隆仓库
git clone https://github.com/yourusername/mcp-web-client.git
cd mcp-web-client
  1. 安装前端依赖
cd frontend
pnpm install
  1. 安装后端依赖
cd ../backend
pnpm install
  1. 配置环境变量

创建前端和后端的 .env 文件，根据 .env.example 填写必要的环境变量。

  1. 启动开发服务器
# 启动前后端（在项目根目录执行）
docker-compose up
  1. 访问应用

打开浏览器访问 http://localhost:3000

许可证

本项目采用 MIT 许可证。

评论

支持 Markdown

第一次接触 MCP？

从协议是什么，到在客户端里装上第一个服务，这几条回答覆盖了大多数入门问题。

一个开放协议，规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话，MCP 服务负责提供工具、资源和提示模板，两者通过标准消息通信，同一个服务可以被不同客户端复用。