AionUi 开源运行时 UI 框架：让 AI 动态生成界面实战
背景与理念
传统前端开发的流程通常是：产品经理提需求 -> 设计师出图 -> 程序员写代码 (React/Vue) -> 打包发布。如果用户想要一个未预见的功能，比如'分析上季度财报'，而页面没写好，用户就无法使用。
最近 GitHub 上出现了一个名为 AionUi 的项目，它打破了这个死循环。核心理念是：Don't code the UI, code the Intent (不要编码界面，要编码意图)。
项目地址：https://github.com/iOfficeAI/AionUi
什么是 AionUi？
AionUi 是一个专为 AI Agent 时代设计的动态 UI 渲染引擎。它不像 Ant Design 或 ShadcnUI 那样提供一堆静态组件，而是提供一个画布 (Canvas)。
当你告诉它'给我展示一个特斯拉股票的走势分析'时，AionUi 会执行以下流程：
- 理解意图：调用底层 LLM（支持 DeepSeek, GPT-4o, Claude）。
- 结构化流式输出：大模型实时输出 UI 的 JSON 描述结构 (Aion Schema)。
- 即时渲染：前端引擎将 JSON 瞬间映射为高颜值的 React/Vue 组件并挂载到页面上。
简单说：它就是 App 里的 ChatGPT，但它回复的不是文字，而是可以直接交互的按钮、图表和仪表盘。
核心特性解析
流式组件水合 (Streaming Component Hydration)
传统的 Server-Side Rendering (SSR) 是流式传输 HTML。AionUi 做到的是流式传输组件树。
当用户还在输入'我要订一张去...'的时候，AionUi 就已经开始预加载'机票搜索框'的组件骨架了。这种极致的响应速度，让 AI 生成界面的体感延迟几乎为零。
自适应上下文 (Adaptive Context)
同一个 <AionWidget /> 组件在不同环境下表现不同：
- 手机端：可能生成一个简洁的 BottomSheet。
- 桌面端：自动生成一个复杂的多列 Dashboard。
- 深色模式/用户习惯：全部由 AI 在运行时自动调整，无需开发者写繁琐的 Media Query。
安全沙箱 (UI Sandbox)
这是企业级开发最关心的点。AionUi 并不允许 AI 随意生成 <script> 标签。它基于一套严格的 Design System Mapping 机制。AI 只能'拼装'你设计系统中已有的原子组件（Button, Card, Chart），确保生成的界面既安全又符合品牌规范。
极速上手：重构你的聊天机器人
假设你正在做一个 AI 客服，以前它只能回复文字，现在我们用 AionUi 让它回复界面。
安装依赖
首先安装核心包：
npm install @aion-ui/react @aion-ui/core
定义原子组件库
你需要告诉 AionUi 你的仓库里有哪些'积木'可用。创建一个 registry 文件来注册组件。
// registry.ts
import { Button, , } ;
componentRegistry = {
: ,
: ,
: ,
};
