使用 Laravel 构建 AI:借助 Livewire 实现实时流式聊天 UI
发布日期 经过 哈里斯·拉夫托普洛斯
▶️ 观看视频教程 (10分钟)
目前我们一直通过 JSON 路由测试这个代理。AI 完成后,它会返回完整的回复。这对于开发环境来说没问题,但对客户来说却很糟糕。没人愿意盯着一个加载指示器五秒钟,不知道到底发生了什么。
在本集中,我们将构建一个实时聊天组件,其回复会像 ChatGPT 一样逐字显示。用户输入问题,点击发送,代理的回复就会立即生成并显示出来。
SDK 让这一切只需一行代码即可完成。无需再调用
prompt()
我们称之为
stream()
SDK 通过服务器发送事件将令牌增量转发到浏览器。我在 ChatController 中添加了一个流方法,该方法使用正确的标头处理 SSE,然后重用一个私有的 resolveAgent 方法来启动或继续已认证用户的对话。
前端使用 Livewire 组件管理状态,Blade 模板构建用户界面,Alpine.js 处理流式传输逻辑。Alpine 代码会打开一个可获取的流,解析每个到达的数据块,并将文本实时追加到消息气泡中。无需任何外部依赖。所有繁重的工作都由 Livewire、Alpine 和 SDK 完成。
我还提到了一个关于获取第一条消息对话 ID 的小陷阱。解决方法是在消息流结束后触发一个完成回调函数,这样我们就可以存储该 ID 以便后续消息使用。
到最后,聊天体验感觉就像一个真正的产品。同样的客服人员,同样的工具,同样的知识库,只是以直播的形式呈现。
下一集,我们将让代理通过 WebSearch 工具访问实时网络,以便它可以回答有关实时变化的事情的问题,例如运输承运商延误。
⭐ GitHub: https://github.com/harris21/ship-ai-with-laravel
▶️ 立即观看第7集 →






