[AgenticUI] Xiuper - component catalog

[phodal]

Feature Proposal: Xiuper GenUI Component Catalog

Description

本提案旨在为 Xiuper GenUI 建立一套标准化的生成式组件目录 (Generative Component Catalog)。

该目录将作为 Xiuper DSL 的标准库，定义一系列 AI 友好的 UI 原语（Primitives）。AI Agent 将通过生成这些特定的 DSL 代码块，在客户端实时构建动态界面（GenUI），从而替代传统的“文本流”交互模式。这套组件库将涵盖基础交互、结构化表单、数据可视化以及反馈控制四个层级。

Motivation

当前的 AI 交互主要基于“聊天流（Chat Stream）”，存在以下痛点：

1. 低带宽交互：文本不适合处理复杂任务（如配置参数、分析数据），导致用户面临“文本墙” 。
2. 安全性与一致性：如果允许 AI 随意生成 HTML/JS，会带来注入风险且难以保持品牌一致性。我们需要一种“目录驱动（Catalog-Driven）”的方式，确保 AI 只能使用预编译的原生组件进行“搭积木” 。
3. DSL 赋能：现有的 Xiuper DSL 具备强大的逻辑表达能力（如 request 块），结合标准化的 UI Catalog，可以实现“胖服务端（AI）、瘦客户端（Renderer）”的架构 。

Proposed Solution

我们建议在 Xiuper DSL 中实现参考 Google GenUI 架构的四个层级组件 。以下是对应的 DSL 语法设计建议：

1. 基础架构：流式容器与状态绑定

引入 GenCanvas 作为动态 UI 的容器，支持流式渲染。

# 客户端 DSL 定义
GenCanvas("TripPlanner"):
    layout: SplitView  # 左侧聊天，右侧画布 
    state:
        destination: ""
        budget: 1000
        dates: null

2. Tier 2: 结构化输入组件 (Structured Inputs)

利用 Xiuper 的 state 绑定语法实现双向同步。

# AI 生成的表单片段
Form("TravelPreferences"):
    # 智能文本输入，绑定 state 
    SmartTextField("Destination"):
        label: "Where to go?"
        bind: state.destination
        validation: r"^[a-zA-Z\s]+$"

    # 范围选择器
    Slider("Budget"):
        label: "Max Budget ($)"
        bind: state.budget
        min: 500
        max: 10000
        step: 100

    # 日期选择，支持 AI 预填 
    DateRangePicker("Dates"):
        bind: state.dates
        on_change:
            # 乐观 UI 更新：本地先更新，后台再校验 
            state.loading = True
            Fetch(url="/api/check_availability", body=state)

3. Tier 3: 数据工件 (Artifacts)

用于展示复杂结果，将数据结构与渲染分离。

# AI 生成的数据展示
Card("FlightOptions"):
    # 数据可视化组件 
    DataChart("PriceHistory"):
        type: "line"
        data: state.flight_prices_history # AI 填充数据结构
        x_axis: "date"
        y_axis: "price"
        color: "blue"

    # 交互式列表
    DataTable("Flights"):
        columns: ["Airline", "Time", "Price"]
        data: state.available_flights
        on_row_click:
            Navigate(to="/details/${row.id}")

4: 控制与反馈 (Control Logic)

将业务逻辑封装在组件 Action 中。

# 提交与反馈
Button("Generate Itinerary"):
    # 状态驱动的禁用逻辑 
    disabled_if: state.destination == "" or state.dates == null
    on_click:
        request plan_trip:
            url: "/api/agent/plan"
            method: "POST"
            body: state
            on_success: ShowToast("Itinerary Created!")

Alternatives Considered

1. 直接生成 HTML/React 代码 (Vercel AI SDK 模式)* 原因未选：在移动端（Flutter/Swift）难以原生渲染，且难以通过 DSL 进行细粒度的状态双向绑定（Binding），安全性也较差 。

2. Adaptive Cards (JSON Schema) * 原因未选：JSON 写法对于 LLM 来说 Token 消耗较大，且缺乏逻辑表达能力（如 on_click 中的复杂编排）。Xiuper DSL 的 Pythonic 风格更紧凑，且具备逻辑表达能力 。

##Additional Context
*

• 参考架构：本设计深度参考了 Google 的 GenUI SDK for Flutter 及其 A2UI 协议。
• 渲染机制：建议客户端实现一个 DSL 解析器，支持增量解析（Incremental Parsing），以便在 AI 生成 Form 的第一行时就开始渲染 UI 骨架。

[phodal]

Runtime - Generate action => User click => Action