Frontend · Flutter · Android

Async A2UI Turns AI-Generated Flutter UIs into Replayable, Cacheable Assets

By 恋猫de小郭 · Aug 20, 2026

Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Pre-computing AI-generated UIs eliminates the multi-second wait that makes Generative UI feel broken in production. The replayable-message design also opens a path toward offline-capable, incrementally-updated AI interfaces that don't require a live model connection.

Summary

Generative UI requests are slow, often taking tens of seconds while a model reads context and produces A2UI JSON. Async A2UI moves that generation upstream: a Cloud Function triggers on a data change, asks the model for the UI, and writes the result to Firestore before the user ever opens the app. The Flutter client then reads the cached A2UI directly, feeding it into the same transport pipeline that handles live model output.

This turns A2UI from a transient streaming artifact into a persistent, replayable UI format. The runtime doesn't care whether the message came from a live LLM, a database, or a test fixture. Saving sequences of `createSurface`, `updateComponents`, and `updateDataModel` messages effectively creates a UI event log that can be replayed to restore any interface.

The architecture also enables incremental updates: a cached dashboard appears instantly, while a background agent sends only `updateDataModel` or `updateComponents` diffs for today's new data. But this introduces hard state-management problems. UI state and agent state become coupled, requiring both sides to agree on which surfaces exist, what components they contain, and which session created them. Cache invalidation gets tricky when out-of-order LLM responses could overwrite newer UI with older versions, and client-side Widget Catalog changes can break previously valid A2UI schemas.

Takeaways

— Async A2UI triggers UI generation in a Cloud Function when business data changes, writing the result to storage before the user opens the app.

— Flutter reads the cached A2UI string and feeds it through the same transport adapter used for live LLM streaming, with no special renderer needed.

— A2UI messages like createSurface, updateComponents, and updateDataModel form a replayable event log that can restore any interface from storage.

— An incremental architecture is possible: show a cached Surface instantly, then send only updateDataModel or updateComponents diffs for new data.

— Cached A2UI is also fed to the Agent as context, so the model knows which UI elements exist when the user makes a follow-up request.

— UI state and agent state become tightly coupled; both the Flutter runtime and the LLM agent must agree on surfaces, components, and session ownership.

— Out-of-order LLM responses can cause newer cached UI to be overwritten by older generations if completion timing isn't controlled.

— Client-side Widget Catalog changes can break previously valid A2UI schemas, requiring versioned metadata beyond raw JSON.

Conclusions

Async A2UI changes the category of the format itself: it stops being a transient protocol message and becomes a storable, versionable UI artifact, closer to a serialized widget tree than a chat completion.

The replayable-message design means A2UI is effectively a UI event sourcing system. Every state change is a logged command, which makes debugging, testing, and offline playback natural byproducts rather than separate features.

The coupling problem between agent state and UI state is the real production blocker. If the agent doesn't know which surfaces exist, it can't safely mutate them, but keeping them in sync across sessions and devices is an unsolved distributed-state problem.

Pre-generation works best for predictable, data-driven surfaces like dashboards and summaries. The real-time agent path remains necessary for anything shaped by a user's immediate natural-language intent, so the architecture forces a deliberate split between static and conversational UI.

Concepts & terms

A2UI

A protocol where an LLM outputs JSON messages (createSurface, updateComponents, updateDataModel, deleteSurface) that a Flutter runtime maps to real widgets, enabling AI-generated user interfaces.

Async A2UI

An architectural variant where A2UI generation happens in a background Cloud Function triggered by data changes, with the resulting JSON cached in storage and rendered instantly when the app opens, rather than generated live during a user session.

Materialized View (analogy)

In databases, a pre-computed query result stored for fast reads. Async A2UI applies the same idea to UI: business data changes trigger a recomputation of the UI projection, which is stored and served directly to the client.

A2uiTransportAdapter

The Flutter component that receives streamed text chunks from an LLM and passes them to a parser. Async A2UI reuses this same adapter by feeding it cached A2UI strings from storage, making the source transparent to the runtime.

Source: juejin.cn ↗ Google Translate ↗ Backup ↗