OpenUI vs A2UI vs json-render：生成式 UI 框架怎么选

生成式 UI 的开源项目都在做同一件事——让 agent 用可交互的界面回应，而不只是吐一段文字。但模型到底该生成什么、应用怎么约束可用的 UI、结果能渲染到哪里，各家给出的答案并不一样。

要点速览

• 四个项目解决的不是同一层问题。 OpenUI 和 json-render 是"生成式 UI 框架"，A2UI 是 agent 到客户端的协议，OpenGenerativeUI 则偏向开放式的视觉体验。
• token 与延迟差距明显。 OpenUI 以紧凑的行式语言把 token 压到 1x，60 tok/s 下首屏约 4.9 秒；json-render 和 A2UI 是 3x（14.2 秒），OpenGenerativeUI 是 4x（约 20 秒）。
• 要跨 Web、移动端、邮件多端复用同一套 UI，或要做数据驱动的聊天界面和仪表盘，目前答案都指向 OpenUI；如果只需要一次性的创意视觉（动画、生成艺术），CopilotKit 的方案更合适。

提纲

• 生成式 UI 框架都有哪些
• 四家方案分别在做什么
• 功能逐项对比
• 怎么选：四种场景对应的答案

生成式 UI 框架都有哪些

开源生成式 UI 项目的共同目标是一致的：让 agent 用交互式界面来回应，而不是只给文本。真正的分歧在于三点——模型生成什么、应用如何控制可用的 UI、结果能在哪里渲染。

OpenUI 官方文档的对比页把自家方案和另外三家放在一起：Vercel 的 json-render、Google 的 A2UI，以及 CopilotKit 的 OpenGenerativeUI。由于它们并不都解决生成式 UI 技术栈里的同一个环节，这份对比的重点放在各自的实现方式和适用场景上。

四家方案分别在做什么

• OpenUI 使用一种紧凑的、基于行的语言（line-based language），让模型从已注册的组件里拼出界面。它的 runtime 支持流式渲染、应用状态、数据访问和用户交互。组件库既给前端提供组件，也给后端提供 system prompt——后端把组件库序列化成 spec，据此生成 system prompt 交给模型，模型输出 OpenUI Lang 文本，前端再用 <Renderer /> 边收边渲染。
• json-render 从一份 component catalog 出发，生成流式的 JSONL patches，由客户端按补丁逐步应用。
• A2UI 是一套协议，负责把 agent 发出的声明式界面描述送到客户端应用。客户端再把这些描述映射到可信的、平台原生的组件上——模型不直接决定长什么样，只描述需要什么。
• OpenGenerativeUI 聚焦用 CopilotKit 构建开放式的视觉体验。它既支持注册好的 React 组件，也支持自由形式的 HTML 或 SVG——后者渲染在 sandboxed iframe 里。

用一张图概括四家的"生成什么 → 渲染到哪"。

flowchart LR
  A[Agent] --> B{Generative UI approach}
  B -->|OpenUI Lang| C[Line-based language over registered components]
  B -->|Streaming JSONL patches| D[json-render component catalog]
  B -->|Declarative protocol| E[A2UI platform-native components]
  B -->|Free-form HTML or SVG| F[OpenGenerativeUI in sandboxed iframe]
  C --> G[Web, mobile, email]
  D --> H[Web, mobile, PDF, email, video]
  E --> I[Web, iOS, Android]
  F --> J[Web]

功能逐项对比

这张表里最值得看的是两行：token 数直接换算成延迟，因为输出越长，流式渲染的首屏等待就越久；而安全风险那一行的差别来自渲染方式——前三个方案最终都落在预先定义好的组件上，OpenGenerativeUI 允许自由 HTML/SVG，因此必须靠 sandboxed iframe 兜底。

怎么选：四种场景对应的答案

官方给出的选型建议很直接：

• 数据驱动的聊天界面和仪表盘 → OpenUI
• 在 Web、移动端、PDF、邮件里复用同一套 UI → OpenUI
• 跨 iOS、Android、Web 的多 agent 系统 → OpenUI
• 一次性的创意视觉（动画、生成艺术） → CopilotKit OpenGenerativeUI

换句话说，只要你的界面需要落在真实的产品形态里——有设计系统、要一致、要跨端，就应该选框架；只有在需要"自由发挥"的视觉表达时，才需要接受自由 HTML/SVG 带来的不确定性和更高的安全成本。

参考链接

1. OpenUI vs others（原文对比页）
2. OpenUI GitHub
3. json-render GitHub
4. A2UI GitHub
5. OpenGenerativeUI GitHub
6. OpenUI Getting Started
7. OpenUI Lang：定义组件

作者: itech001 来源: 公众号：AI人工智能时代(the-ai-era) 网站: https://www.theaiera.top/ 关注每日最新AI新闻和技术博客，主页有更多的文章的AI 技术参考：https://www.theaiera.top

本文首发于 AI人工智能时代，转载请注明出处。