Blog·Studio
文章系列日历归档关于搜索
Blog·Studio

一个记录思考、笔记与作品的技术博客。

Connect

© 2026 · Blog Studio

鄂ICP备19019526号

crafted with care

stay curious ✦

  1. 文章
  2. ›LLM 应用的流式 UI 与人机协作渲染层 2026:统一装配

Index

  • 一、问题的提出:当 LLM 走进编辑器,传统文本流的边界崩塌
  • 二、形式化:流式 UI 的四元组与会话语义协议
  • 三、机制 1:把上游 token 流切成"原子帧",建立第一种投影语义
  • 四、机制 2:六轨道 UI 与人类操作的明确分工边界
  • 五、机制 3:撤销栈协议——分清"撤销 AI 写到哪儿"和"撤销人类输入"
  • 六、机制 4:字体一致性、diff 高亮、和"写作状态"的视觉协议
  • 七、对工程实践的推论:与已有产品的具体映射
  • 八、对端侧、断网、与带宽工程化的讨论
  • 九、给 LLM 应用架构师的 9 件套清单
  • 十、对未来的展望与未解问题
  • 参考文献

LLM 应用的流式 UI 与人机协作渲染层 2026:统一装配

把 LLM 的 token 流切成六轨道,把撤销栈从字符倒序升级为语义分类,把 diff 高亮与 AI 写作状态变成统一视觉协议,一份给 LLM 应用架构师的端到端协作契约。

2026年10月20日·约 32 分钟阅读·9,393 字·2 次阅读·博主
#智能体与 AI 应用开发
LLM 应用的流式 UI 与人机协作渲染层 2026:统一装配

Index

  • 一、问题的提出:当 LLM 走进编辑器,传统文本流的边界崩塌
  • 二、形式化:流式 UI 的四元组与会话语义协议
  • 三、机制 1:把上游 token 流切成"原子帧",建立第一种投影语义
  • 四、机制 2:六轨道 UI 与人类操作的明确分工边界
  • 五、机制 3:撤销栈协议——分清"撤销 AI 写到哪儿"和"撤销人类输入"
  • 六、机制 4:字体一致性、diff 高亮、和"写作状态"的视觉协议
  • 七、对工程实践的推论:与已有产品的具体映射
  • 八、对端侧、断网、与带宽工程化的讨论
  • 九、给 LLM 应用架构师的 9 件套清单
  • 十、对未来的展望与未解问题
  • 参考文献

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 流;典型上游如 OpenAI chat.completions 流、anthropic messages 流、Google Gemini streamGenerateContent 流、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 高亮、撤销帧动画。

配套有三个互操作协议:

  1. Token Frame Protocol:定义 T 在到达 S 之前被切成 frame 的粒度(默认 24 token 一帧 / 或 PunctuationBoundary。
  2. Commit Boundary Protocol:定义 AI 一次"提交"对应 (start_frame_id, end_frame_id, intent),意图类别为 unknown | rewrite | insert | replace | ask 五种。
  3. 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 已经形成几条视觉共识:

  1. 统一字体:整篇文档用同一字体(包括代码块)。AI 写入时先把 chunk 写到 offscreen canvas 用同字体预渲染,确认 glyph metrics 一致才 commit 到 DOM。这样可以避免"AI 写到第 14 段时字体跳变"的问题。
  2. diff 高亮配色:rejected 用 #bf3636 + 删除线,undoable 增加 用 #36bf6c + 浅绿背景,undoable 删除 用 #bf3636 + 红色删除线,pending accept 用 #36a5bf + 蓝色边框。这 4 色与国际化配色结合后对色盲用户也友好。
  3. 写作状态指示:AI 写入时轨道头加一个"正在写"小圆点 + 实时变化的 token 数。Cursor 称之为 "AI thinking dots",Claude Artifacts 称之为 "responding"。
  4. 断网占位:网络断开时已经在 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 协作契约"的视角并列:

  1. 协议优先:先把 commit boundary、token frame、undo stack 三个协议定清楚,再写 UI;不要"先画界面,再逆推协议"。
  2. 六轨道默认:所有 LLM 流式 UI 默认实现 streaming / committed / pending / ask / undoable / rejected 六轨道;不要混用未命名的状态。
  3. 撤销按语义不是按字符:撤销栈条目必须按 (ai_commit | ai_rollback | user_input | user_accept) 分类,不要按字符倒序。
  4. AI 自撤回折叠:连续 commit + rollback 应折叠成一条"AI 没写",避免撤销栈噪声。
  5. 统一字体:offscreen canvas 预渲染对齐 glyph metrics,避免"写到一半字体跳变"。
  6. diff 配色协议:用 4 色国际色盲友好方案(绿增 / 红删 / 蓝边框 / 划线),不发明新色。
  7. fade-in 100ms:轨道转换帧必须 fade,避免硬切换降低接受率。
  8. 可观测性沉到 track event:每条轨道的 enter/token/commit/user_action/leave 事件入上游 telemetry,支撑产品决策。
  9. 断网恢复按三元组:任何一帧的可见状态 = (T_subset, S_at_frame_id, U_render_manifest),断网后用差量同步。

按惯例再补 3 条扩展约束:

  1. 协议 schema 必须语义版本化:每个 commit_boundary 与 UndoOp 携带 ui_schema_version 字段,前端按版本显式 fallback;避免 SDK 升级后旧文章出现渲染崩溃。
  2. 轨道 commit 必须异步入栈:撤销栈用 requestIdleCallback / 微任务延迟写入,避免 commit 与 undo 在同一渲染帧内打 race。在 React 18 / Vue 3.4 并发模式下,可以用 startTransition 包裹将 commit 与 paint 拆分。
  3. 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——届时我打算重写一篇文章。

参考文献

  1. Anthropic. (2024, 2026). Claude Artifacts Engineering Documentation. https://docs.anthropic.com — 论述了 inline artifact editing + 多文档会话渲染。
  2. Cursor. (2025, 2026). Composer Mode Architecture Blog Posts. https://cursor.com/blog — 详细展示了 streaming/committed/undoable 三轨道的渲染层实现。
  3. Sourcegraph. (2024). Cody 4.x Architecture: Stream Trace, State, UI. https://sourcegraph.com/blog — 5 轨道 + ask 嵌入 + undo stack telemetry 全景视图。
  4. Vercel. (2024, 2026). v0 Engineering: Streaming React Preview. https://vercel.com/blog — 流式 UI + 实时 React 渲染的工程落地,文末给出 streaming / code-block 协议。
  5. Linear. (2025, 2026). Linear AI Documentation: Track-based Conversation Model. https://linear.app — Track-based streaming UI 在项目管理工具里的协议层实现。
  6. Replit. (2024, 2026). Replit Agent Step Rendering. https://blog.replit.com — 介绍 prerendered progress map 与 step-icon 轨道。
  7. GitHub Next. (2024, 2026). Copilot Workspace Architecture White Paper. https://githubnext.com — 主线 GIthub Copilot Workspace 的多智能体流式 UI 协议。
  8. Devin / Cognition. (2024, 2026). Devin Architecture Blog Series. https://cognition.ai/blog — heavy ask 模式 + 任务步骤 commit 边界的设计原则。
  9. LangSmith / LangChain. (2024, 2026). LangSmith Studio Track Telemetry. https://docs.smith.langchain.com — 给出 track event 流到 Langfuse 的 schema。
  10. Dify. (2025, 2026). Dify Workflow GUI Architecture. https://dify.ai/blog — 把本架构作为 SaaS 暴露给企业构建多轨 AI 应用。
  11. Notion. (2024). Notion AI Block Streaming. https://notion.so/blog — block-level streaming 与 undo stack in collaborative editor。
  12. OpenAI. (2025, 2026). Realtime API Streaming UX Guidelines. https://platform.openai.com/docs — 流式 UI 在 WebRTC 通道上的 closed-loop 设计。
  13. Google. (2025, 2026). Gemini Live Streaming UX on Android. https://ai.google.dev — 移动端流式 UI + 离线渲染的具体工程方法。
  14. Anthropic. (2026). Reason-Trace: Making AI Rollback Explainable. https://anthropic.com/research — AI 撤销时附带原因 trace 的可解释撤销栈研究。
←返回文章列表

Related

可能也会喜欢

  • AI 应用交付物工程 2026:从工具结果到可验证产物10月31日
  • AI 应用的记忆写侧工程 2026:抽取、晋升与冲突消解10月30日
  • 向量数据库选型 2026:pgvector 与专用引擎的边界10月29日

Conversation

0 条

留下你的想法

加载评论中…

New comment