创建时间: 2026-08-25最后更新: 2026-09-02作者: yangbo(12123176d)
1. 概述
LLM 的输出结果,最终要显示到 UI 界面上被用户看到。那么我们要思考的问题就是,如何把 LLM 的输出结果,转化成 UI 界面上可以显示的数据。
stream.ts
01import { createAgent } from 'langchain'0203const agent = createAgent({04model,05tools: [],06systemPrompt: '你是一名简洁的前端开发助手。',07})0809const stream = await agent.stream({10messages: [{ role: 'user', content: '请介绍一下 React。' }],11}, {12streamMode: 'messages',13})1415for await (const [messageChunk] of stream) {16process.stdout.write(messageChunk.text)17}
这段代码中的 stream 不是完整答案,而是一条等待后续数据的通道。streamMode: 'messages' 要求 Agent 按模型生成过程返回消息流,for await...of 每循环一次,就从二元组中取出一个新的 AIMessageChunk。
当我们与 UI 组件交互时,每有一个新的 AIMessageChunk 到达,UI 组件就会更新一次。
这个过程中,我们不能把 AIMessageChunk 原样交给 UI 组件,而要先完成几次必要的数据转换,才能最终显示出来。
正在验证登录状态
请稍候,验证完成后将继续显示文章内容