При использовании средства рендеринга Jetpack Compose agent-to-UI (A2UI) агент ИИ отправляет сообщения, описывающие структуры пользовательского интерфейса, свойства компонентов и обновления данных. Для отображения этих интерфейсов непосредственно в вашем приложении необходимо разместить и отрендерить поверхность A2UI в иерархии Jetpack Compose вашего приложения.
Рендерер Compose A2UI координирует анализ сообщений, реактивное управление состоянием снимков и анимированные переходы состояний поверхности. Хотя основной рендерер не зависит от какой-либо конкретной системы дизайна, он предлагает готовую интеграцию с Material Design 3 через предоставленный базовый каталог.
Инициализируйте слой данных, поддерживаемый Compose.
Рендерер A2UI поддерживает состояние с учетом снимков в слое данных вашего приложения, что позволяет пользовательскому интерфейсу приложения реагировать на поэтапные обновления от агента. Чтобы добавить эту поддержку, инициализируйте парсер и обработчик, используя фабричные функции A2uiMessageParser и A2uiMessageProcessor в вашем ViewModel , как показано в следующем фрагменте кода:
class AgenticUiViewModel : ViewModel() {
// Create a parser that leverages the built-in JSON parser.
private val parser = A2uiMessageParser()
// Create an A2UI message processor with your catalog and optional
// action interceptor (implementing A2uiActionInterceptor).
private val processor = A2uiMessageProcessor(
// You can also use the provided Material catalog instead of
// a custom one.
catalogs = listOf(CustomDesignSystemCatalog)
)
// Expose active surfaces to the UI as a StateFlow.
val a2uiSurfaces: StateFlow<List<A2uiSurfaceModel>> =
processor.activeSurfaces
init {
// Collect messages on a background thread tied to the ViewModel lifecycle.
viewModelScope.launch(Dispatchers.Default) {
processor.collectMessages()
}
// Add support for two-way communication with the agent.
viewModelScope.launch(start = CoroutineStart.UNDISPATCHED) {
processor.outboundEvents.collect(::handleOutboundA2uiEvent)
}
}
// Called by your app's networking layer or business logic whenever
// a new A2UI protocol message arrives from the AI agent.
fun onNetworkMessage(json: String) {
processor.processInput(parser, json)
}
}
Визуализация поверхностей с использованием базового каталога (Материал 3)
При отрисовке поверхностей с использованием предоставленной реализации базового каталога ( androidx.compose.material3:material3-a2ui ) вы можете отобразить полностью стилизованную поверхность Material 3, включая встроенную поддержку индикаторов загрузки, границ ошибок и анимированных переходов. Для этого используйте точку входа A2uiSurface :
@Composable
fun AgenticUiScreen(viewModel: AgenticUiViewModel) {
// Observe active surfaces managed by the data layer.
val surfaces by viewModel.a2uiSurfaces.collectAsStateWithLifecycle()
Column(Modifier.fillMaxSize()) {
surfaces.forEach { surface ->
key(surface.id) {
A2uiSurface(
surfaceModel = surface,
// Add your surface's custom modifiers here.
)
}
}
}
}
Обработка состояний поверхности и анимированных переходов.
A2uiSurface координирует разрешение состояния корневого компонента и применяет переходы AnimatedContent между состояниями загрузки, ошибки и успешного выполнения:
@Composable
fun CustomStyledSurface(surface: A2uiSurfaceModel) {
A2uiSurface(
surfaceModel = surface,
modifier = Modifier.fillMaxSize(),
loadingContent = {
Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
CircularProgressIndicator()
}
},
errorContent = { exception ->
Text(
text = "Failed to load: ${exception.message}",
color = MaterialTheme.colorScheme.error,
// Add your custom error styling, such as modifiers, here.
)
},
transitionSpec = {
(fadeIn(animationSpec = tween(600)) togetherWith
fadeOut(animationSpec = tween(600)))
.using(SizeTransform(clip = false))
},
)
}
Низкоуровневая отрисовка поверхности с использованием пользовательских маршрутизаторов
Вы можете напрямую отслеживать состояние корневого компонента поверхности с помощью observeA2uiComponentState и делегировать рендеринг компоненту A2uiComponent :
@Composable
fun RawSurfaceCoordinator(surface: A2uiSurfaceModel) {
// Extract the catalog to provide its readiness evaluator to the
// composition. This lets components wait for their dynamic data bindings
// before they're rendered.
val coreSurface = surface as? A2uiCoreSurfaceModel
?: throw IllegalArgumentException(
"Surface must implement A2uiCoreSurfaceModel")
val composeCatalog = coreSurface.catalog as? A2uiCatalog
?: throw IllegalArgumentException("Catalog must implement A2uiCatalog")
val readinessEvaluator = remember(composeCatalog) {
composeCatalog.asReadinessEvaluator() }
CompositionLocalProvider(
LocalA2uiReadinessEvaluator provides readinessEvaluator
) {
val rootState = observeA2uiComponentState(surface = surface)
when (rootState) {
is A2uiComponentState.Loading -> {
LoadingSpinner()
}
is A2uiComponentState.Error -> {
ErrorBanner(rootState.exception)
}
is A2uiComponentState.Success -> {
// Delegate component routing to the Compose A2UI router.
A2uiComponent(
component = rootState.component,
// Add your custom modifiers here.
)
}
}
}
}
Детали реализации
Средство отрисовки интерфейса от агента обрабатывает разрешение состояния поверхности и границы ошибок защиты.
Границы ошибок в защите и обработка галлюцинаций агентов
Поскольку управление поверхностями A2UI осуществляется генеративными агентами LLM, входящие данные могут быть некорректными или ссылаться на неизвестные типы компонентов.
Для минимизации вероятности сбоев программа рендеринга устанавливает следующие защитные границы:
- Обработка ошибок для самокоррекции агентом : ошибки передаются в виде исходящих сообщений от клиента, что позволяет агенту самостоятельно исправлять ошибки в последующих взаимодействиях. Также существует API, позволяющий реализациям компонентов передавать ошибки агенту в случаях, когда API обнаруживает специфические для компонента ошибки во время рендеринга.
- Неизвестные компоненты : При обнаружении нераспознанного типа компонента он перехватывается до достижения дерева пользовательского интерфейса, помечается как ошибка и передается обратно агенту для самокоррекции.
- Ошибки проверки схемы : Полезные данные проверяются на соответствие схемам компонентов (
A2uiSchema). Некорректно сформированные свойства никогда не должны попадать в макеты пользовательского интерфейса Compose. - Защита от ошибок, связанных с разреженными массивами : при получении очень больших списковых индексов модель данных переходит от плотного списка к адаптивной разреженной карте, предотвращая ошибки нехватки памяти.