MCP母线
强大的视觉构建器 模型上下文协议（MCP）服务器 具有基于双节点的UI选项（React Flow和GoJS）和Python FastAPI后端。
特性
- 🎨 双图库：在React Flow或GoJS之间进行选择，以获得您喜欢的绘图体验
- 🔌 MCP服务器生成器：可视化设计和生成完整的MCP服务器
- 🛠️ 工具创建：使用输入模式和实现定义自定义工具
- 📚 资源管理：使用URI和MIME类型配置资源
- 💬 提示模板：使用参数创建可重用的提示模板
- 📦 一键导出：将完整的MCP服务器导出为现成的ZIP文件
- 🚀 FastAPI后端：具有RESTful API的高性能Python后端
- 🐳 Docker支持：使用Docker和Docker Compose轻松部署
- 💾 实时持久性：保存并加载您的设计
什么是MCP？
模型上下文协议（MCP）是一种开放协议，可实现LLM应用程序与外部数据源和工具之间的无缝集成。MCP总线使得无需编写代码即可直观地构建MCP服务器变得容易。
项目结构
MCP-Busbar/
├── backend/ # FastAPI backend
│ ├── app/
│ │ ├── __init__.py
│ │ ├── main.py # Main FastAPI application
│ │ ├── models.py # MCP data models
│ │ └── mcp_generator.py # MCP server code generator
│ ├── requirements.txt
│ └── Dockerfile
│
├── frontend/ # React frontend
│ ├── src/
│ │ ├── components/
│ │ │ ├── Flow.jsx # React Flow diagram
│ │ │ ├── GoJSDiagram.jsx # GoJS diagram
│ │ │ ├── MCPServerNode.jsx # MCP Server node
│ │ │ ├── MCPToolNode.jsx # Tool node
│ │ │ ├── MCPResourceNode.jsx # Resource node
│ │ │ └── MCPPromptNode.jsx # Prompt node
│ │ ├── services/
│ │ │ └── api.js # API client
│ │ ├── styles/
│ │ ├── App.jsx
│ │ └── main.jsx
│ ├── package.json
│ ├── vite.config.js
│ └── Dockerfile
│
├── docker-compose.yml # Production setup
├── docker-compose.dev.yml # Development setup
└── .env.example先决条件
选项1：使用Docker（推荐）
- 码头工人：20.10或更高
- Docker Compose：2.0或更高
选项2：手动设置
- python：3.8或更高
- Node.js：16或以上
- npm：7或更高
Docker快速入门（推荐）
生产模式
# Clone and start
docker-compose up --build
# Access the application
# Frontend: http://localhost
# Backend: http://localhost:8000
# API Docs: http://localhost:8000/docs开发模式（热重载）
docker-compose -f docker-compose.dev.yml up --build
# Frontend: http://localhost:3000
# Backend: http://localhost:8000Docker命令
# Start in background
docker-compose up -d
# View logs
docker-compose logs -f
# Stop containers
docker-compose down
# Rebuild after changes
docker-compose up --build
# Clean up everything
docker-compose down -v手动设置
后端设置
cd backend
python -m venv venv
# Activate virtual environment
source venv/bin/activate # Linux/Mac
venv\Scripts\activate # Windows
# Install dependencies
pip install -r requirements.txt
# Run server
uvicorn app.main:app --reload --host 0.0.0.0 --port 8000前端设置
cd frontend
npm install
npm run dev使用MCP母线
1.选择您的图表库
MCP母线支持两个强大的图表库：
- 反应流：现代、轻便、高度可定制
- GoJS：功能丰富的商业库（免费评估/非商业用途）
使用UI中的切换按钮在它们之间切换。
2.构建您的MCP服务器
创建MCP服务器节点
- 该图以 MCP服务器 节点（紫色，带🖥️ 图标）
- 点击“配置”进行设置：
- 服务器名称 - 描述 - 版本
添加工具
- 添加 工具节点 （橙色，带🔧 图标）
- 配置每个工具：
- 名字：工具标识符（例如。， get_weather) - 描述：这个工具做什么 - 输入架构：工具参数的JSON模式 - 实施：用于工具逻辑的Python代码
工具配置示例：
{
"type": "object",
"properties": {
"location": {
"type": "string",
"description": "City name"
}
},
"required": ["location"]
}添加资源
- 添加 资源节点 （绿色，带📄 图标）
- 配置：
- 名字：资源标识符 - 统一资源标识符：资源位置（例如。， file:///data/notes.txt) - 描述：资源描述 - mime类型：内容类型（例如。， text/plain)
添加提示
- 添加 提示节点 （蓝色，带💬 图标）
- 配置：
- 名字：提示标识符 - 描述：目的明确 - 模板：提示文本 {{variable}} 占位符 - 参数：参数定义的JSON数组
提示模板示例：
Analyze the following {{data_type}} and provide insights:
{{content}}
Focus on: {{focus_area}}3.连接节点
- 从工具/资源/提示中绘制连接 到 MCP服务器节点
- 连接定义哪些组件是服务器的一部分
4.生成和导出
点击 “导出MCP服务器（ZIP）” 下载包含以下内容的完整软件包：
server.py-完成MCP服务器的实施requirements.txt-Python依赖关系README.md-使用说明
5.使用您的MCP服务器
# Unzip the export
unzip my_mcp_server.zip
cd my_mcp_server
# Install dependencies
pip install -r requirements.txt
# Run the server
python server.py6.与克劳德桌面集成
添加到您的Claude Desktop配置(claude_desktop_config.json):
{
"mcpServers": {
"my-server": {
"command": "python",
"args": ["/path/to/server.py"]
}
}
}API终点
流量管理
GET /-API信息GET /health-健康检查GET /nodes-获取所有节点POST /nodes-创建节点GET /edges-获取所有边缘POST /edges-创建边GET /flow-获得全部流量POST /flow-节省流量DELETE /flow-清晰的流动
MCP服务器管理
POST /mcp/server-创建/更新MCP服务器配置GET /mcp/servers-列出所有MCP服务器GET /mcp/server/{id}-获取特定服务器DELETE /mcp/server/{id}-删除服务器POST /mcp/generate/{id}-生成服务器代码POST /mcp/export/{id}-将服务器导出为ZIPPOST /mcp/flow-to-server-将流转换为MCP服务器
节点类型
MCP服务器节点（紫色）
MCP服务器的中央集线器。所有工具、资源和提示都连接到此节点。
属性：
- 名称：服务器标识符
- 说明：服务器用途
- 版本：语义版本
工具节点（橙色）
定义LLM可以调用的可执行工具。
属性：
- 名称：工具函数名称
- 说明：工具文档
- 输入模式：参数的JSON模式
- 实现：Python代码
资源节点（绿色）
将数据源暴露给MCP服务器。
属性：
- 名称：资源标识符
- URI:资源位置
- 说明：资源文档
- MIME类型：内容类型
提示节点（蓝色）
具有变量替换的可重用提示模板。
属性：
- 名称：提示标识符
- 说明：目的明确
- 模板：文本
{{variables}} - Arguments：参数定义数组
图表库
反应流
赞成的意见：
- 麻省理工学院授权（所有用途免费）
- 重量轻，性能好
- 非常适合简单到中等复杂度的图表
- 活跃的开源社区
最适合： 大多数用例，开源项目
GoJS
赞成的意见：
- 功能丰富
- 先进的布局算法
- 专业等级图
- 广泛的定制
欺骗：
- 生产使用需要商业许可证（1500美元以上）
- 更大的捆绑尺寸
最适合： 复杂的企业图、商业项目
许可： GoJS可免费用于评估和非商业用途。对于商业用途，请在以下网址购买许可证 gojs.net.
示例
气象工具MCP服务器
服务器配置：
- 名称：“天气服务器”
- 说明：“提供天气信息”
工具：
- 姓名：
get_weather - 描述：“获取某个地点的当前天气”
- 输入架构：
{
"type": "object",
"properties": {
"location": {"type": "string"}
}
}- 实施：
import requests
weather_data = requests.get(f"https://api.weather.com/{arguments['location']}")
return f"Weather in {arguments['location']}: {weather_data.json()}"文档资源服务器
服务器配置：
- 名称：“知识库”
资源：
- 姓名：
company_docs - URI：
file:///docs/company - 说明：“公司文件”
- MIME类型：
text/markdown
发展
后端
编辑 backend/app/main.py API变更。
后端使用：
- 快速API：现代异步web框架
- 派丹蒂克：数据验证
- 跨域资源共享：配置为前端访问
前端
编辑文件 frontend/src/.
前端使用：
- 反应18：带有钩子的现代React
- 维特：快速构建工具
- 反应流：免费的基于节点的UI
- GoJS：基于商业节点的UI
- 阿西奥斯：HTTP客户端
环境变量
复制 .env.example 到 .env:
VITE_API_URL=http://localhost:8000生产大楼
Docker（推荐）
docker-compose up --build手动构建
后端：
uvicorn app.main:app --host 0.0.0.0 --port 8000前端：
cd frontend
npm run build
npm run preview故障排除
Docker问题
- 端口冲突：修改中的端口
docker-compose.yml - 构建失败：确保Docker有4GB以上的内存
- 未反映的变化：使用
docker-compose up --build
后端问题
- 导入错误：检查虚拟环境是否已激活
- 正在使用的端口：在uvicorn命令中更改端口
前端问题
- API连接失败：确保后端在端口8000上运行
- 未找到模块：运行
npm install再次 - GoJS许可警告：正常用于评估
许可证
这个项目是开源的，可以在MIT许可证下使用。
注： GoJS是一个独立的库，有自己的许可要求。看 gojs.net 了解详情。
贡献
欢迎投稿！请提交拉取请求。
了解更多
- MCP文件: https://modelcontextprotocol.io
- 反应流: https://reactflow.dev
- GoJS: https://gojs.net
- 快速API: https://fastapi.tiangolo.com
支持
对于问题或疑问：
- 在GitHub上打开一个问题
- 查看API文档，网址：http://localhost:8000/docs
______________________________________________________________________
内置于 ❤️ 对于MCP社区