# mcp-web-client

> MCP Client

This repository hosts a web-based MCP client for creating and managing advanced chatbot applications, integrating with backend MCP servers via SSE for real-time interaction and Dify for chatbot management.

## Overview

- **Category:** Communication
- **Language:** TypeScript
- **Stars:** 27
- **Forks:** 1
- **Owner:** jinruoxinchen
- **GitHub:** https://github.com/jinruoxinchen/mcp-web-client
- **Created:** 2025-03-19T03:57:23+00:00
- **Updated:** 2025-03-26T07:24:21+00:00
- **Source:** https://model-context-protocol.com/clients/web-client-chatbot-management-mcp-dify

## Setup

## Setup

1. Clone the repository:

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

2. Install frontend dependencies:

```bash
cd frontend
pnpm install
```

3. Install backend dependencies:

```bash
cd ../backend
pnpm install
```

4. Configure environment variables:
Create .env files for frontend and backend, and fill in the required environment variables according to .env.example.

5. Start the development server:

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

6. Access the application:
Open your browser and visit http://localhost:3000

## Tools

## Available Tools

1. **多 Chatbot 管理**: Integrate Dify to create and manage Chatbots.
2. **MCP 服务器集成**: Connect and manage multiple MCP servers via SSE.
3. **实时交互**: Real-time chat and tool invocation using SSE.
4. **直观的用户界面**: Modern, responsive user interface with Markdown and code highlighting support.
5. **轻量级部署**: Lightweight deployment using SQLite database.