AionUi：运行时UI生成框架，开启前端开发3.0时代

摘要

摘要

In 2025, we were still marveling at the code generation capabilities of V0 and Bolt. By early 2026, the release of AionUi heralded the arrival of the "Runtime GenUI" era. No longer is it necessary to pre-write all components or hardcode every form. AionUi allows your application to render UI interfaces in real-time, based on user intent, that have never been explicitly coded. This article guides you through this groundbreaking open-source project.

2025 年我们还在惊叹于 V0 和 Bolt 的代码生成能力，而 2026 年初，AionUi 的发布宣告了**"运行时生成 (Runtime GenUI)"**时代的到来。不再需要预先写好所有 Component，不再需要 Hardcode 每一个表单。AionUi 允许你的应用根据用户的意图，实时渲染出从未被编码过的 UI 界面。本文带你上手这个颠覆性的开源项目。

🚀 前言：从“写死”到“生成”

🚀 前言：从“写死”到“生成”

The logic of traditional frontend development is straightforward: a product manager proposes a requirement, a designer creates mockups, a programmer codes the UI (React/Vue), the code is bundled and deployed, and finally, the user sees a static interface. If a user desires a feature like "analyze last quarter's financial report" and you haven't built that page, the user simply cannot use it.

传统前端开发的逻辑是：产品经理提需求 -> 设计师出图 -> 程序员把 UI 写成代码 (React/Vue) -> 打包发布 -> 用户看到静态界面。如果用户想要一个"分析上季度财报"的功能，而你没写这个页面，用户就没法用。

However, AionUi, which topped the GitHub Trending chart yesterday, breaks this cycle. Its core philosophy is: Don't code the UI, code the Intent. It shifts the developer's focus from implementing specific UI elements to defining the rules and capabilities for generating them dynamically.

但昨天登上 GitHub Trending 榜首的 AionUi 打破了这个死循环。它的核心理念是：Don't code the UI, code the Intent (不要编码界面，要编码意图)。它将开发者的重心从编写具体界面，转移到了定义生成界面的规则和能力上。

Project Repository: http://github.com/iOfficeAI/AionUi

项目地址：http://github.com/iOfficeAI/AionUi

🔍 什么是 AionUi？

🔍 什么是 AionUi？

AionUi is a dynamic UI rendering engine designed for the era of AI Agents. Unlike static component libraries like Ant Design or ShadcnUI that provide a collection of rigid components, AionUi provides a "Canvas". When you instruct it to "show me a Tesla stock trend analysis," AionUi will:

AionUi 是一个专为 AI Agent 时代设计的动态 UI 渲染引擎。它不像 Ant Design 或 ShadcnUI 那样提供一堆死板的组件，它提供的是一个**"画布 (Canvas)"**。当你告诉它"给我展示一个特斯拉股票的走势分析"时，AionUi 会：

Understand Intent: It calls an underlying LLM (supporting DeepSeek, GPT-4o, Claude) to comprehend the user's request.

理解意图：调用底层 LLM（支持 DeepSeek, GPT-4o, Claude）来理解用户请求。
Structure Streaming Output: The large language model outputs a JSON description of the UI structure (Aion SchemaAionUi定义的JSON描述结构，用于标准化表示UI组件的层次、属性和行为，由LLM生成并由渲染引擎解析为可视化界面。) in real-time.

结构化流式输出：大模型实时输出 UI 的 JSON 描述结构 (Aion SchemaAionUi定义的JSON描述结构，用于标准化表示UI组件的层次、属性和行为，由LLM生成并由渲染引擎解析为可视化界面。)。
Render Instantly: The frontend engine instantly maps this JSON to high-quality React/Vue components and mounts them onto the page.

即时渲染：前端引擎将 JSON 瞬间映射为高颜值的 React/Vue 组件并挂载到页面上。

In simple terms, it's like ChatGPT within your app, but instead of replying with text, it responds with interactive buttons, charts, and dashboards.

简单说：它就是 App 里的 ChatGPT，但它回复的不是文字，而是可以直接交互的按钮、图表和仪表盘。

💡 核心特性解析

💡 核心特性解析

1. 🌊 流式组件水合 (Streaming Component Hydration)

1. 🌊 流式组件水合 (Streaming Component Hydration)

Traditional Server-Side Rendering (SSR) streams HTML. What AionUi achieves is streaming the component tree. While a user is still typing "I want to book a flight to...", AionUi has already begun pre-loading the component skeleton for a "flight search box." This extreme responsiveness makes the perceived latency of AI-generated interfaces nearly zero.

传统的 Server-Side Rendering (SSR) 是流式传输 HTML。AionUi 做到的是流式传输组件树。用户还在输入"我要订一张去..."的时候，AionUi 就已经开始预加载"机票搜索框"的组件骨架了。这种极致的响应速度，让 AI 生成界面的体感延迟几乎为零。

2. 🧩 自适应上下文 (Adaptive Context)

2. 🧩 自适应上下文 (Adaptive Context)

The UI generated by AionUi is "alive" and adaptive. The same <AionWidget /> component can manifest differently based on context:

这种 UI 是"活"的，具有自适应性。同一个 <AionWidget /> 组件可以根据上下文呈现不同的形态：

On a mobile device, it might generate a concise BottomSheet.

在手机端，它可能生成一个简洁的 BottomSheet。
On a desktop, it could automatically generate a complex multi-column Dashboard.

在桌面端，它会自动生成一个复杂的多列 Dashboard。
Dark mode, user habits (like left-handed mode) are all automatically adjusted by the AI at runtime, freeing developers from writing cumbersome media queries.

深色模式、用户习惯（比如左撇子模式），全部由 AI 在运行时自动调整，无需开发者写繁琐的 Media Query。

3. 🛡️ 安全沙箱 (UI Sandbox)

3. 🛡️ 安全沙箱 (UI Sandbox)

This addresses a primary concern for enterprise-level development. AionUi does not allow the AI to arbitrarily generate <script> tags or any arbitrary HTML. It operates on a strict Design System Mapping mechanism. The AI can only "assemble" atomic components (Button, Card, Chart) that already exist in your registered design system. This ensures that the generated interfaces are both secure and adhere to brand guidelines.

这是企业级开发最关心的。AionUi 并不允许 AI 随意生成 <script> 标签或任何任意 HTML。它基于一套严格的设计系统映射 (Design System Mapping) 机制。AI 只能"拼装"你已注册的设计系统中已有的原子组件（Button, Card, Chart），确保生成的界面既安全又符合品牌规范。

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

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

Imagine you are building an AI customer service chatbot. Previously, it could only reply with text. Now, let's use AionUi to enable it to reply with interactive interfaces.

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

第一步：安装

第一步：安装

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

第二步：定义原子组件库

第二步：定义原子组件库

You need to inform AionUi which "building blocks" are available in your repository.

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

// registry.ts
import { Button, Card, DatePicker } from '@/components/ui';

export const componentRegistry = {
  button: Button,
  card: Card,
  date_picker: DatePicker,
  // ... Register your ShadcnUI or AntD components
  // ... 注册你的 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}>
            {/* Text message */}
            {/* 文字消息 */}
            <p>{m.content}</p>
            
            {/* If the AI determines a UI should be displayed, it generates it here */}
            {/* 如果 AI 觉得需要展示 UI，就会在这里生成 */}
            {m.toolInvocations && (
                <AionCanvas 
                    intent={m.toolInvocations[0]} 
                    registry={componentRegistry} 
                    theme="cyberpunk" // You can even specify a style theme
                    theme="cyberpunk" // 甚至可以指定风格主题
                />
            )}
        </div>
      ))}
    </div>
  );
}

效果： When a user asks, "How much is a flight to Beijing next Wednesday?", the backend LLM won't reply with "Please check Ctrip." Instead, it will directly render a card with a date picker and a price list via AionCanvas, allowing the user to click "Purchase" immediately.

效果：当用户问："下周三去北京的机票多少钱？"后台 LLM 不会回复"请去携程查"，而是直接通过 AionCanvas 渲染出一个带有日期选择器和价格列表的卡片，用户直接点击"购买"即可。

⚠️ 当前的局限性

⚠️ 当前的局限性

While AionUi is impressive, as an early adopter, you should be aware of its current limitations:

虽然 AionUi 很酷，但作为尝鲜者，你需要知道其当前的局限性：

Token Consumption: Generating UI structures consumes more tokens than generating plain text due to the redundancy of XML/JSON structures. It is recommended to use it with cost-effective models like DeepSeek-V3.

Token 消耗：生成 UI 结构比生成纯文本更消耗 Token（XML/JSON 结构冗余）。建议搭配 DeepSeek-V3 这种低成本模型使用。
Consistency Issues: Occasionally, the AI might have a "design breakdown," such as placing a red button on a green background. Strong constraints regarding design specifications need to be enforced at the prompt layer.

一致性问题：偶尔 AI 会"审美崩坏"，比如把红色按钮放在绿色背景上。需要在 Prompt 层面对设计规范做强约束。

🎯 总结

🎯 总结

The emergence of AionUi marks the entry of frontend development into the Frontend 3.0 era.

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

1.0: HTML/CSS (Hand-coded)

1.0：HTML/CSS (手写)
2.0: React/Vue (Component-based)

2.0：React/Vue (组件化)
3.0: AionUi (Intent-driven, Runtime-generated)

3.0：AionUi (意图驱动，运行时生成)

In the future, we may no longer need to write specific pages but instead focus on coding "the rules for UI generation." For developers, mastering AionUi now is akin to securing a ticket to the application layer of the Agent era.

未来，我们可能不再需要写具体的页面，而是编写**"UI 的生成规则"**。对于开发者来说，现在掌握 AionUi，就是掌握了 Agent 应用层的入场券。