对整体架构：

在探索这个问题的过程中，我们发现这不是一个单纯的前端渲染问题，而是一个涉及大模型生成、协议标准、后端校验、前端渲染、多业务治理的系统工程。基于此，本文将完整拆解我们的实践路径。

为了快速响应各业务场景的AI需求，我们构建了统一的 AI 助手框架：

在协议选型上，我们调研了多种方案，Zui终选择 Google 的 A2UI 协议，原因如下：

说实话，这个选择当时也是经过一番讨论的，哈哈。

自动绑定 DataModel 数据

Wrapper提供的Neng力：

对 Agent：

多业务可复用同一套基础设施

接入流程：

Surface 是 A2UI 中一个独立的 UI 实例载体，每个 Surface 有唯一的 surfaceId，代表一个独立的界面区域，具备从“未创建”→“Yi创建”→“可交互”的状态转换。我们需要确保这个过程合法有序，避免出现geng新不存在的界面、重复初始化等异常。为此，我们维护了每个 Surface 的状态机：

{ "sessionId": "session-xxx",   "messages": },  "series": },  { "name": "车企B", "data": },    ]          }      }    ]    }  ] }

渲染结果：

用户在对话框中输入：“生成一个用户报名信息的填写表单”

Agent 生成 A2UI JSON：

{ "sessionId": "session-xxx",  "messages": },           {  "id":"title-text","component":"Text","text":"用户报名信息填写"},           {  "id":"name-field","component":"TextField","label":"姓名","placeholder":"请输入姓名"},           {  "id":"email-field","component":"TextField","label":"邮箱","placeholder":"请输入邮箱"},           {  "id":"phone-field","component":"TextField","label":"手机号","placeholder":"请输入手机号"},          {  "id":"submit-btn", "component":"Button", "text":"提交报名", "action": { "name": "marketing.submitLead"} }           ]       }     }  ]}

渲染结果：

用户填写并点击提交后前端将表单数据回传至后端：

// 发送消息示例：后端读取注释中的数据作为结果用户提交了数据

后端处理完成后 调用 A2UI 服务，返回geng新界面的指令：

{   "sessionId": "session-xxx",  "messages":}       ]     }   ]}

前端接收消息，并处理 UI geng新：你懂的，这个过程其实挺复杂的。

目前，我们的 A2UI 方案Yi在部分业务中接入，正在快速迭代中。由于 A2UI 协议仍处于早期阶段，大模型Neng力也在持续演进，尚无法支持全部复杂组件的自主生成。因此，我们目前采用 A2UI 实现通用交互、业务自行实现复杂组件的混合模式。

前端处理的事件比较简单。对于后端处理的事件，会经历以下流程：咱就是说这个流程还是比较清晰的。

尽管我们通过Neng力隔离，Yi经生成了安全的 Prompt，但是由于模型输出可Neng不稳定，因此针对大模型产出的 A2UI JSON，必须经过严格校验才可放行。我们设计了双层校验机制：

第一层：结构校验

::: ProductCard {"name”:”手机”,”id”:}:::

这种方案Ke以快速实现大部分简单场景——前端预定义好各类卡片组件，Agent按约定格式输出，前端匹配渲染。

为啥百度不收录我的文章呢？有人说是百度算法的问题，也有人说是内容质量的问题，害，我也不太清楚。

统一状态存储，支持 path 级别读写和数据绑定：它的优势hen明显，你kan，这样一来前端处理就方便多了。

传统方案中，前端需要从文本流中正则匹配和解析JSON，链路脆弱。我们将文本流和结构化数据分离，两条通道独立传输，互不影响。若 a2ui_message 通道出现数据丢失，前端可依据 message_stream 中的文本内容降级展示，或通过 finish 事件中的完整消息进行重试补发，确保 UI 渲染的可靠性。不对不对，应该是反过来。