MCP代理工作流可视化
截图
全屏-动画完成
*点击图片查看全尺寸*
动画工作流
*点击图片查看全尺寸*
交互式标签-MCP客户端特写
*点击图片查看全尺寸*
概述
这是一个用于演示模型上下文协议（MCP）代理工作流系统的3D可视化应用程序。该应用程序提供了一个交互式3D环境，用户可以在其中实时可视化和控制多代理文档处理管道。
用户选项
首选沟通方式：简单的日常语言。
系统架构
该应用程序遵循全栈TypeScript架构，客户端和服务器组件之间有明确的分离：
前端架构
- 框架：React 18与TypeScript
- 三维渲染：React Three Fiber（@React Three/Fiber）与Three.js
- UI组件：带有自定义shadcn/UI组件的Radix UI图元
- 样式：带有自定义CSS变量的顺风CSS，用于主题化
- 状态管理：Zustand用于客户端状态管理
- 数据获取：用于服务器状态管理的TanStack查询（React查询）
后端架构
- 运行时：带Express.js服务器的Node.js
- 发展：Vite用于热模块更换和开发服务器
- 数据库：PostgreSQL与Drizzle ORM用于类型安全的数据库操作
- 数据库提供程序：霓虹数据库（@neondatabase/无服务器）
- 会话管理：使用connect-pg-simple进行PostgreSQL会话存储的express会话
关键组件
三维可视化系统
- MCP可视化：协调整个可视化的主要3D场景组件
- 代理节点：基于试剂类型的不同几何形状的MCP试剂的单独3D表示
- 数据流：显示代理之间数据流的动画粒子系统
- 相机控制：用于导航和交互的自定义相机控件
代理管理系统
- 代理类型：协调员、NLP处理器、文档分析器、摘要生成器、知识库、输出格式化程序
- 状态跟踪：实时状态更新（空闲、处理中、完成、错误）
- 能力映射：每个代理都有定义的能力和处理特性
工作流引擎
- 状态管理：使用Zustand存储集中工作流状态
- 步骤排序：通过代理管道有序执行工作流步骤
- 进度跟踪：实时进度指标和时间度量
- 错误处理：巧妙地处理代理故障和工作流中断
UI组件
- 工作流UI：用于启动、暂停和监视工作流的控制面板
- 代理信息面板：详细的代理信息和状态显示
- 进度指标：工作流进度和代理状态的视觉反馈
数据流
- 工作流启动：用户通过UI触发工作流启动
- 文档处理：示例文档内容通过代理管道进行处理
- 代理商协调：工作流协调员管理任务分配和排序
- 数据转换：每个代理对数据应用其专门的处理
- 结果聚合：收集处理后的结果并格式化以供输出
- 视觉反馈：实时更新3D可视化以反映处理状态
代理管道流量
Document Input → Coordinator → NLP Processor → Document Analyzer → Summarizer/Knowledge Base → Output Formatter → Final Result外部依赖项
核心框架依赖关系
- React生态系统：React、React DOM、用于3D渲染的React Three Fiber
- 三个js库：@reactthree/drei用于3D助手，@reactthree/后处理用于效果
- UI框架：用于可访问交互的全面Radix UI组件集
- 样式：带有PostCSS的顺风CSS，用于实用程序优先的样式
数据库和后端
- 数据库：使用Drizzle ORM进行模式管理的Neon PostgreSQL
- 服务器：具有会话管理和CORS支持的Express.js
- 发展：Vite带有GLSL着色器支持的自定义插件
状态和数据管理
- 状态：Zustand带有subscribeWithSelector中间件，用于反应状态
- 查询：用于服务器状态同步的TanStack查询
- 验证：Zod用于运行时类型验证和模式定义
开发工具
- TypeScript：跨客户端和服务器的全类型安全
- ESBuild：生产构建的快速捆绑
- 发展：用错误覆盖替换热模块
部署策略
开发环境
- 运行时：Node.js 20运行时
- 开发服务器：Vite开发服务器，Express后端位于端口5000
- 热重新加载：完全支持客户端和服务器端代码的HMR
- 数据库：带连接池的Neon PostgreSQL
生产部署
- 构建过程：Vite构建客户端资产，ESBuild捆绑服务器代码
- 资产处理：从dist/public目录提供的静态资产
- 服务器包：具有外部包依赖关系的单个ESM捆绑包
- 数据库：基于环境配置的PostgreSQL生产实例
配置管理
- 环境变量：数据库连接的DATABASE_URL
- 构建输出：分别构建客户端（dist/public）和服务器端（dist/index.js）
- 资产管道：3D资产的GLTF、GLB和音频文件支持
该应用程序旨在以最少的配置在云平台上轻松部署，只需要一个PostgreSQL数据库连接字符串即可实现完整功能。