短暂性鸿沟：使用开源修复方案应对 AI 生成的 UI 中的数据丢失

Source: Dev.to

我并不是专业作家，而且这是一个相对新颖的问题领域，所以我会尽力解释清楚。

Generative UI（GenUI）通常指的是 AI agent 向前端发送视图定义（通常是 JSON）。前端根据该定义渲染组件，并将操作回传给 agent。这些视图本质上是临时的——刷新页面或让 agent 重新生成布局时，之前的结构往往会被替换。其好处非常显著：复杂应用中的界面可以瞬间适应你的工作流。需要额外的三个字段？没问题。但这种灵活性也带来了一个严重的问题。

瞬时性鸿沟

我开始把这个问题称为 瞬时性鸿沟。也许之前有人使用过这个术语，但这是我的定义：

生成式 UI 采纳的障碍并不是流式 token 或模型延迟。想象一下用户在填写一个由 AI 刚刚生成的 50 项表单。进行到一半时，他们发现还需要再添加一个字段，于是请求 AI 添加。AI 为了帮助，重新生成了界面，结果他们已经输入的所有内容瞬间消失——不是因为用户删除，而是因为框架直接重建了 UI，清除了状态。

为什么 “只把它存到数据库里” 行不通

一个常见的建议是：

“只把用户的数据保存到数据库里。”

事情并不是这么简单。这个问题的行为更像是 git 合并，而不是简单的数据库读/写。每次代理修改界面时，UI 结构本身都会随之演变。

Source:

技术问题

大多数 UI 框架通过匹配结构键来跟踪状态。如果结构变化幅度太大，框架会认为旧节点已经不存在，并重置所有内容。

当前视图定义

{
  "section": {
    "key": "section_1",
    "children": [
      {
        "key": "input_2",
        "type": "string",
        "value": "John Doe"
      }
    ]
  }
}

代理返回的新视图

AI 决定将输入包装在一个新组中或更改层级结构：

{
  "section": {
    "key": "section_1",
    "children": [
      {
        "group": {
          "key": "group_99",
          "children": [
            {
              "key": "input_3",
              "type": "select",
              "value": "???"
            }
          ]
        }
      }
    ]
  }
}

由于键或类型不再与之前的框架匹配，框架本质上会说：“我不知道这是什么，删除它。”节点被重置，数据随之消失。如果键匹配但类型发生变化（例如 string → object），应用甚至可能在运行时崩溃。

这就是 Ephemerality Gap：用户意图与 UI 不断变化的结构状态之间的脱节。

方法

解决方案在概念上很简单：用户状态必须是持久的，并且与视图结构分离。

1. 持久的语义标识 – 不要将用户数据绑定到 UI 节点上，而是使用稳定的标识符来跟踪输入。
2. 对齐步骤 – 每当视图结构发生变化时：
   • 如果某段数据不再映射到新的视图，保留它而不是删除。
   • 如果 AI 稍后重新引入该控件，自动重新填充（rehydrate）数据。
   • 如果 AI 试图覆盖用户输入的内容，则将建议放入缓存，让用户决定是否接受。

在此模型中，AI 永远不会覆盖用户输入。

我构建的

我创建了一个名为 Continuum 的运行时。它位于 AI 代理和你的前端框架之间，负责持久状态层和调和逻辑。

• GitHub:
• Website:

征求社区反馈

如果你正在构建基于代理的界面，当 UI 不是硬编码时，你是如何处理状态持久化的？我真的想了解其他人是如何解决这个问题的。欢迎尝试仓库、破坏它，并进行分叉。