MCP Web Client

A Web-based MCP (Model Context Protocol) client for creating and managing advanced Chatbot applications, integrated with backend MCP servers via SSE (Server-Sent Events).

Features

• Multi-Chatbot Management: Integrates with Dify for Chatbot creation and management.
• MCP Server Integration: Connects to and manages multiple MCP servers via SSE.
• Real-time Interaction: Enables real-time chat and tool invocation using SSE.
• Intuitive User Interface: A modern, responsive UI with Markdown and code highlighting support.
• Lightweight Deployment: Uses SQLite for easy and fast deployment and testing.

Architecture

The MCP Web Client adopts a front-end/back-end separated architecture:

• Frontend: A Single Page Application built with Next.js and React.
• Backend: RESTful API and SSE service built with Node.js and Express.
• MCP Integration: Uses supergateway to connect to various MCP servers.
• Chatbot Management: Integrates with Dify's API for Chatbot management.

Quick Start

Environment Requirements

• Node.js >= 20.0.0
• npm or pnpm
• Docker and Docker Compose (for development and deployment)

Development Environment Setup

1. Clone the repository

git clone https://github.com/yourusername/mcp-web-client.git
cd mcp-web-client

2. Install frontend dependencies

cd frontend
pnpm install

3. Install backend dependencies

cd ../backend
pnpm install

4. Configure environment variables

Create .env files for the frontend and backend, filling in the required environment variables based on .env.example.

5. Start the development server

# Start the frontend and backend (execute in the project root directory)
docker-compose up

6. Access the application

Open your browser and visit http://localhost:3000

License

This project is licensed under the MIT License.