A2UI极大提升智能体回答内容的表现力

agent对话框表现力差

Agent 越聪明,交互却越笨拙。
LLM 框架与协同工具有了规划、记忆、工具调用,但与用户的交互仍停留在聊天框——这一滞后,正在成为 Agent 落地的瓶颈。
聊天框,正在拖垮 Agent。
不管是 GPT、DeepSeek、Claude，还是各种音视频 Agent，核心入口几乎清一色是一个聊天框。
但只要你真正做过 AI 应用，就会很快发现一个现实问题：
• 真实任务往往不是一句话能完成的；
• 用户输入经常不完整、不规范、缺关键信息；
• 单靠「再问一句」对话，体验很容易崩。
比如这些场景：
• 订机票要选日期、舱位、乘客
• 填订单要地址、手机号、发票信息
• 企业客服要订单号、时间范围、商品规格
你让用户靠「多轮对话」一点点补齐这些结构化信息，显然即使能顺利执行下来，步骤及体验也是相当差的。

A2UI是什么

A2UI 可以理解为一个“让 AI 智能体学会说界面语言”的开放标准。它由 Google 发起并开源，旨在解决一个核心问题：如何让 AI 智能体安全、可控地生成动态、可交互的用户界面，而不是只输出纯文本或不可控的代码。

A2UI 是协议,不是框架。
不是 React / Vue / Flutter,也不依赖特定技术栈——它是一套声明式 UI 协议,定义 Agent 与前端之间的通信标准。

四大特性

• 声明式 UI：Agent 输出 JSON 描述"需要什么界面",不输出 HTML / JSX 代码.
• 安全可控：数据而非代码 · 前端只渲染白名单组件,杜绝恶意脚本注入.
• 跨平台渲染：一次描述 · Web / iOS / Android / Flutter 多端原生适配.
• 模型解耦：不绑定 LLM · Gemini / GPT / Claude / MaaS 自由接入.

A2UI长什么样

大模型返回json类似这样：

[
  {"version":"v0.9","createSurface":{"surfaceId":"main","catalogId":"basic","sendDataModel":true}},
  {"version":"v0.9","updateComponents":{"surfaceId":"main","components":[
    {"id":"root","component":"Column","children":["title","metrics_row","disk_pie","status"],"justify":"start","align":"center"},
    {"id":"title","component":"Text","text":"📊 服务器监控面板","variant":"h2"},
    {"id":"metrics_row","component":"Row","children":["cpu_metric","mem_metric"],"justify":"center","align":"center"},
    {"id":"cpu_metric","component":"PresetMetric","label":"CPU 使用率","value":"75%","trend":"up","trendValue":"⚠️偏高"},
    {"id":"mem_metric","component":"PresetMetric","label":"内存使用率","value":"60%","trend":"neutral","trendValue":"正常"},
    {"id":"disk_pie","component":"PresetPieChart","data":[{"label":"系统","value":40,"color":"#8b5cf6"},{"label":"数据","value":35,"color":"#06b6d4"},{"label":"空闲","value":25,"color":"#e5e7eb"}],"innerRadius":0,"showLegend":true},
    {"id":"status","component":"Text","text":"⚠️ CPU 使用率偏高，建议检查运行进程","variant":"body"}
  ]}},
  {"version":"v0.9","updateDataModel":{"surfaceId":"main","path":"/","value":{}}}
]

agent对话框渲染成这样：

工作原理

A2UI 的工作方式，是让 AI 智能体输出一份结构化的 JSON 数据来描述它想要的界面，然后由客户端agent应用根据这份json，用自己的组件库去“渲染”出真正的界面。
A2UI 官方内置了一些组件。如果要特殊的效果，可以扩展。

如何让大模型返回a2ui json

这是最为关键的地方，demo里的提示词：

如何扩展? BotAI

git上找到一个扩展，很棒，推荐一下：https://github.com/BoteAI/a2ui
BoteAI 不是重新实现 A2UI ，而是在官方 @a2ui/web_core + @a2ui/lit 之上构建 渲染器封装层 （BaseRenderer）和 扩展工具链 （custom-kit + comp-preset），官方 18 个组件的渲染逻辑完全由 @a2ui/lit 提供。

A2UI官方 18 个组件（@a2ui/web_core basicCatalog）

BoteAI 增加的组件

Preset 包 12 个（@boteai/a2ui-comp-preset）

本工程自定义 3 个（customCharts.jsx）

总计

官方 18 + BoteAI Preset 12 + 本工程自定义 3 = 33 个组件

案例实操（已开源）

https://github.com/astonish921/a2ui-botai-poc