mxivideo/scripts/demo-agui-chat.md

AG-UI 聊天功能演示脚本

演示准备

1. 启动应用

cd /root/projects/mixvideo_v2
pnpm dev

2. 导航到项目详情页面

1. 打开浏览器访问 http://localhost:5173
2. 点击"项目管理"
3. 选择任意一个项目进入详情页面

演示流程

第一部分：界面介绍 (2分钟)

1. 整体布局展示

• 左侧: AG-UI聊天面板

  • 顶部显示连接状态（绿色圆点表示已连接）
  • 系统欢迎消息展示AG-UI协议特性
  • 底部输入框支持多行输入

• 右侧: 项目素材管理

  • 顶部搜索功能
  • 筛选器（使用状态、模特、类型）
  • 素材网格展示

2. AG-UI协议特性说明

• 基于事件驱动的通信
• 支持16种标准事件类型
• 实时状态同步
• 双向交互能力

第二部分：基础聊天功能 (3分钟)

1. 发送简单消息

输入示例：

你好，我想为我的产品创作一个宣传视频

预期响应：

• 显示用户消息（蓝色气泡，右对齐）
• 智能体开始处理（显示思考状态）
• 逐步显示进度条
• 最终显示智能体回复

2. 观察AG-UI事件流

事件展示顺序：

1. thinking - 紫色卡片，显示"正在分析您的需求..."
2. progress - 进度条更新（20% → 40% → 60% → 80%）
3. tool_call - 蓝色卡片，显示"调用工具: video_generator"
4. message - 智能体回复内容
5. complete - 完成状态

3. 状态指示器

• 连接状态: 绿色圆点 + "已连接"
• 处理状态: 输入框禁用 + 发送按钮显示加载动画
• 消息状态: 发送中 → 已发送 → 完成

第三部分：高级功能演示 (4分钟)

1. 上下文感知对话

输入示例：

我希望重点展示产品的便携性和易用性

演示要点：

• 智能体记住之前的对话上下文
• 自动关联当前项目信息
• 提供针对性的建议

2. 工具调用可视化

输入示例：

请帮我生成一个30秒的产品展示视频

观察要点：

• 工具调用卡片显示具体工具名称
• 参数信息展示（如果有）
• 调用状态实时更新

3. 进度跟踪

演示要点：

• 实时进度条更新
• 进度消息描述当前步骤
• 平滑的动画过渡效果

4. 错误处理（可选）

模拟场景：

• 断开网络连接
• 观察连接状态变为红色
• 重新连接后状态恢复

第四部分：集成展示 (2分钟)

1. 与素材管理的联动

演示流程：

1. 在聊天中请求创建素材
2. 智能体完成处理后触发 onMaterialCreated 回调
3. 右侧素材列表自动刷新
4. 新创建的素材出现在列表中

2. 模特信息集成

演示要点：

• 智能体自动获取可用模特信息
• 在对话中智能推荐合适的模特
• 模特选择与项目需求匹配

技术亮点说明

1. AG-UI协议优势

• 标准化: 遵循开放协议，易于集成
• 灵活性: 支持多种传输方式和事件类型
• 扩展性: 可轻松添加新的智能体和功能

2. 实现特色

• 事件驱动: 基于RxJS的响应式编程
• 类型安全: 完整的TypeScript类型定义
• 性能优化: React hooks和memo优化

3. 用户体验

• 实时反馈: 即时的状态更新和进度显示
• 直观界面: 清晰的视觉层次和交互反馈
• 错误友好: 完善的错误处理和恢复机制

演示总结

核心价值

1. 提升效率: 智能化的创作流程
2. 降低门槛: 自然语言交互，无需专业技能
3. 实时协作: 人机协作的创作体验
4. 标准化: 基于开放协议，易于扩展

应用场景

• 视频内容创作
• 产品营销素材制作
• 创意设计协作
• 智能化工作流程

技术优势

• 基于AG-UI开放协议
• 现代化的前端技术栈
• 响应式设计和实时交互
• 可扩展的架构设计

Q&A 准备

常见问题

Q: AG-UI与其他聊天框架有什么区别？ A: AG-UI是专门为智能体交互设计的协议，支持复杂的事件流、工具调用和状态同步，而不仅仅是简单的消息传递。

Q: 如何扩展新的智能体？ A: 通过AGUIService添加新的智能体配置，实现相应的事件处理器即可。

Q: 性能如何保证？ A: 使用React的优化技术、事件流的合理管理和响应式编程模式来保证性能。

Q: 是否支持多语言？ A: 当前支持中文，可以通过国际化框架扩展多语言支持。

Q: 如何与现有系统集成？ A: AG-UI协议设计为传输无关，可以通过HTTP、WebSocket等多种方式集成到现有系统中。