mcp-sse-webui可视化实战项目：基于MCP的webui服务，支持连接多个sse服务端（附完整源码） - 链载Ai

在人工智能技术快速发展的今天，**模型上下文协议（Model Context Protocol，MCP）**正成为连接AI模型与现实世界的桥梁。无论是开发者还是企业用户，掌握MCP的核心原理和应用方法都至关重要。本文将从定义到实战，带你全面了解这一协议。

本次实战项目提供了mcp的webui 可视化界面，支持连接多个sse的mcp服务端;

一、mcp的sse的webui可视化项目：支持多个sse服务端连接

项目介绍

mcp的webui 可视化界面，支持连接多个sse的mcp服务端；

v1.2 版本更新新增webui界面，方便用户问答；支持配置多个sse的服务端；

项目GitHub地址：
https://github.com/aixiaoxin123/mcp_demo_project

ingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;font-weight: 400;letter-spacing: normal;orphans: 2;text-align: justify;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;white-space: normal;background-color: rgb(255, 255, 255);text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;">**开源项目演示地址

项目特点：

支持Claude、OpenAI、DeepSeek、Qwen等多种大模型
天气查询API采用OpenWeatherMap
支持sse、stdio两种模式；
mcp的webui 可视化界面；
支持连接多个sse的mcp服务端;

部署教程

1. 下载代码


gitclonehttps://github.com/aixiaoxin123/mcp_demo_project.gitcdmcp_demo_project

2. 创建conda环境


condacreate -n mcp_demo python=3.10condaactivate mcp_demo

3. 安装uv工具


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

4. 创建并激活虚拟环境


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

5. 安装依赖包


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

6. 配置环境变量


#进入webui_demo 的文件夹cdmcp_webui_demo

编辑mcp_webui_demo 目录下的 .env文件，填入你的大模型API密钥

修改你的 DEEPSEEK_API_KEY 的值，替换成你的大模型密钥；

7. 运行mcp的webui服务


#运行webui界面，端口默认为7860
uvrun webui_deepseek.py

使用教程

访问界面：

http://localhost:7860/

输入问题：帮我查找知识图谱相关的最新的论文

支持：实时返回结果；

运行结果截图：

在魔塔的mcp社区，选择合适的mcp服务，填入mcp.json文件中，即可使用；

https://modelscope.cn/mcp

配置mcp的服务端：

或者修改 mcp.json 文件；

通过本教程，你已经学会了如何使用MCP 的webui的可视化实战。支持客户端连接多个sse的服务器端；可视化的界面，清晰地展示了工具调用的流程，方便用户测试自己的mcp服务端；