170 lines
4.6 KiB
Markdown
170 lines
4.6 KiB
Markdown
# AG-UI 聊天功能演示脚本
|
||
|
||
## 演示准备
|
||
|
||
### 1. 启动应用
|
||
```bash
|
||
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等多种方式集成到现有系统中。
|