在人工智能技术快速发展的今天，**模型上下文协议（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
**开源项目演示地址
https://mcp.aixiaoxin.cloud/
项目特点：
支持Claude、OpenAI、DeepSeek、Qwen等多种大模型 天气查询API采用OpenWeatherMap 支持sse、stdio两种模式； mcp的webui 可视化界面； 支持连接多个sse的mcp服务端;
部署教程
1. 下载代码
git clone https://github.com/aixiaoxin123/mcp_demo_project.gitcd mcp_demo_project
2. 创建conda环境
conda create -n mcp_demo python=3.10conda activate mcp_demo
3. 安装uv工具
pip install uv -i https://pypi.tuna.tsinghua.edu.cn/simple/uv --version
4. 创建并激活虚拟环境
uv venv# Linux/Macsource .venv/bin/activate# Windows.venv\Scripts\activate
5. 安装依赖包
uv pip install -r requirements.txt -i https://pypi.tuna.tsinghua.edu.cn/simple/
6. 配置环境变量
#进入webui_demo 的文件夹cd mcp_webui_demo
编辑mcp_webui_demo 目录下的 .env文件，填入你的大模型API密钥
修改你的 DEEPSEEK_API_KEY 的值，替换成你的大模型密钥；
7. 运行mcp的webui服务
#运行webui界面，端口默认为7860uv run webui_deepseek.py
使用教程
访问界面：
http://localhost:7860/
输入问题：帮我查找 知识图谱 相关的最新的论文
支持：实时返回结果；
运行结果截图：
在 魔塔的mcp社区，选择合适的mcp服务，填入mcp.json文件中，即可使用；
https://modelscope.cn/mcp
配置mcp的服务端：
或者修改 mcp.json 文件；
通过本教程，你已经学会了如何使用MCP 的webui的可视化实战。支持客户端连接多个sse的服务器端；可视化的界面，清晰地展示了工具调用的流程，方便用户测试自己的mcp服务端；
