生成式界面¶

原生 JSX、A2UI、生成产物与网页预览。

JSX 文本与布局¶

把生成的 JSX 标题、段落与布局渲染为原生组件。

JSX 文本与布局


API	`JsxPreview(jsx), jsxCodeBlocks()`
AI Elements	`JSXPreview`
依赖模块	`ai-elements-genui`
API 文档	JsxPreview

需要 ai-elements-genui，minSdk 26。受支持的 JSX 会编译为原生 A2UI 组件，不执行任意 JavaScript。

import androidx.compose.runtime.Composable
import dev.ai.elements.genui.jsx.JsxPreview
import kotlinx.serialization.json.buildJsonObject
import kotlinx.serialization.json.put

@Composable
fun JsxTypographyExample() {
    dev.ai.elements.genui.jsx.JsxPreview("<div><h2>Summary</h2><p>Ready for review</p></div>", bindings = buildJsonObject { put("title", "Report"); put("description", "Ready"); put("choice", "a") })
}

JSX 表单与操作¶

用数据绑定和 action 连接表单输入与提交。

JSX 表单与操作


API	`JsxPreview(jsx, bindings, onAction)`
AI Elements	`JSXPreview`
依赖模块	`ai-elements-genui`
API 文档	JsxPreview

onAction 接收操作名称和当前数据模型。应用负责校验和处理，渲染器不会自动执行服务端写入。

import androidx.compose.runtime.Composable
import dev.ai.elements.genui.a2ui.A2uiAction
import dev.ai.elements.genui.jsx.JsxPreview
import kotlinx.serialization.json.buildJsonObject
import kotlinx.serialization.json.put

@Composable
fun JsxFormExample(onAction: (dev.ai.elements.genui.a2ui.A2uiAction) -> Unit) {
    dev.ai.elements.genui.jsx.JsxPreview("<div><input value={name}/><button onClick={save}>Save</button></div>", bindings = buildJsonObject { put("name", "Ada") }, onAction = onAction)
}

JSX 选择控件¶

展示选项、滑块、日期和标签页等控件。

JSX 选择控件


API	`JsxPreview(jsx, bindings)`
AI Elements	`JSXPreview`
依赖模块	`ai-elements-genui`
API 文档	JsxPreview

需要 ai-elements-genui，minSdk 26。受支持的 JSX 会编译为原生 A2UI 组件，不执行任意 JavaScript。

import androidx.compose.runtime.Composable
import dev.ai.elements.genui.jsx.JsxPreview
import kotlinx.serialization.json.buildJsonObject
import kotlinx.serialization.json.put

@Composable
fun JsxControlsExample() {
    dev.ai.elements.genui.jsx.JsxPreview("<select value={choice}><option value=\"a\">Option A</option><option value=\"b\">Option B</option></select>", bindings = buildJsonObject { put("title", "Report"); put("description", "Ready"); put("choice", "a") })
}

JSX 数据卡片¶

将绑定数据展示为一组卡片。

JSX 数据卡片


API	`JsxPreview(jsx, bindings)`
AI Elements	`JSXPreview`
依赖模块	`ai-elements-genui`
API 文档	JsxPreview

需要 ai-elements-genui，minSdk 26。受支持的 JSX 会编译为原生 A2UI 组件，不执行任意 JavaScript。

import androidx.compose.runtime.Composable
import dev.ai.elements.genui.jsx.JsxPreview
import kotlinx.serialization.json.buildJsonObject
import kotlinx.serialization.json.put

@Composable
fun JsxCardsExample() {
    dev.ai.elements.genui.jsx.JsxPreview("<div><h3>{title}</h3><p>{description}</p></div>", bindings = buildJsonObject { put("title", "Report"); put("description", "Ready"); put("choice", "a") })
}

流式 JSX¶

边生成边渲染 JSX，并保留用户已填写的内容。

流式 JSX


API	`JsxPreview(partialJsx)`
AI Elements	`JSXPreview`
依赖模块	`ai-elements-genui`
API 文档	JsxPreview

传入累计 JSX，并保持 composable 在布局中的位置稳定。不完整标签会等待后续内容；初始 bindings 保持稳定以保留编辑状态。

import androidx.compose.runtime.Composable
import dev.ai.elements.genui.jsx.JsxPreview

@Composable
fun JsxStreamingExample(partialJsx: String) {
    dev.ai.elements.genui.jsx.JsxPreview(partialJsx)
}

A2UI 界面¶

原生渲染符合 A2UI v1.0 的界面。

A2UI 界面


API	`A2uiSurfaceView(surface, onAction), a2uiRenderer()`
依赖模块	`ai-elements-genui`
API 文档	A2uiSurfaceView

先让 A2uiState 处理标准事件，再取得 surface。接入聊天时使用 a2uiRenderer，并按传输协议的绑定方式发送 action。

import androidx.compose.runtime.Composable
import dev.ai.elements.genui.a2ui.A2uiAction
import dev.ai.elements.genui.a2ui.A2uiSurface
import dev.ai.elements.genui.a2ui.A2uiSurfaceView

@Composable
fun A2UiExample(surface: dev.ai.elements.genui.a2ui.A2uiSurface, onAction: (dev.ai.elements.genui.a2ui.A2uiAction) -> Unit) {
    dev.ai.elements.genui.a2ui.A2uiSurfaceView(surface, onAction = onAction)
}

生成产物¶

展示文件或生成内容及相关操作。

生成产物


API	`Artifact(title, description, actions) { … }`
AI Elements	`Artifact`
依赖模块	`ai-elements-ui`
API 文档	Artifact

操作按钮通过 actions 插槽提供。保存、分享以及所需权限由应用负责。

import androidx.compose.runtime.Composable
import dev.ai.elements.ui.code.Artifact
import dev.ai.elements.ui.markdown.CodeBlock

@Composable
fun ArtifactExample() {
    Artifact("answer.kt", description = "Generated code") { CodeBlock("val answer = 42", "kotlin") }
}

网页预览¶

在受限 WebView 中预览生成的 HTML 或 URL。

网页预览


API	`WebPreview(url, html)`
AI Elements	`WebPreview`
依赖模块	`ai-elements-ui`
API 文档	WebPreview

预览内容不能当作可信应用界面；需要标准服务端交互桥接时使用 MCP Apps。

import androidx.compose.runtime.Composable
import dev.ai.elements.ui.code.WebPreview

@Composable
fun WebPreviewExample() {
    WebPreview(url = "about:blank", html = "<h1>Preview</h1><p>Generated content</p>")
}

Read this page in English