Happy slice of mcp pizzaMCP.pizza

mcp-web-client

MCP.Pizza Chef: jinruoxinchen

MCP Web Client is a web-based client designed for creating and managing advanced chatbot applications. It integrates multiple MCP servers via Server-Sent Events (SSE) for real-time interaction and tool invocation. Featuring a modern, responsive UI built with Next.js and React, it supports Markdown and code highlighting. The backend uses Node.js and Express with SQLite for lightweight deployment, enabling quick setup and testing. It also integrates Dify API for chatbot management, making it a comprehensive client for MCP workflows.

Use This MCP client To

Manage multiple chatbots through a unified web interface Connect and interact with multiple MCP servers in real time Use SSE for live chat and tool invocation Deploy lightweight MCP client with SQLite backend Integrate Dify API for chatbot creation and management Develop and test MCP chatbot applications quickly Provide a responsive UI supporting Markdown and code highlighting

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

mcp-web-client FAQ

How do I set up the MCP Web Client development environment?
Clone the repository, install frontend and backend dependencies with pnpm, configure environment variables, and start the server using Docker Compose.
What technologies does the MCP Web Client use?
It uses Next.js and React for the frontend, Node.js and Express for the backend, and SQLite for the database.
How does the MCP Web Client connect to MCP servers?
It uses Server-Sent Events (SSE) to establish real-time connections and manage multiple MCP servers.
Can I manage multiple chatbots with this client?
Yes, it integrates the Dify API to create and manage multiple chatbots.
Is the MCP Web Client suitable for production deployment?
Yes, it supports lightweight deployment with Docker and SQLite, suitable for both development and production environments.
Does the client support rich text features?
Yes, it supports Markdown rendering and code syntax highlighting for enhanced chat interactions.
What are the system requirements to run the MCP Web Client?
Requires Node.js 20.0.0 or higher, npm or pnpm, and Docker with Docker Compose for deployment.