Mcp Web Client
What is Mcp Web Client
MCP Web Client is a web-based client for the Model Context Protocol (MCP) designed to create and manage advanced Chatbot applications, integrating with backend MCP servers via Server-Sent Events (SSE).
Use cases
Use cases include managing multiple Chatbots for customer support, real-time chat applications, and integrating various MCP servers for enhanced communication and interaction.
How to use
To use MCP Web Client, clone the repository, install the necessary dependencies for both frontend and backend, configure environment variables, and start the development server using Docker Compose. Access the application via http://localhost:3000.
Key features
Key features include multi-Chatbot management through Dify integration, MCP server integration via SSE, real-time interaction capabilities, an intuitive user interface with modern design and Markdown support, and lightweight deployment using SQLite.
Where to use
MCP Web Client can be used in various fields such as customer service, interactive applications, and any domain requiring advanced Chatbot functionalities.
Clients Supporting MCP
The following are the main client software that supports the Model Context Protocol. Click the link to visit the official website for more information.
Overview
What is Mcp Web Client
MCP Web Client is a web-based client for the Model Context Protocol (MCP) designed to create and manage advanced Chatbot applications, integrating with backend MCP servers via Server-Sent Events (SSE).
Use cases
Use cases include managing multiple Chatbots for customer support, real-time chat applications, and integrating various MCP servers for enhanced communication and interaction.
How to use
To use MCP Web Client, clone the repository, install the necessary dependencies for both frontend and backend, configure environment variables, and start the development server using Docker Compose. Access the application via http://localhost:3000.
Key features
Key features include multi-Chatbot management through Dify integration, MCP server integration via SSE, real-time interaction capabilities, an intuitive user interface with modern design and Markdown support, and lightweight deployment using SQLite.
Where to use
MCP Web Client can be used in various fields such as customer service, interactive applications, and any domain requiring advanced Chatbot functionalities.
Clients Supporting MCP
The following are the main client software that supports the Model Context Protocol. Click the link to visit the official website for more information.
Content
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（用于开发和部署）
开发环境设置
- 克隆仓库
git clone https://github.com/yourusername/mcp-web-client.git
cd mcp-web-client
- 安装前端依赖
cd frontend
pnpm install
- 安装后端依赖
cd ../backend
pnpm install
- 配置环境变量
创建前端和后端的 .env 文件，根据 .env.example 填写必要的环境变量。
- 启动开发服务器
# 启动前后端（在项目根目录执行）
docker-compose up
- 访问应用
打开浏览器访问 http://localhost:3000
许可证
本项目采用 MIT 许可证。
Dev Tools Supporting MCP
The following are the main code editors that support the Model Context Protocol. Click the link to visit the official website for more information.
