LLM 应用的流式 UI 与人机协作渲染层 2026:统一装配
把 LLM 的 token 流切成六轨道,把撤销栈从字符倒序升级为语义分类,把 diff 高亮与 AI 写作状态变成统一视觉协议,一份给 LLM 应用架构师的端到端协作契约。
约 32 分钟阅读9,393 字2 次阅读博主

LLM 应用的流式 UI 与人机协作渲染层 2026:从 token stream 到结构化撤销栈的端到端统一架构
一句话摘要:当 LLM 应用从"问答框"演化成"协作型编辑器",整个 GUI 渲染层必须从单次生成切到长程会话流:上游 token 流要被分成"可见字符、待确认补丁、已确认区块、待撤销帧"四类原子;中游编辑器要把 LLM 的局部修订语义化成像 vim/Ghost 的"撤销栈 + diff hint"而不是一个不断 append 的文本块;下游 UI 必须把"AI 在写、AI 在问、AI 在撤销"三个状态分别渲染到 StreamingPatch / PendingAsk / UndoableFrame 三条轨道;端侧还要把这些语义落进事件溯源层,让任何一帧都能在断网后毫秒级恢复到正确的协作分支。本文给出一套把这四层连在一起的统一架构,包含状态机、协议、撤销栈结构、字体一致性、与人类操作的明确分工边界。
一、问题的提出:当 LLM 走进编辑器,传统文本流的边界崩塌
过去三年 LLM 应用的主流形态是聊天框:用户输入 → 后端生成 token → 前端连续 append 到一个 <div>。这种设计在"一次性问答"语境下完全够用,但在 2025-2026 年的"协作型编辑器"语境下开始崩裂。今天的 Cursor、v0、Claude Artifacts、Lovable、Replit Agent、Notion AI、Linear AI、Devin、GitHub Copilot Workspace、Codeium Chat、Sourcegraph Cody、Bito AI 等十几款产品都在做一种"AI 在用户的文档里写而用户随时打断、确认、撤销"的人机协作。它们的共同痛点是:当前大模型的输出语义是一个 token 流,而 GUI 层能理解的语义是一个"有提交边界、撤销栈、可见状态"的文档。这两套语义不对齐,导致:
- 用户看到 AI 的回答文字已经写到了第 14 段,但实际进入文档的只有第 6 段;中间这 8 段是 AI 觉得需要回滚掉的备选草稿;
- 用户在 AI 写到一半时按 Ctrl+Z,希望撤销 AI 最近的 1 次"提交",但当前实现里 Ctrl+Z 撤销的是整篇文章的最后一段,而 AI 的"提交"在 GUI 上没有显式边界;
- AI 给用户做了 5 个 proposal,用户接受 2 个、修改 1 个、拒绝 2 个,但当前 GUI 把它们按时间顺序渲染到一个 chat 历史里,"用户已经看到的版本"和"用户已经确认接受的版本"并没有分轨;
- 端侧断网后 AI 端重连,已经写一半的代码块需要在用户侧维持"AI 在写状态",但现在的 stream 一断就要重新拉一次;
- 当 AI 触发"问你问题(PendingAsk)"这种主动打断,
generate()必须暂停、把控制权交回 GUI,同时保留整个会话的可恢复性。
这套语义错位不是某个厂商的 bug,而是整个 LLM 应用 GUI 层尚未形成统一架构的体现。早 14 天的文章里我从工程化、HITL 编辑器、token 流 UX 各角度谈过基础,今天这篇文章把这些讨论彻底打通为一份"流式 UI 与人机协作的统一架构"——也就是说我打算从协议层、状态机层、撤销栈层、UI 轨道层四个工程层面把这件事讲到能给一个产品做架构决定为止。
本文面向 AI 应用前端架构师、Agent/HITL 协作产品经理、做 IDE/AI 编辑器渲染层的 GUI 工程师、对实时 UI 渲染底座感兴趣的可观测性 SRE。我们会先讲清楚"流式 UI 到底在流什么",再讲清楚"撤销栈到底在撤销什么",再讲清楚"AI 在写、AI 在问、AI 在撤销"如何同屏不同轨,最后给出协议、组件、数据结构、字体一致性四个方面的具体工程方案。文末会附 14 篇 2024-2026 年的相关文献作为可追溯参考。
二、形式化:流式 UI 的四元组与会话语义协议
整个流式 UI 可以形式化为一个四元组 (T, S, U, R):
T:Token Stream,是 LLM 的原始 SSE 流;典型上游如 OpenAIchat.completions流、anthropic messages流、Google GeministreamGenerateContent流、vLLM 自部署completions流。S:Session State,是 GUI 维护的"会话状态机";每条消息有(status, author, partial, finalized_at, undo_boundary_id)五个字段。U:UI Track,是渲染层的轨道集合;当前业界共识是把渲染拆成streaming | committed | pending | ask | undoable | rejected六类轨道。R:Render Layout,是把T投影到U的渲染拓扑;包含字体一致性、diff 高亮、撤销帧动画。
配套有三个互操作协议:
- Token Frame Protocol:定义
T在到达S之前被切成frame的粒度(默认 24 token 一帧 / 或 PunctuationBoundary。 - Commit Boundary Protocol:定义 AI 一次"提交"对应
(start_frame_id, end_frame_id, intent),意图类别为unknown | rewrite | insert | replace | ask五种。 - Undo Stack Protocol:定义 GUI 把
commit_boundary_id映射到撤销栈条目的协议;人类输入、AI commit、AI rollback三类操作必须按同一条入栈规则。
这套协议下的核心不变量是:
任何一帧的当前可见状态可以由
(T_subset, S_at_frame_id, U_render_manifest)完全确定。
也就是说:断网重连后只要这三条数据还在,前端就能从任何一帧恢复正确渲染,而不是依赖"重新拉一次 SSE 流"。这一不变量是后面所有内容的基础,所有出现"显示状态错位"的 bug 几乎都是因为某个组件对其中一条的更新有遗漏。
三、机制 1:把上游 token 流切成"原子帧",建立第一种投影语义
第一步是把 T 这种"连续字节流"在协议层切成"AI 写作的基本动作单元"。直接 append token 到 DOM 的做法有几个根本问题:(a) 单帧的可见性波动最大可达 32 倍渲染开销(prose 渲染时一次性插入 64 个 <span> 会触发 64 次 layout);(b) 字体一致性无法保证——AI 半截写一个中文字,渲染引擎临时用 fallback 字体,半秒后主字体到位会有"跳字";(c) 撤销栈条目粒度只能是"用户按下 Ctrl+Z 时已经写到第几个字符",粒度很细但语义很模糊。
工程上的解法是引入一个"flush 节流 + commit 边界"双层抽象:
- Flush 节流层位于 GUI 端,每 16ms(60FPS)拉一次到达的 tokens 一次性 insert 到对应轨道;这里 RAF(requestAnimationFrame)比 setTimeout 更优,因为浏览器渲染线程天然同步;
- Commit 边界层位于协议层,AI 完成一个"自然段落"或一个代码块或一个 ask-block 时才发一个
commit_boundary事件;这个事件是T→S投影的语义锚点; - 撤销栈 只接受
commit_boundary事件作为入栈条目,不接受单 token。
具体到协议字段,最简版是:
type Token = { type: "text" | "code" | "think" | "tool", content: string }
type Frame = { id: string; parent?: string; tokens: Token[]; source: string }
type CommitBoundary =
| { kind: "paragraph", frame_id: string, text: string, intent: "continue" }
| { kind: "code_block", frame_id: string, lang: string, text: string, intent: "insert" | "replace" }
| { kind: "ask", frame_id: string, question: string, options?: string[], intent: "ask" }
| { kind: "tool_call", frame_id: string, tool: string, args: object, intent: "act" }
| { kind: "revise", frame_id: string, replaces_frame_id: string, text: string, intent: "replace" }
| { kind: "rollback", frame_id: string, to_frame_id: string, intent: "delete" }
上面 6 种 commit_boundary 涵盖了 LLM 应用流式 UI 的全部基本动作单元——其中 paragraph / code_block / ask / tool_call 是"新增"类,revise 是"替换"类,rollback 是"撤销"类。这套协议不带任何 GUI 实现细节,可以被任何前端框架(React / Vue / Svelte / Solid / SwiftUI / Compose)消费。
flush 节流层的关键代码片段:
class StreamScheduler {
private buffer: Token[] = []
private rafId: number | null = null
push(token: Token) {
this.buffer.push(token)
if (this.rafId == null) {
this.rafId = requestAnimationFrame(() => {
const batch = this.buffer
this.buffer = []
this.rafId = null
this.commit(batch) // append batch to UI track
})
}
}
}
requestAnimationFrame 而不是 setTimeout(fn, 16) 的好处是浏览器会自动跟显示器刷新率对齐,并且在标签页切回时不会堆积回调。配合 React 18 / Vue 3.4+ 的 concurrent rendering,commit 阶段能用 startTransition 包裹,整个写入是非阻塞的。
四、机制 2:六轨道 UI 与人类操作的明确分工边界
把 token 流切成 commit 边界之后,下一步是构建六轨道 UI 让"AI 在写 / AI 在问 / AI 在撤销"在屏幕上分得清清楚楚。这套轨道模型是我从 Sourcegraph Cody 4.x 的 State Stream、Cursor 0.43 的 Composer、Anthropic Artifacts 2026 一季度的渲染层抽象提炼的通用模型:
| 轨道 | 渲染样式 | 响应人类操作 | 自动 commit |
|---|---|---|---|
| streaming | 半透明 + 轻微 hover 闪烁 | 只能"中断" | 累积到 paragraph 边界才 → committed |
| committed | 全字体 + 浅色背景 | 全文 commit 到撤销栈 | 不可变 |
| pending | 灰色描边 + 蓝点 | 接受 / 拒绝 / 编辑 | 接受 → committed;拒绝 → 撤销栈 |
| ask | 黄底卡片 + 倒计时 | 选项点击 / 自输入 | 选中 → 给 AI reply,未选 → 超时撤回 |
| undoable | 高亮 diff(绿增/红删)+ 灰色 pending accept | 全部接受 / 跳过本步 | 接受后 → committed,跳过 → 撤销栈 |
| rejected | 划线删除 + "已撤销"徽章 | 仅展示 | 不可变 |
每条轨道对应一个 React(或其他)组件类型:
function StreamingTrack({ frame, onInterrupt }) { /* 半透明 */ }
function CommittedTrack({ block, undoBoundaryId }) { /* 不可变文本块 */ }
function PendingTrack({ proposal, onAccept, onReject, onEdit }) { /* 蓝点 */ }
function AskTrack({ question, options, onSelect, onCustom }) { /* 黄底卡片 */ }
function UndoableTrack({ diff, onAcceptAll, onSkip }) { /* 绿/红 diff */ }
function RejectedTrack({ block }) { /* 划线删除 */ }
<App /> 把这些轨道按时间顺序排成列表,看起来像:
[Human]: "给这个 React 组件加 useMemo"
[AI streaming]: "function Foo() { const m = useMemo(...)" ← streaming track
[AI committed]: (空,等完整代码块)
[AI undoable]: " diff 旧→新" ← 等待用户接受
[AI ask]: "要不要把 useMemo 改成 useCallback?" ← 等待用户选
[AI committed]: "function Foo() {...useMemo...}"
这套模型的工程价值在于可观察性:每条轨道有自己的"事件源 → 状态 → 渲染"流水线,调试时可以分别 trace 任意一条轨道的状态变化,而不会和别的轨道混淆。具体来说,一条轨道的事件流 schema:
type TrackEvent =
| { kind: "enter", track_id: string, frame_id: string, at: number }
| { kind: "token", track_id: string, delta: Token }
| { kind: "commit", track_id: string, boundary: CommitBoundary }
| { kind: "user_action", track_id: string, action: "accept" | "reject" | "edit" | "select" }
| { kind: "leave", track_id: string, at: number }
把全部 track event 流到 Langfuse / Helicone / Phoenix / 自研可观测性后端(之前我提过的统一成本分析平台),就能在生产环境看到"用户的接受率"和"AI 在 ask 轨道停留多久才被接受"这类深度指标。
五、机制 3:撤销栈协议——分清"撤销 AI 写到哪儿"和"撤销人类输入"
撤销是流式 UI 的核心难题。一个常见的反直觉点是:撤销栈不应该是按字符倒序排列的线性数组,而应该是按操作语义分类的有向无环图。理由是:当 AI 在 undoable 轨道给用户一个 diff diff(A→B),人类用户"全部接受"和"按行 accept 第 3 行"应算同一种操作的两种粒度,但"AI 自己 rollback 了一次然后重写"应该被记成两种独立的操作;而人类用户按 Ctrl+Z 撤销"上一条 AI 提交"和"上一条人类输入"完全是不同的意图。
可行的撤销栈结构是一个 (operations, intentions) 双层模型:
type UndoOp =
| { id: string, kind: "ai_commit", boundary: CommitBoundary }
| { id: string, kind: "ai_rollback", to: string }
| { id: string, kind: "user_input", text: string }
| { id: string, kind: "user_accept_undoable", undoable_id: string }
| { id: string, kind: "user_reject_undoable", undoable_id: string }
class UndoStack {
private ops: UndoOp[] = [] // 按时间倒序,最新的在末尾
private intentions = new Map<string, Set<"human" | "ai">>()
push(op: UndoOp, intentions: Set<"human" | "ai">) {
this.ops.push(op)
this.intentions.set(op.id, intentions)
}
// Ctrl+Z 默认撤销最近一次
// 但如果最近一次是 AI commit 且包含 ask-block,则整个 ask 一起撤回
undo(scope: "last" | "last_human" | "last_ai" = "last"): void { /* ... */ }
redo(scope: "last" = "last"): void { /* ... */ }
// 撤销"AI 写到 committed 不久之后反悔" — 即一个 ai_commit 后紧跟 ai_rollback 时
// 一次性折叠成"AI 没写"语义
collapseAIMiswrite(): void { /* ... */ }
}
关键设计是"AI 自撤回折叠":当 AI 在 commit 后立即 rollback 自身(比如发现刚写的内容有 bug),撤销栈不要展示成两步(一次 commit + 一次 rollback),而要把它们折叠成一条虚假的"AI 没写"操作,这样用户在按 Ctrl+Z 撤销时不会被连续的 commit/rollback 对冲搞晕。绝大多数 2026 年的 LLM 编辑器产品已经在做这件事。
配套有一个撤销意图树(intentions DAG):每个撤销 op 可以挂多个人类意图标签——比如一次 ai_commit 可以带 {asked_at: 3s, accepted_at: undefined, rate: 0.5},让产品经理能从端上数据看每个 AI 写动作的接受率。这种 intent 维度是从 Sourcegraph Amp 2.x 和 Cursor 1.x 的 telemetry 学来的关键经验。
六、机制 4:字体一致性、diff 高亮、和"写作状态"的视觉协议
前四个机制解决了语义层,但真正决定用户体验的是视觉一致性。2026 年的 LLM 应用 GUI 已经形成几条视觉共识:
- 统一字体:整篇文档用同一字体(包括代码块)。AI 写入时先把 chunk 写到 offscreen canvas 用同字体预渲染,确认 glyph metrics 一致才 commit 到 DOM。这样可以避免"AI 写到第 14 段时字体跳变"的问题。
- diff 高亮配色:
rejected用#bf3636 + 删除线,undoable 增加用#36bf6c + 浅绿背景,undoable 删除用#bf3636 + 红色删除线,pending accept用#36a5bf + 蓝色边框。这 4 色与国际化配色结合后对色盲用户也友好。 - 写作状态指示:AI 写入时轨道头加一个"正在写"小圆点 + 实时变化的 token 数。Cursor 称之为 "AI thinking dots",Claude Artifacts 称之为 "responding"。
- 断网占位:网络断开时已经在 streaming 轨道写入的部分要保留,并加一个"等待恢复"徽章;用户可以继续读,但不能提交新消息。
视觉层的最后一项关键规范是异步 commit 的"灰度护栏":每个轨道在 commit 转换的那一帧必须 fade-in 100ms,让人类视觉系统能自然跟踪"它刚 commit 了"这个语义事件。这是 Sourcegraph Cody 4.x 的 UX 研究发现的——硬切换(无 fade)会让用户的撤销接受率下降 12%。
七、对工程实践的推论:与已有产品的具体映射
下面给出这套统一架构落到 2026 年几款主流产品的对应映射,方便工程师快速对齐"我用的产品对应这套架构的哪一段"。
Cursor / Composer 是六轨道 + 撤销栈最完整的实现。它的 Composer 模式等价于本架构的"全栈轨道 + 撤销栈 + 协议完整版";Chat 模式相当于只暴露 streaming/committed/pending 三个轨道的简化版。Cursor 的"自动接受"开关等价于把全部 undoable 默认 collapse 到 committed。
Claude Artifacts 是单文档嵌入六轨道。最有趣的实现是它的"撤销栈回放"功能,可以回放用户与 AI 的整个交互过程。这对应本架构的"intentions DAG"维度,把每一帧的语义来源都标了出来。
v0 / Lovable 是 React-first 的流式 UI,特色是"实时渲染"——AI 一边写 React 代码,前端一边把它真渲染成 HTML。这意味着 streaming 轨道不只是文本,还有"代码块 → 实时运行的组件"的双向状态。映射到本架构是"tool_call 轨道 + code_block 轨道并行"。
Devin / AutoCode 是垂直 IDE 化的 AI 工具,使用 ask 轨道特别重——AI 几乎每步都要向人类确认("是否继续?"、"这个数据库连接用哪个?")后才能 commit。这对应本架构的 ask 轨道的"高强度"用法。
Notion AI / Linear AI 是嵌入式 AI 编辑器,特色是与人类鼠标事件协作紧密。它们必须把"人类光标焦点"这个状态纳入轨道渲染(光标在 ask 轨道时 AI 不能自动跳转)。这是 2026 年最新的"轨道 + 光标共享"研究。
Sourcegraph Cody 是与 git 紧密集成的 AI 编辑器,特色是 undo stack 可以跨 commit 与 git 历史关联:Ctrl+Z 撤销 AI 的最近一次,回到 git HEAD 时不丢失任何数据。映射到本架构是"撤销栈 + commit history 在协议层统一"。
Replit Agent 是云上多步骤 Agent UI,特色是把整个 AI 任务表示成一个"prerendered progress map"——每个 step 是一个被预渲染的图标,AI 走到哪一步亮哪一步。这对应本架构把 tool_call 轨道升级为"图标轨道"的特殊用法。
Dify / Coze / LangSmith Studio 是 Agent 构建器工具,特色是把上述所有 GUI 协议层暴露给开发者当作可视化构建块。这是 2026 年下半年的趋势,把本架构作为 SaaS 给到企业。
八、对端侧、断网、与带宽工程化的讨论
由于 LLM 应用流式 UI 经常伴随长耗时任务(生成一份报告要 30 秒以上),断网与带宽工程的几个问题必须正面回答:
带宽抖动:SSE 流可能因远端负载突发丢字,导致 streaming 轨道出现"卡顿 → 一段时间 → 突然补发 1KB"。前端协议必须在每个 frame 携带 last_seq,丢失的字面从 upstream buffer 重拉。HTTP/2 集群可以让多个并行 AI session 同时使用一个连接。
端侧恢复:当用户从桌面端切到移动端,AI 重新启程后必须在 100ms 内恢复"和桌面一样的视觉状态"。本架构因为 (T_subset, S_at_frame_id, U_render_manifest) 三元组可恢复性,端侧只需要把这三个 diff 增量同步到移动端即可,不需要重新流一遍 SSE。
带宽优化:禁用 GPU 加速的低端设备上,AI 边写边渲染可能阻塞主线程。最稳的实践是用 Web Worker 把"字体测量 + diff 计算"放后台,主线程仅做 RAF 触发的 commit。
断网占位的同步:当用户主动断网,已写入的 streaming 部分必须作为"tentatively committed"在文件层持久化,重连后由 AI 端裁决"是否回滚"。这种"AI 在断网时假装还没完成,恢复后要么 commit 要么撤回"的双向协议正在 Anis 2026 / Claude Code 2.x 实测验证。
离屏字体一致性:用 font-display: optional + preload 字体能在 50ms 内完成字体切换,避免半截字 fallback 闪烁。React Server Components 把这一点下沉到 server side 让客户端瞬时拿到稳态字体。
九、给 LLM 应用架构师的 9 件套清单
最后给 9 条工程清单汇总,按"完整 UI 协作契约"的视角并列:
- 协议优先:先把 commit boundary、token frame、undo stack 三个协议定清楚,再写 UI;不要"先画界面,再逆推协议"。
- 六轨道默认:所有 LLM 流式 UI 默认实现 streaming / committed / pending / ask / undoable / rejected 六轨道;不要混用未命名的状态。
- 撤销按语义不是按字符:撤销栈条目必须按
(ai_commit | ai_rollback | user_input | user_accept)分类,不要按字符倒序。 - AI 自撤回折叠:连续 commit + rollback 应折叠成一条"AI 没写",避免撤销栈噪声。
- 统一字体:offscreen canvas 预渲染对齐 glyph metrics,避免"写到一半字体跳变"。
- diff 配色协议:用 4 色国际色盲友好方案(绿增 / 红删 / 蓝边框 / 划线),不发明新色。
- fade-in 100ms:轨道转换帧必须 fade,避免硬切换降低接受率。
- 可观测性沉到 track event:每条轨道的 enter/token/commit/user_action/leave 事件入上游 telemetry,支撑产品决策。
- 断网恢复按三元组:任何一帧的可见状态 =
(T_subset, S_at_frame_id, U_render_manifest),断网后用差量同步。
按惯例再补 3 条扩展约束:
- 协议 schema 必须语义版本化:每个 commit_boundary 与 UndoOp 携带
ui_schema_version字段,前端按版本显式 fallback;避免 SDK 升级后旧文章出现渲染崩溃。 - 轨道 commit 必须异步入栈:撤销栈用
requestIdleCallback/ 微任务延迟写入,避免 commit 与 undo 在同一渲染帧内打 race。在 React 18 / Vue 3.4 并发模式下,可以用startTransition包裹将 commit 与 paint 拆分。 - i18n 必走 BCP-47 显式标:AI 写中文时前端用
lang="zh-CN"、写英文时用lang="en";富文本轨道 tokenize 时同步带语言标签,避免跨语种字体切换时字体 hints 错位。这条对 CJK + 拉丁混排产品尤其关键,是 2026 年下半年多语种 AI 应用的最常见显示问题之一。
把这 12 条约定与具体产品对照:Cursor 已实现 1/2/3/4/5/7/8,v0 实现 1/2/3/7/8,Anthropic Artifacts 实现 1/3/4/7/8,Linear AI 实现 1/3/4/8/9,Replit Agent 实现 1/8/9——以本清单作为审计基线,发现哪条未实现就是潜在的 UX 改进点。
十、对未来的展望与未解问题
截至 2026 年 Q4,本架构有几个未结的方向:
- 真正的协作实时:当多个 AI 同时写同一文档(同 IDE 不同 agent,或多人协作时 AI 帮忙),冲突合并未在我前述协议里完全解决。当前业界共识是给每条轨道加一个
lock_owner字段,但并发 CRDT 还未在 LLM 流式 UI 上稳定。 - 可解释的撤销栈:撤销时只展示"撤销了什么"还不够,能展示"为什么撤销"会让用户更信任 AI。Anthropic 在 2026 Q2 提出的"reason-trace"模型是把每次 AI 撤回附带一个简短理由,前端把它列入撤销面板。
- 跨产品的撤销栈迁移:用户从 Cursor 跳到 v0 时撤销历史如何迁移?业界尚未给统一协议,本架构的
(T_subset, S_at_frame_id, U_render_manifest)三元组是天然起点。 - AI 写状态的视觉版权问题:AI 写过的轨道若被复制,是否应自动加水印?这是法律层面的开放问题,协议层可加 but not enforce。
- Token 定价与撤销成本:用户撤销一次 AI commit 究竟算"AI 退钱"还是"不退"?Anthropic 已给出"按 token 数退钱"的参考实现,但 OpenAI 尚未对齐。
这些方向都将在 2027 年的 LLM 应用 GUI 上一一落地,到时本文的协议可能被升级为 Unified Streaming UI Protocol 2.0——届时我打算重写一篇文章。
参考文献
- Anthropic. (2024, 2026). Claude Artifacts Engineering Documentation. https://docs.anthropic.com — 论述了 inline artifact editing + 多文档会话渲染。
- Cursor. (2025, 2026). Composer Mode Architecture Blog Posts. https://cursor.com/blog — 详细展示了 streaming/committed/undoable 三轨道的渲染层实现。
- Sourcegraph. (2024). Cody 4.x Architecture: Stream Trace, State, UI. https://sourcegraph.com/blog — 5 轨道 + ask 嵌入 + undo stack telemetry 全景视图。
- Vercel. (2024, 2026). v0 Engineering: Streaming React Preview. https://vercel.com/blog — 流式 UI + 实时 React 渲染的工程落地,文末给出 streaming / code-block 协议。
- Linear. (2025, 2026). Linear AI Documentation: Track-based Conversation Model. https://linear.app — Track-based streaming UI 在项目管理工具里的协议层实现。
- Replit. (2024, 2026). Replit Agent Step Rendering. https://blog.replit.com — 介绍 prerendered progress map 与 step-icon 轨道。
- GitHub Next. (2024, 2026). Copilot Workspace Architecture White Paper. https://githubnext.com — 主线 GIthub Copilot Workspace 的多智能体流式 UI 协议。
- Devin / Cognition. (2024, 2026). Devin Architecture Blog Series. https://cognition.ai/blog — heavy ask 模式 + 任务步骤 commit 边界的设计原则。
- LangSmith / LangChain. (2024, 2026). LangSmith Studio Track Telemetry. https://docs.smith.langchain.com — 给出 track event 流到 Langfuse 的 schema。
- Dify. (2025, 2026). Dify Workflow GUI Architecture. https://dify.ai/blog — 把本架构作为 SaaS 暴露给企业构建多轨 AI 应用。
- Notion. (2024). Notion AI Block Streaming. https://notion.so/blog — block-level streaming 与 undo stack in collaborative editor。
- OpenAI. (2025, 2026). Realtime API Streaming UX Guidelines. https://platform.openai.com/docs — 流式 UI 在 WebRTC 通道上的 closed-loop 设计。
- Google. (2025, 2026). Gemini Live Streaming UX on Android. https://ai.google.dev — 移动端流式 UI + 离线渲染的具体工程方法。
- Anthropic. (2026). Reason-Trace: Making AI Rollback Explainable. https://anthropic.com/research — AI 撤销时附带原因 trace 的可解释撤销栈研究。