生成式界面 (GenUI) 将数字设计从静态的预渲染模板转变为实时构建的动态界面。开发者无需对每种可能的状态进行硬编码,而是由大语言模型 (LLM) 来编排界面,根据具体的用户意图和会话上下文调整布局、组件和数据可视化。
实际上,界面充当灵活的编排层。它可以即时重新配置信息中心,或生成一个功能性迷你应用来处理静态界面无法预料的特定请求。
早期将 LLM 集成到应用中时,经常会遇到“文本墙问题”。虽然模型可以推理、规划和执行复杂的任务,但它们通常会将输出内容折叠成长段落或标准 Markdown。生成式用户界面通过允许功能强大的 LLM 的自然界面成为完整、功能齐全且互动式的用户体验来解决此问题。
生成式界面不是单一的技术,而是一系列实现策略。具体选择哪种方式取决于您对品牌安全保障的要求。
方法 | 运作方式 | 注意事项 |
静态生成式界面 | 智能体从一个固定的手工构建组件库中进行选择。 | 更高的控制权:保证品牌一致性和安全性;视觉灵活性受限。 |
声明式 GenUI | 智能体返回一个结构化架构(如 JSON),用于表示界面元素(卡片、列表、微件)。 | 平衡:可很好地进行扩缩并保持一致性,同时为智能体提供表达能力。 |
开放式生成式界面 | 智能体生成在前端呈现的原始代码 (HTML/CSS)。 | 灵活性最高:创意不受限制,但会带来严重的安全 (XSS) 和样式风险。 |
方法
运作方式
注意事项
静态生成式界面
智能体从一个固定的手工构建组件库中进行选择。
更高的控制权:保证品牌一致性和安全性;视觉灵活性受限。
声明式 GenUI
智能体返回一个结构化架构(如 JSON),用于表示界面元素(卡片、列表、微件)。
平衡:可很好地进行扩缩并保持一致性,同时为智能体提供表达能力。
开放式生成式界面
智能体生成在前端呈现的原始代码 (HTML/CSS)。
灵活性最高:创意不受限制,但会带来严重的安全 (XSS) 和样式风险。
用于构建智能体赋能的界面的生态系统正在快速发展,出现了几个不同的框架来处理界面的传输和渲染。
A2UI 是 Google 设计的开源界面工具包,旨在促进跨信任边界的 LLM 生成的界面。它使用高度安全的声明性 JSON 行 (JSONL) 流,将界面结构和数据模型从任何智能体发送到任何客户端应用。由于 A2UI 传输的是声明性数据而非可执行代码,因此它本质上是安全的,并且与框架无关,允许在 Web、Flutter、Android 和 iOS 上以原生方式呈现相同的智能体输出。智能体可以为任何现有设计系统“转译”用户界面。
AG-UI 是一种通用的双向连接协议,位于智能体前端和智能体后端之间。它由 CopilotKit 开发,可处理复杂的状态同步,并无缝支持各种生成式界面规范,充当桥梁,将智能体输出转换为丰富的互动式前端组件。
MCP 应用是一种 Model Context Protocol 界面扩展程序,可将界面视为智能体工具可以返回的互动式“资源”。MCP 服务器可以构建并返回界面组件,作为在沙盒 iframe 中呈现的 HTML,允许第三方服务在任何符合要求的智能体中保持其独特的视觉标识。
要将 GenUI 从原型转变为生产环境,需要考虑以下四个重要考虑因素:
为防止界面注入(即提示注入迫使模型呈现恶意代码),请考虑采用最小权限界面模型。A2UI 等协议传输的是数据,而不是代码,并且客户端应仅渲染经过预先批准和审核的组件。
对于生成式界面的非确定性界面,传统的视觉回归测试更容易失败。测试应转向概率性断言,以验证意图和功能组件(例如特定按钮)是否存在且可互动,而无需考虑其确切位置。
增加推理步骤会影响 Time to Interactive (TTI)。为了保持响应速度,请考虑实现流式界面更新,例如使用 JSONL 立即开始渲染,以及使用基于矢量的缓存为类似查询提供之前生成的界面结构(语义缓存)。
动态界面必须符合 WCAG 标准。通过将无障碍要求构建到基础 JSON 架构中,使用架构驱动型无障碍功能。然后,渲染引擎可以根据所请求的组件类型自动注入所需的 ARIA 标签和角色。
因素 | 传统界面 | 生成式界面 |
开发速度 | 手动 sprint 周期 | 按需生成 |
用户体验一致性 | 较高(僵化的设计系统) | 变量(情境适应) |
安全风险 | 较低(静态代码审核) | 较高(需要严格的沙盒) |
主要应用场景 | 核心工作流和设置 | 数据发现和复杂查询 |
因素
传统界面
生成式界面
开发速度
手动 sprint 周期
按需生成
用户体验一致性
较高(僵化的设计系统)
变量(情境适应)
安全风险
较低(静态代码审核)
较高(需要严格的沙盒)
主要应用场景
核心工作流和设置
数据发现和复杂查询
Google Cloud 提供了一整套工具,可用于构建、治理和扩缩能够提供生成式界面的 AI 智能体。