前情提要

仅做分享科普，文章很多细节并未表达出来，有兴趣可以深入了解一下，目前还只是试用阶段，没有发布正式版本。自己也可以通过这个协议来学习 制作项目，有个人思考 还不用花大价钱购买哈哈

现状

现在我们日常熟悉的ai对话，都是以问答-生成文本内容来进行的。

而现在各大企业内部应该也有不少ai平台，描述一下需求即可搭建出一个像模像样的网站。但这都是由ai来生成js、html、css等代码文件最终运行渲染出来的，实质上还是文本输出。

A2UI是什么？

而今天，聊到的A2UI协议 给我的认知带来一些颠覆。

引用官网的简介：

A2UI（Agent to UI）是一种用于代理驱动界面的声明式用户界面协议。人工智能代理能够生成丰富的交互式用户界面，这些用户界面可以原生渲染于各种平台（Web、移动设备、桌面设备），而无需执行任意代码。

A2UI是Google提出的ai输出对于用户界面的一个标准化协议。他的愿景就是颠覆我们上面提到的给出代码来实现整个页面的搭建渲染，采用JSON格式输出前端需要的内容。

我在一开始看到这个框架描述 结合一个demo项目演示，我已经能略知一二——通过和模型对话（页面预设的点击按钮或者对话框体需求），模型通过我们预设好的prompt将最终结果以指定的JSON格式输出给前端服务器（目前官网看下来都是通过node.js跑的）这样结合模型的流式输出达到边生成变渲染页面。

这里的JSON格式不是传统的嵌套JSON，在面对复杂场景内容，过多的嵌套会导致模型遗忘一开始的层级，Google采用了水平化JSON，将每一级进行铺开，得到一个扁平化的JSON。

{
  「Column」: {
    「children」: [
      { 「Text」: { 「children」: [{ 「Span」: {...} }1 } },
      { 「TextField」: {...} }
    1
  }
}

{
  「components」: [
    { 「id」: 「container_01」, 「component」: 「Column」, 「children」: [「text_01」, 「input_01」] },
    { 「id」: 「text_01」, 「component」: 「Text」, 「props」: { 「text」: 「请输入邮箱」 } },
    { 「id」: 「input_01」, 「component」: 「TextField」, 「props」: { 「label」: 「email」 } }
  ]
}

A2UI的特点

相比传统生成，比较安全，因为不用生成完整的页面代码，只需要通过服务端代码预设的白名单组件库，对输出的json进行一次校验。

只有目录里存在的组件，才会被渲染。

这意味着：即使 AI 被黑客劫持，试图注入一段 <script>alert(『hacked』)</script>，客户端也会直接丢弃——因为 Catalog 里没有 script 这个组件。

个人思考

我觉得A2UI是否为前端同学带来了一些新的开发方向，传统简单网页通过ai生成，已经可以极大降低人力成本。而通过A2UI协议，需要前端同学进行调教，借助该协议，结合ai来开发用户个性化页面。

参考

https://a2ui.org/

https://zhuanlan.zhihu.com/p/1984790925424214557

#AI新知#