При использовании средства визуализации 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)
}
}
Отрисовка поверхностей с помощью Basic Catalog (Material 3)
При отрисовке поверхностей с помощью предоставленной реализации Basic Catalog (androidx.compose.material3:material3-a2ui) вы можете отрисовать полностью стилизованную поверхность Material 3, включая встроенную поддержку индикаторов загрузки, границ ошибок и анимированных переходов. Для этого используйте точку входа composable-функции 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. - Защита от разреженных массивов. При получении очень больших индексов списков модель данных переходит от плотного списка к адаптивной разреженной карте, предотвращая ошибки нехватки памяти.