mcp-sse-webui visualization project: webui service based on MCP, supporting connection to multiple sse servers (with complete source code)

As artificial intelligence technology develops rapidly, the Model Context Protocol (MCP) is becoming a bridge between AI models and the real world. It is crucial for both developers and enterprise users to master the core principles and application methods of MCP. This article will give you a comprehensive understanding of this protocol from definition to practice.

This practical project provides a webui visualization interface for mcp, which supports connecting to multiple sse mcp servers;

1. MCP's SSE webui visualization project: supporting multiple SSE server connections

Project Introduction

MCP's webui visual interface supports connecting to multiple SSE's MCP servers;

v1.2 version update adds a new webui interface to facilitate user questions and answers; supports configuring multiple sse servers;

Project GitHub address : https://github.com/aixiaoxin123/mcp_demo_project

**Open source project demonstration address

https://mcp.aixiaoxin.cloud/

Project Features :

• Supports multiple large models such as Claude, OpenAI, DeepSeek, Qwen, etc.
• Weather query API uses OpenWeatherMap
• Supports two modes: sse and stdio;
• mcp's webui visual interface;
• Supports connecting to multiple SSE MCP servers;

Deployment Tutorial

1. Download the code

git  clone  https://github.com/aixiaoxin123/mcp_demo_project.gitcd  mcp_demo_project

2. Create a conda environment

conda  create -n mcp_demo python= 3 . 10conda  activate mcp_demo

3. Install UV tools

pip  install uv -i https://pypi.tuna.tsinghua.edu.cn/simple/uv --version

4. Create and activate a virtual environment

uv venv
# Linux/Macsource  .venv/bin/activate
# Windows.venv\Scripts\activate

5. Install dependency packages

uv  pip install -r requirements.txt -i https://pypi.tuna.tsinghua.edu.cn/simple/ 

6. Configure environment variables

#Enter the webui_demo foldercd  mcp_webui_demo 

edit.env in the mcp_webui_demo directoryFile, fill in your big model API key

Modify the value of your DEEPSEEK_API_KEY and replace it with your big model key;

7. Run the webui service of mcp

#Run the webui interface, the default port is 7860
uv  run webui_deepseek.py

Tutorial

Access interface:

http://localhost:7860/

Input question: Help me find the latest papers related to knowledge graphs

Support: real-time return of results;

Screenshot of the running results:

In the MCP community of Magic Tower, select the appropriate MCP service and fill it in the mcp.json file to use it;

https://modelscope.cn/mcp

Configure the mcp server:

Or modify the mcp.json file;

Through this tutorial, you have learned how to use the MCP webui visual practice. Support the client to connect to multiple sse servers; the visual interface clearly shows the tool call process, which is convenient for users to test their own mcp server;