MCP Agentic Workflow Visualization

MCP Agentic 工作流可视化

截图

全屏 - 动画完成

点击图片查看完整尺寸

动态工作流

点击图片查看完整尺寸

交互式标签 - MCP 客户端特写

点击图片查看完整尺寸

概述

这是一个用于演示 Model Context Protocol（MCP）Agentic 工作流系统的 3D 可视化应用。该应用提供交互式 3D 环境，用户可以实时可视化和控制多 Agent 文档处理管道。

用户偏好

首选沟通风格：简单、日常用语。

系统架构

该应用采用全栈 TypeScript 架构，客户端和服务端组件清晰分离：

前端架构

• 框架：React 18 和 TypeScript
• 3D 渲染：React Three Fiber（@react-three/fiber）和 Three.js
• UI 组件：Radix UI 基础组件和自定义 shadcn/ui 组件
• 样式：Tailwind CSS 和用于主题设置的自定义 CSS 变量
• 状态管理：使用 Zustand 管理客户端状态
• 数据获取：使用 TanStack Query（React Query）管理服务端状态

后端架构

• 运行时：Node.js 和 Express.js 服务端
• 开发：使用 Vite 实现热模块替换并提供开发服务端
• 数据库：PostgreSQL 和 Drizzle ORM，用于类型安全的数据库操作
• 数据库提供方：Neon Database（@neondatabase/serverless）
• 会话管理：使用 express-session 和 connect-pg-simple 将会话存储在 PostgreSQL 中

主要组件

3D 可视化系统

• MCPVisualization：编排整个可视化流程的主要 3D 场景组件
• AgentNode：MCP Agent 的独立 3D 表示，根据 Agent 类型采用不同几何形状
• DataFlow：显示 Agent 之间数据流动的动画粒子系统
• CameraControls：用于导航和交互的自定义相机控件

Agent 管理系统

• Agent 类型：协调器、NLP 处理器、文档分析器、摘要器、知识库、输出格式化器
• 状态跟踪：实时状态更新（空闲、处理中、完成、错误）
• 能力映射：为每个 Agent 定义能力和处理特性

工作流引擎

• 状态管理：使用 Zustand store 集中管理工作流状态
• 步骤排序：通过 Agent 管道按顺序执行工作流步骤
• 进度跟踪：实时进度指示器和计时指标
• 错误处理：妥善处理 Agent 故障和工作流中断

UI 组件

• WorkflowUI：用于启动、暂停和监控工作流的控制面板
• AgentInfoPanel：显示详细的 Agent 信息和状态
• 进度指示器：为工作流进度和 Agent 状态提供视觉反馈

数据流

1. 工作流启动：用户通过 UI 触发工作流启动
2. 文档处理：示例文档内容经由 Agent 管道处理
3. Agent 协调：工作流协调器负责任务分配和步骤排序
4. 数据转换：每个 Agent 对数据执行专门的处理
5. 结果汇总：收集处理后的结果并格式化输出
6. 视觉反馈：3D 可视化实时更新，以反映处理状态

Agent 管道流程

Document Input → Coordinator → NLP Processor → Document Analyzer → Summarizer/Knowledge Base → Output Formatter → Final Result

外部依赖

核心框架依赖

• React 生态系统：React、React DOM、React Three Fiber，用于 3D 渲染
• Three.js 库：@react-three/drei 提供 3D 辅助工具，@react-three/postprocessing 提供特效
• UI 框架：全面的 Radix UI 组件集，支持无障碍交互
• 样式：Tailwind CSS 搭配 PostCSS，采用实用优先的样式设计

数据库和后端

• 数据库：Neon PostgreSQL 搭配 Drizzle ORM 进行架构管理
• 服务端：Express.js，支持会话管理和 CORS
• 开发：Vite 搭配自定义插件，支持 GLSL 着色器

状态和数据管理

• 状态：Zustand 搭配 subscribeWithSelector 中间件，实现响应式状态
• 查询：TanStack Query，用于同步服务端状态
• 验证：Zod，用于运行时类型验证和架构定义

开发工具

• TypeScript：客户端和服务端均具备完整的类型安全
• ESBuild：加速生产构建的打包工具
• 开发：支持热模块替换和错误覆盖层

部署策略

开发环境

• 运行时：Node.js 20 运行时
• 开发服务端：Vite 开发服务端搭配运行在端口 5000 的 Express 后端
• 热重载：客户端和服务端代码均全面支持 HMR
• 数据库：Neon PostgreSQL，支持连接池

生产环境部署

• 构建流程：Vite 构建客户端资源，ESBuild 打包服务端代码
• 资源处理：从 dist/public 目录提供静态资源
• 服务端包：单个 ESM 包，外部依赖软件包
• 数据库：生产 PostgreSQL 实例，基于环境进行配置

配置管理

• 环境变量：用于数据库连接的 DATABASE_URL
• 构建输出：分别构建客户端（dist/public）和服务端（dist/index.js）
• 资源管线：支持 3D 资源所用的 GLTF、GLB 和音频文件

该应用旨在通过最少的配置轻松部署到云平台，只需提供 PostgreSQL 数据库连接字符串即可完整运行。