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