MCP Web Client

MCP Web Client

By jinruoxinchen GitHub

MCP Web Client project

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).

How to use MCP Web Client?

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. Access the application through your web browser at http://localhost:3000.

Key features of MCP Web Client?

  • Multi Chatbot Management: Integrates Dify for creating and managing Chatbots.
  • MCP Server Integration: Connects and manages multiple MCP servers via SSE.
  • Real-time Interaction: Enables real-time chat and tool invocation using SSE.
  • Intuitive User Interface: Modern, responsive UI supporting Markdown and code highlighting.
  • Lightweight Deployment: Utilizes SQLite for easy deployment and testing.

Use cases of MCP Web Client?

  1. Creating and managing multiple Chatbot applications.
  2. Real-time interaction with users through Chatbots.
  3. Integrating various MCP servers for enhanced functionality.

FAQ from MCP Web Client?

  • What technologies are used in MCP Web Client?

The frontend is built with Next.js and React, while the backend uses Node.js and Express.

  • Is there a license for this project?

Yes, this project is licensed under the MIT License.

  • How can I contribute to the project?

You can contribute by forking the repository, making changes, and submitting a pull request.

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（用于开发和部署）

开发环境设置

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

No tools information available.
No content found.