mcpField
M
MCP Web Client

MCP Web Client

github.com/jinruoxinchenChat Apps27Updated 84w ago
Repository

About MCP Web Client

MCP Web Client is a web-based MCP client for building and managing chatbot applications that connect to MCP servers over SSE. It uses a separated frontend and backend and SQLite, which keeps deployment and testing lightweight.

Key features

  1. 01Multiple chatbot management with Dify integration
  2. 02Connects and manages several MCP servers over SSE
  3. 03Real-time chat and tool calls via SSE
  4. 04Interface with Markdown and code highlighting
  5. 05Lightweight deployment with SQLite

Use cases

  1. 01Quickly setting up and testing chatbot applications
  2. 02Connecting several MCP servers from a web interface
  3. 03Running a development environment with Docker Compose

MCP support

As an MCP client, it connects to and manages backend MCP servers over SSE, using supergateway to reach various MCP servers.

Details

From the project 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 许可证。

Comments

Markdown supported

New to MCP?

From what the protocol is to installing your first server, these answers cover most first questions.

An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.