以下是掌握生成式 AI 的方法：

简而言之，就是为你的每个 Agent 或模型的扩展回答生成专属界面。

从这三篇基础资料开始：

• Google 的论文《LLMs are Effective UI Generators》→ http://generativeui.github.io
• awesome 列表 → http://github.com/narrowin/awesome-generative-ui…
• AI SDK 结构化数据文档 → http://ai-sdk.dev/docs/ai-sdk-core/generating-structured-data…

真正值得掌握的框架：

• Vercel AI SDK，默认选择，最成熟的方案
• CopilotKit + AG-UI，已被 Google、AWS、Microsoft 和 LangChain 采纳的协议
• A2UI，Google 的声明式规范，Agent 只能请求白名单中的组件
• MCP Apps，MCP 的官方交互式 UI 扩展
• OpenUI Lang，一种流式 DSL，比传输组件 JSON 更节省 token
• assistant-ui 和 Tambo，用于 React 基础组件

按顺序构建以下项目，每个都能引出下一个：

1. 一个区块、一张卡片，端到端实现：schema、路由、组件、渲染
2. 六个区块作为判别联合体（discriminated union），用一个渲染器按类型切换
3. 一个对比页面，在两个模型上并行运行相同的提示词

然后研究优秀项目的实现方式：

• vercel/ai-chatbot
• miurla/morphic
• langchain-ai/langgraphjs-gen-ui_examples

真正的变现场景：

• 通过一个问题自动生成的仪表盘
• 直接返回表单而非表单操作说明的支持 Agent
• 不同团队需要查看同一数据不同视图的内部工具
• 任何需要用户做决策而非只是阅读的场景

区分好坏的两个关键点：

你的区块列表才是天花板，而不是模型——四个通用区块永远只会得到四个通用回答

以及，告诉模型何时使用哪个区块的提示词，比升级到更强的模型更能提升质量

生成式 UI

来源：https://generativeui.github.io/

生成式 UI：LLM 是有效的 UI 生成器

Dani Valevski (https://www.linkedin.com/in/dani-valevski-a3b5936/), Matan Kalman (https://www.linkedin.com/in/matankal/), Danny Lumen (https://www.linkedin.com/in/danny-lumen/), Eyal Segalis, Eyal Molad, Shlomi Pasternak, Vishnu Natchu, Valerie Nygaard, Srinivasan (Cheenu) Venkatachary, James Manyika, Yossi Matias

Google Research

摘要

AI 模型擅长生成内容，但通常使用静态的、预先定义的界面来呈现。具体来说，LLM 的输出往往只是一大段 markdown 文本。生成式 UI 是一个长期存在的愿景——模型不仅生成内容，还生成界面本身。在此之前，生成式 UI 尚无法稳健地实现。我们证明，经过适当的提示并配备正确的工具集，现代 LLM 能够针对几乎任何提示稳健地生成高质量的自定义 UI。在不考虑生成速度的情况下，我们实现的结果在人类偏好上压倒性地优于标准 LLM 的 markdown 输出。事实上，虽然我们实现的结果不及人类专家精心制作的界面，但在 50% 的案例中至少可以与之媲美。我们表明，这种稳健的生成式 UI 能力是涌现性的，相比之前的模型有显著提升。我们还创建并发布了 PAGEN——一个由专家制作的结果的新数据集，用于评估生成式 UI 实现，同时发布了我们系统的结果以供未来对比。

生成式 UI 示例

生成式 UI 在广泛的场景中都很有用。以下是由我们的实现根据用户提示自动生成的示例。点击示例即可查看生成结果。

教育

生成式 UI 特别有用的领域之一是教育。

儿童教育

生成式 UI 擅长极致的定制化。例如，以下是儿童教育的生成结果：

实用任务

生成式 UI 在实用任务中同样能发挥作用：

简单查询

即使是简单的查询，生成式 UI 也能生成令人惊喜的结果：

趣味与游戏

生成式 UI 还能生成有趣的应用和游戏：

方法概述

我们的生成式 UI 实现生成一个完整的网页，直接在用户浏览器中原样渲染。为此，我们采用了 3 个主要组件：

1. 一个服务器，暴露多个端点以提供关键工具的访问，如图像生成和搜索。
2. 为 Gemini 精心设计的系统指令，包含目标、规划指南、示例等。
3. 一组后处理器，修复仅靠系统指令无法解决的常见问题。

系统架构图

实验结果

我们在多种结果格式之间评估用户偏好：由人类专家为提示词精心制作的自定义网站、该查询在 Google 搜索的顶部结果、纯文本（不带 markdown 的 LLM 输出）、标准 LLM 输出（markdown 格式）以及我们的生成式 UI 实现。我们从 LMArena 随机抽取了 100 个提示词，并收集了人类评分员的成对偏好数据，每条结果发送给 2 名评分员。以下表格展示了各种 UI 形式的 ELO 分数和并排用户偏好。生成式 UI 获得了 1736.2 的 ELO 分数，表明用户对其有强烈偏好，超过了除人类专家之外的所有其他格式。更多详情请参阅论文。

用户偏好的 ELO 分数 成对用户偏好的胜率

生成式 UI 是一种随着新模型出现而逐渐成熟的能力——我们观察到使用新 Gemini 模型生成的结果具有强烈的用户偏好和显著更少的错误。

模型性能对比

BibTeX

@article{leviathan2025generativeui,
  title={Generative UI: LLMs are Effective UI Generators},
  author={Yaniv Leviathan and Dani Valevski and Matan Kalman and Danny Lumen and Eyal Segalis and Eyal Molad and Shlomi Pasternak and Vishnu Natchu and Valerie Nygaard and Srinivasan Venkatachary and James Manyika and Yossi Matias},
  journal={arXiv preprint arXiv:2604.09577},
  year={2025},
}

致谢

这项工作离不开 Yoav Tzur、Zak Tsai、Hen Fitoussi、Amir Zait、Oren Litvin、Christopher Haire、Liat Ben-Rafael、Ronit Levavi Morad、Kristen Chui、William Li、Ivan Kelber、Chloe Jia、Ryan Allen、Maryam Sanglaji、Tanya Sinha、Josh Woodward、Jeff Dean 以及 Theta Labs、Google Research、Google Search 和 Gemini 团队的宝贵贡献、深入建议、支持、反馈和鼓励，当然还有我们的家人。