尝试科幻电影中的UI交互，我写了一个只有3条指令的方案

render、update、destroy。就这三条指令，后端零依赖，什么语言都能用。

好多人对 AI 助手最初的想象，都是从科幻电影来的。

主角开口提需求，屏幕上的数据、地图、模型立刻变样，界面跟着对话一层一层展开。那种感觉妙就妙在，AI 不光听懂了人话，还直接把理解结果扔到了界面上，让你能看、能点、能操作。

我一直觉得这不是科幻。它正在变成一件要做的事。

Agent 很强了，但界面没跟上

这两年 AI 产品的竞争全在模型上：更强的理解、更长的上下文、更复杂的推理、更稳定的工具调用。能力卷得飞起。

Agent 确实能推工作流了——它能理解意图、拆解步骤、调用工具、给出结论。

但界面呢？还是那套老东西。

你跟 AI 说："帮我看看这个季度的销售额。"Agent 规划好了，工具也调了，数据也拿到了。它完全可以下一步就生成图表、标注异常、给出建议。

可问题来了——它没有一个随手可用的界面通道。

——它能生成图表，但没有地方放。 ——它知道该走审批流程，但没有按钮可以挂上去。 ——它推荐了商品，但筛选、确认还得回到固定表单里来一遍。

瓶颈不在模型能力，也不在工作流引擎。瓶颈在界面层——Agent 能做的事，界面表达不出来。

用户想要的不只是一段话。分析卡片、进度条、输入表单、确认按钮，这些东西应该跟着对话自然出现才对，而不是让 Agent 在后台吭哧吭哧跑完流程，界面上还是一动不动。

这就是 A@UI 想填的坑。

让 Agent 的输出直接进入界面

思路不复杂：AI 推进任务的时候，能同时生成和更新界面元素。

别光输出文字了。Agent 直接说："这里放个搜索框，这里放张趋势卡片，这里放个确认按钮。"

怎么做到的呢？三条指令：

render   → 创建组件，传入初始数据
update   → 原地更新组件的属性
destroy  → 干净地销毁组件

就这三条。后端只负责往外扔 JSON，前端运行时接住了就渲染。

后端用 Python、Go、Node、Rust 都行——能输出 JSON 就行。零 SDK，零依赖。

适合什么样的产品

如果你的产品里有"边聊边操作"的流程，这东西会比较对路：

• AI 客服：用户反映问题 → 界面弹出工单状态、推荐动作、确认按钮
• 数据分析助手：分析结论出来了 → 同步出现指标卡片、异常项、下一步建议
• 智能表单：根据用户上一句话动态生成字段，不用预先铺一长串表单
• 内部工作台：查询、审批、执行、反馈串成一条连续流程，不用跳来跳去
• 电商推荐：推荐的同时把候选项、筛选条件、操作入口都摆出来

共同点就一个：用户更快把事办完。

AI 负责听懂意图，也负责把界面推到该在的状态。体验上更流畅，路径更短。

五分钟能跑起来

前端三行代码接入：

import { createAAtUIPlugin } from 'a-at-ui/runtime/vue'
import manifest from './a-at-ui.manifest.json'

app.use(createAAtUIPlugin({ manifest }))

后端按 SSE 格式把 JSON 命令流推过去就行：

const commands = [
  { type: 'render', component: 'SearchBox',   params: { placeholder: '搜索项目' } },
  { type: 'render', component: 'ArticleList',  params: { items: [] } },
]

for (const cmd of commands) {
  res.write(`data: ${JSON.stringify(cmd)}\n\n`)
}
res.write('data: [DONE]\n\n')

没有后端 SDK，不用协商传输方式，也不用注册组件目录。

A@UI vs A2UI：为什么只要三条指令

你可能知道 Google 也做了个 A2UI，目标类似。它很全：surface、component、catalog、action、data binding……Angular、Flutter、Lit、React 官方渲染器全齐了。

但全的另一面是重。要接入 A2UI，后端得装 SDK、注册目录、协商传输、管理路由。

大厂有基础设施团队撑着，这没问题。但我这种小团队和个人开发者，真扛不住。

A@UI 选了另一边：后端越简单越好。 不是要替代 A2UI，是给被重型方案劝退的人多一条路。

想直接体验一下？

我的个人站 mengqinghe.com 整个前端都是 A@UI 驱动的。文章列表、搜索框、标签筛选，全由 Agent 通过协议流控制。

给 AI 编程工具也准备了

仓库 skills/ 目录里放了三个技能文件，对应三种角色的需求：

• a-at-ui-manifest — 组件库作者用的，告诉 AI 怎么写 manifest，声明组件参数和事件
• a-at-ui-setup — 前端开发者用的，告诉 AI 怎么装包、注册组件、接入 Vue 运行时
• a-at-ui-protocol — 后端 Agent 用的，告诉 AI 怎么按协议输出 render / update / destroy

你用 Claude Code、Codex 或者 VS Code 的时候，AI 能直接读这些文件，按规范帮你写代码。字段名不用记，文档不用翻了。

最后

A@UI 还在快速迭代，没到稳定版。但核心方向不会变了：三条指令，一个 JSON 流，零后端依赖。

如果你也在做 AI 应用，想让产品从"会聊天"走到"会推任务"，可以试试这条路。先拿一个小场景起步——比如把分析结果变成指标卡片，或者让流程进度跟着 Agent 走——跑通了再一点一点加。

觉得有点意思的话，欢迎共创，求个 Star，感谢支持开源。

GitHub：https://github.com/mqhe2007/a-at-ui

文档：https://a-at-ui.mengqinghe.com

作者：孟庆贺 （内容由AI生成，仅供参考）