MCP.so
ログイン
クライアント

MCP Web Client

@jinruoxinchen

MCP Web Client project

その他
リポジトリ

概要

一个基于 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 许可证。