AionUi：首个开源运行时生成式 UI 框架

极速上手：3 分钟重构你的聊天机器人

假设你正在做一个 AI 客服，以前它只能回复文字，现在我们用 AionUi 让它回复界面。

第一步：安装

npm install @aion-ui/react @aion-ui/core 

第二步：定义原子组件库

你需要告诉 AionUi 你的仓库里有哪些'积木'可用。

// registry.ts
import { Button, Card, DatePicker } from '@/components/ui';
export const componentRegistry = {
  button: Button,
  card: Card,
  date_picker: DatePicker,
  // ... 注册你的 ShadcnUI 或 AntD 组件
};

第三步：在页面中使用生成画布

import { AionCanvas } from '@aion-ui/react';
import { useChat } from 'ai/react';

export default function AgentPage() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();
  return (
    <div className="chat-container">
      {messages.map(m => (
        <div key={m.id}>
          {/* 文字消息 */}
          <p>{m.content}</p>
          {/* 如果 AI 觉得需要展示 UI，就会在这里生成 */}
          {m.toolInvocations && (
            <AionCanvas intent={m.toolInvocations[0]} registry={componentRegistry} theme="cyberpunk" />
          )}
        </div>
      ))}
    </div>
  );
}

效果：

当用户问：'下周三去北京的机票多少钱？'

后台 LLM 不会回复'请去携程查'，而是直接通过 AionCanvas 渲染出一个带有日期选择器和价格列表的卡片，用户直接点击'购买'即可。

现在的局限性

虽然 AionUi 很酷，但作为尝鲜者，你需要知道：

1. Token 消耗：生成 UI 结构比生成纯文本更消耗 Token（XML/JSON 结构冗余）。建议搭配 DeepSeek-V3 这种低成本模型使用。
2. 一致性问题：偶尔 AI 会'审美崩坏'，比如把红色按钮放在绿色背景上。需要在 Prompt 层面对设计规范做强约束。

总结

AionUi 的出现，标志着前端开发进入了 Frontend 3.0 时代。

• 1.0：HTML/CSS (手写)
• 2.0：React/Vue (组件化)
• 3.0：AionUi (意图驱动，运行时生成)

未来，我们可能不再需要写具体的页面，而是编写'UI 的生成规则'。