开源 · MIT

AI@UI 让 AI Agent 驱动真实界面

让后端用 JSON 命令表达界面意图,由前端运行时渲染真实组件。无需绑定后端 SDK,支持任意语言和传输方式。

agent · ui
renderDataOverview

核心指令

三条指令,掌控全生命周期。

render

让 Agent 在目标位置创建一个 UI 组件,并传入初始数据。

command.json
{
  "type": "render",
  "component": "PersonalProfileCard",
  "params": {
    "name": "陈叙",
    "title": "内容策略师"
  }
}
update

随时更新已展示组件的内容,无需刷新页面。

command.json
{
  "type": "update",
  "widgetId": "widget-1",
  "params": {
    "title": "资深内容策略师"
  }
}
destroy

在合适时机移除组件,界面保持干净可控。

command.json
{
  "type": "destroy",
  "widgetId": "widget-1"
}

系统架构

协议优先,分层清晰。

输入端

AI Agent
PythonGoNode.jsRust
JSON

协议层

A@UI Protocol
commands.schema.jsonevents.schema.jsonmanifest.schema.json
WS / SSE / HTTP

适配层

A@UI Runtime
Stream ParserWidget ManagerAdapter
props / events

展示层

UI 组件
RegistryUI Components
传输无关

WebSocket、SSE、HTTP Polling 均可驱动协议,Runtime 从不关心字节如何到达。

后端任意语言

后端只需会发 JSON。Python、Go、Node.js、Rust 皆可,无需安装任何后端 SDK。

前端框架自选

Runtime 是轻薄适配层,可按目标前端栈使用官方适配入口,也可在需要时扩展新的适配器。

Agent Skill

让 AI Coding 更准确地接入 A@UI。

A@UI 提供可安装的 Agent Skill,把前端运行时接入、组件 manifest、命令协议和常见约束交给 AI 直接读取,减少手写提示词和错误实现。

接入前端运行时指导 Coding Agent 安装官方 npm 包,并使用前端运行时消费命令流。
遵守命令协议让 Agent 只生成 render、update、destroy,避免自造字段和临时 payload。
对齐组件能力提醒 Agent 读取 manifest,按已注册组件的名称、参数和生命周期完成集成。
查看 Skill 文档
terminal
npx skills add mqhe2007/a-at-ui --skill a-at-ui

安装后,AI Coding 可以在集成 A@UI 时自动获得协议、运行时和 manifest 约束。

独立开源 · 欢迎参与

这里欢迎每一位参与者。

这个项目源于构建 AI 产品时的真实痛点,业余时间写下,持续打磨。没有赞助商,没有公司支持,协议设计、运行时和文档全由我一个人维护。每一条 Issue 和 PR 都直接影响它的走向。

加入 GitHub Discussions,参与协议设计、功能规划和技术讨论