生成式 UI：面向 AI 的三种方法

生成式 UI：AI 代理的三种策略

AI 代理不仅仅生成文本——它们还能根据用户情境创建动态 UI 组件。这使得交互式图表、表单或卡片能够取代静态界面。这种方法有效应对界面多变性的挑战，预设状态无法覆盖所有场景。

主要应用场景

生成式 UI（GenUI）在界面过于灵活、无法硬编码时大放异彩。主要场景包括：

• 实时工件：代理生成可编辑对象，如图表或表格。用户调整参数，AI 实时响应并提供建议。
• 数据收集：根据任务定制动态表单，例如预订参数。
• 数据可视化：用图表或卡片取代文本描述，减轻认知负担。
• 选项导航：处理多结果时的过滤器和比较。

方法一：直接 HTML 生成

模型直接输出 HTML 代码，由浏览器渲染。流程简单：提示 → HTML → 渲染。

优势：

• 实现快速。
• 模型在选择元素时完全自由。

劣势：

• 破坏设计系统一致性：按钮和颜色千差万别。
• 安全隐患：模型生成的代码可执行。
• 幻觉属性或浏览器故障。

适合原型或无严格 UI 规范的工具。生产环境因不稳定而避免使用。

方法二：声明式描述

代理生成 JSON 描述结构：组件类型、顺序和属性。客户端使用原子元素目录（字符串、按钮、输入框）进行渲染。基于 Google 的 A2UI 协议。

优势：

• 样式一致，与设计系统对齐。
• 无需自定义组件即可灵活组合。

劣势：

• 结构因提示而异。
• 依赖模型质量。

非常适合高度多变的视觉化，同时保持品牌一致性。

方法三：组件库选择

代理从目录中挑选现成组件，并填充属性。最大控制：无代码或结构生成。

Tambo 框架通过 AG-UI 协议实现：组件用 Zod 模式注册。支持两种类型：

• 生成式：聊天内渲染（图表、卡片）。
• 交互式：UI 任意位置的 React 组件，双向绑定（代理监控状态）。

优势：

• 完全掌控视觉和用户体验。
• 安全可靠。

劣势：

• 需提前预见所有组件需求。

方法对比

| 标准 | HTML | 声明式 | 静态 (Tambo) |

|------------|----------|-----------|--------------|

| 视觉控制 | 低 | 中 | 高 |

| 代理自由度 | 最高 | 高 | 有限 |

| 复杂度 | 低（调优麻烦） | 中 | 中 |

| 安全性 | 有风险 | 安全 | 安全 |

在分析产品中的实现

在营销分析 AI 助手的产品中，我们将 UI 分层：

• 工作区：交互组件（表格）。代理仅更新数据，不动结构。
• 聊天区：生成组件（洞察卡片、小图表）。

注册：组件附带描述和模式。代理实时流式传输属性。

核心要点

• GenUI 减轻认知负担，但需平衡自由与控制。
• 根据 UI 多变性和可预测性需求选择方法。
• Tambo 和 A2UI 是 React 项目的成熟工具（Tambo v1.0 将于 2026 年 2 月发布）。
• 严格测试安全性和跨浏览器兼容性。
• 以用户为中心：让 AI 增强而非干扰。

— Editorial Team