我们如何用 A2UI + Vue，让大模型长出“可交互界面”

📌 一句话摘要

本文详细阐述了 B 站商业广告团队基于 Google A2UI 协议自研 Vue 渲染器，构建了一套从 Agent 到前端的完整生成式 UI 体系，让 AI 助手从输出文字进化到生成可交互界面。

📝 详细摘要

文章围绕如何让 AI 助手从输出文字进化到生成可交互界面的核心问题展开。B 站商业广告团队在统一 AI 助手框架的基础上，发现模板填充方案在多业务复杂场景下的局限性，因此选择 Google A2UI 协议作为基础。他们自研了 Vue 渲染器和 Agent 完整工具链，形成了一套完整的生成式 UI 体系。文章详细阐述了 Runtime Schema 装配、双重校验机制（结构校验和过渡校验）、SSE 双通道输出、Wrapper 组件扩展等关键设计。通过这套方案，实现了前后端解耦、协议标准化，业务方接入周期从天级缩短到小时级，Agent 也具备了真正的界面生成能力。文章还通过图表和表单的 DEMO 示例，展示了从用户输入 Prompt 到组件渲染的完整流程。

💡 主要观点

- 基于 Google A2UI 协议，自研 Vue 渲染器，构建生成式 UI 体系。 选择 A2UI 协议因其标准化、声明式、可增量更新、框架无关和安全可控等优势，并基于此自研了 Vue 渲染器，实现了从 Agent 到前端的完整链路。

通过 Runtime Schema 装配和双重校验机制，确保 AI 生成 UI 的安全与稳定。 根据业务标识动态装配可用组件白名单，实现能力隔离；同时设计结构校验和过渡校验两层机制，防止模型输出不稳定导致的渲染异常。

采用 SSE 双通道输出，分离文本流和结构化数据，提升 UI 渲染可靠性。 将文本流和 A2UI JSON 数据通过两条独立 SSE 通道传输，互不影响，即使结构化数据丢失，也可通过文本流降级展示，确保渲染可靠性。

设计 Wrapper 组件体系和 DataModel，降低业务方接入成本。 业务方只需遵循统一规范编写 Vue 组件，通过 Wrapper 包装后注册即可使用，无需理解渲染器内部逻辑；DataModel 实现统一状态存储和 path 级别数据绑定。

💬 文章金句

- 如何让 AI 助手从'输出文字'进化到'生成界面'？

模板填充方案让 Agent 扮演的是'填表员'角色，而非'设计师'角色，Agent 无法根据上下文动态决定 UI 形态。
这不是一个单纯的前端渲染问题，而是一个涉及大模型生成、协议标准、后端校验、前端渲染、多业务治理的系统工程。
对 Agent：从'记忆数据格式'转向'理解 UI 描述语言'，具备真正的'界面生成'能力。

📊 文章信息

AI 初评：88

来源：哔哩哔哩技术

作者：哔哩哔哩技术

分类：人工智能

语言：中文

阅读时间：20 分钟

字数：4852

标签： A2UI, 生成式UI, Vue渲染器, AI助手, 大模型

阅读完整文章

我们如何用 A2UI + Vue，让大模型长出“可交互界面”

🤖 問 AI