内容
# mcp-flow
一个用于构建和部署MCP（模型上下文协议）服务器的可视化、基于节点的平台，无需编写代码。使用拖放式编辑器设计工具工作流，然后导出与Claude、ChatGPT、Cursor和Copilot兼容的生产就绪TypeScript服务器。
## 架构
```
mcp-flow/
├── frontend/ Next.js 16 (应用路由器) + React 19 + @xyflow/react
│ ├── app/ 页面和全局样式
│ ├── components/
│ │ ├── editor/ 流编辑器、节点、边、面板、模态框
│ │ └── ui/ shadcn/ui 组件
│ └── lib/ Zustand 存储、模板、实用工具
├── backend/ NestJS + Prisma (PostgreSQL)
│ └── src/
│ └── workflow/ 执行、生成和验证端点
└── plan.md 完整项目路线图
```
## 技术栈
| 层级 | 技术 |
| --------- | ----------------------------------------------------- |
| 前端 | Next.js 16, React 19, TypeScript |
| 画布 | @xyflow/react (React Flow) |
| 状态 | Zustand (撤销/重做历史记录，本地存储持久性) |
| UI | shadcn/ui (radix-nova), Tailwind CSS v4 |
| 图标 | Hugeicons |
| 动画 | Framer Motion |
| 后端 | NestJS 11, Prisma, PostgreSQL |
| 目标 | mcp-use (MCP 服务器框架) |
## 功能
### 节点类型
- **输入** - 定义工具名称、描述和类型参数（字符串、数字、布尔值），具有必填/可选和默认值。
- **HTTP 请求** - 配置方法、URL、标头和正文，支持 `{{input.param}}` 和 `{{secret.KEY}}` 变量插值。
- **转换** - 在数据形状之间映射字段（`source.field -> target.field`）或运行内联 JS 表达式。
- **条件** - 基于字段运算符（等于、包含、大于、小于、存在等）的 if/else 分支，支持真/假输出句柄。
- **秘密** - 安全地注入环境变量和 API 密钥。值在 UI 中被掩盖，并生成为 `process.env["KEY"]`。
- **输出** - 选择文本/JSON 响应或交互式小部件输出。
### 编辑器
- 类似 n8n 的左侧边栏，包含分类、搜索和可拖拽的节点调色板。
- 从调色板拖放节点到画布。
- 连接验证（防止无效连接，如输出到输出）。
- 自定义平滑步骤边框，支持删除按钮和选择。
- 每个节点的执行状态高亮显示（运行中、成功、错误）。
- 画布导航的迷你地图。
- 支持撤销/重做，快捷键为 Ctrl+Z 和 Ctrl+Y。
- 自动保存到本地存储，支持重新加载时恢复。
- 工作流名称内联编辑。
- 支持通过键盘（删除/退格键）或配置面板按钮删除节点。
### 模板
首次访问时，模板选择器对话框提供预建的工作流：
- **完整管道（所有节点）** - 使用所有 6 种节点类型（输入、秘密、HTTP、转换、条件和分支输出）的综合演示。
- **天气查询** - 获取天气数据并进行字段转换。
- **GitHub 仓库信息** - 查询 GitHub API 并配置标头。
- **身份验证 API 代理** - 基于秘密的身份验证令牌注入。
- **随机笑话** - 最小的输入到输出管道。
### 代码生成
动态 `mcp-use` 服务器代码生成：
- 图的拓扑排序以确定执行顺序。
- 从输入节点参数生成 `server.tool()` 调用和 Zod 模式。
- 支持每个工作流多个工具（多个输入节点）。
- 变量插值：`{{input.param}}`、`{{secret.KEY}}`、`{{field.path}}`。
- 导出前进行图验证（检查缺失的连接、空 URL 和孤立节点）。
- 可下载的 `index.ts` 和 `package.json`，包含快速入门说明。
### 执行
- 直接从编辑器运行工作流以调用真实的 API。
- 每个节点的执行跟踪，包含计时信息。
- 运行对话框中的类型特定输入控件（文本、数字、复选框）。
- 本地存储中记住最后使用的参数值。
- 输出面板中的通用 JSON 结果查看器。
### 实时连接
通过单击即可将工作流公开为活跃的 MCP 端点：
- **一键实时模式**：切换“实时”开关以启动独立的后台 MCP 服务器以运行当前工作流。
- **动态端口分配**：后台自动查找和管理活跃工作流的空闲端口。
- **SSE 端点**：实时服务器通过服务器发送事件（SSE）公开，与标准 MCP 客户端和 MCP 检视器兼容。
- **进程管理**：后台跟踪和管理所有实时工作流进程（使用 `ts-node` 隔离）。
- **URL 持久性**：实时状态和端点存储在数据库中，允许服务器在重新加载时保持活跃。
## 入门指南
### 先决条件
- Node.js 18+
- PostgreSQL（用于后台持久性）
### 开发
```bash
# 安装依赖
pnpm install
# 启动两个服务
pnpm dev
# 或单独运行：
cd frontend && pnpm run dev # http://localhost:1528
cd backend && pnpm run dev # http://localhost:2815
```
### API 端点
| 方法 | 路径 | 描述 |
| ------ | -------------------- | ------------------------------------- |
| POST | `/workflow/execute` | 执行工作流图 |
| POST | `/workflow/generate` | 生成 MCP 服务器代码 |
| POST | `/workflow/validate` | 验证图完整性 |
| GET | `/workflow/:id/live` | 获取实时状态和 URL |
| POST | `/workflow/:id/live` | 切换实时模式（启动/停止进程） |
## 生成的服务器示例
导出的代码使用 `mcp-use` 框架：
```typescript
import { MCPServer, text, object, error } from 'mcp-use/server';
import { z } from 'zod';
const server = new MCPServer({
name: 'mcp-flow-server',
version: '1.0.0',
description: 'Generated by MCP-Flow',
});
server.tool(
{
name: 'get_weather',
description: 'Get current weather for a given city',
schema: z.object({
city: z.string().describe('City name'),
}),
},
async (params) => {
try {
let data: any = { ...params };
const response = await fetch(`https://wttr.in/${params.city}?format=j1`);
if (!response.ok) {
return error(`HTTP ${response.status}: ${response.statusText}`);
}
data = await response.json();
return object(data);
} catch (err: any) {
return error(`Tool execution failed: ${err.message}`);
}
},
);
server.listen().then(() => console.log('MCP server running'));
```
MCP 市场