创建时间: 2026-08-25最后更新: 2026-09-02

1. 概述

LLM 的输出结果,最终要显示到 UI 界面上被用户看到。那么我们要思考的问题就是,如何把 LLM 的输出结果,转化成 UI 界面上可以显示的数据。

stream.ts
01
import { createAgent } from 'langchain'
02
03
const agent = createAgent({
04
model,
05
tools: [],
06
systemPrompt: '你是一名简洁的前端开发助手。',
07
})
08
09
const stream = await agent.stream({
10
messages: [{ role: 'user', content: '请介绍一下 React。' }],
11
}, {
12
streamMode: 'messages',
13
})
14
15
for await (const [messageChunk] of stream) {
16
process.stdout.write(messageChunk.text)
17
}

这段代码中的 stream 不是完整答案,而是一条等待后续数据的通道streamMode: 'messages' 要求 Agent 按模型生成过程返回消息流,for await...of 每循环一次,就从二元组中取出一个新的 AIMessageChunk

当我们与 UI 组件交互时,每有一个新的 AIMessageChunk 到达,UI 组件就会更新一次。

这个过程中,我们不能把 AIMessageChunk 原样交给 UI 组件,而要先完成几次必要的数据转换,才能最终显示出来。

正在验证登录状态
请稍候,验证完成后将继续显示文章内容