fix
This commit is contained in:
root
169
scripts/demo-agui-chat.md
Normal file
169
scripts/demo-agui-chat.md
Normal file
@@ -0,0 +1,169 @@
|
||||
# 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等多种方式集成到现有系统中。
|
||||
Reference in New Issue
Block a user