Fbhchile

Generative UI, often shortened to GenUI, is an emerging pattern where an agent not only generates content but also decides how that content should be displayed and made interactive. For Flutter developers, implementing GenUI relies on A2UI—an open protocol that defines how agents and client renderers collaborate on interface composition and state. The Flutter team’s genui package leverages A2UI to connect with an agent, supply a catalog of available widgets, and render those widgets to the user. Recently, both the genui package and the A2UI protocol received significant updates.

What Are GenUI and A2UI?

At its core, GenUI takes traditional content generation a step further. Instead of merely producing text or images, the agent decides on the layout, widgets, and interactivity—essentially designing the UI on the fly. A2UI standardizes this communication, ensuring agents and Flutter renderers speak the same language. The genui package acts as the bridge, allowing developers to plug in any A2UI-compliant agent without reinventing the wheel.

Key Changes in the Latest Update

The latest release of genui, aligned with A2UI protocol v0.9, introduces several architectural shifts. The most notable changes revolve around how the framework communicates with large language models (LLMs) and how its internal layers are organized.

From Structured Output First to Prompt First

Previous versions of genui followed a “Structured Output First” philosophy. In that model, A2UI messages were streamed through dedicated structured output APIs, which tightly coupled the framework to specific LLM providers. The new version adopts a “Prompt First” approach: agents now embed blocks of JSON directly within their text responses. This change makes the system more flexible and provider-agnostic—any LLM capable of generating valid JSON in a text response can be used.

Architecture Decoupling

One of the most impactful alterations is the removal of the ContentGenerator class. In earlier iterations, ContentGenerator encapsulated prompt construction, LLM network calls, and response parsing, hiding those details from the developer. The latest update breaks the framework into three distinct layers:

• Engine (SurfaceController): Manages UI state and rendering.
• Transport (A2uiTransportAdapter): Streams messages between the agent and the renderer.
• Facade (Conversation): Provides a high-level API for managing chat states.

This decoupling hands you direct control over chat history, retry logic, and error handling. You can now set up your LLM connection however you like—choose any model, tweak generation parameters, add custom functions—without being forced through the framework’s own API.

Removal of Provider-Specific Wrapper Packages

With ContentGenerator gone, the provider-specific wrapper packages are no longer needed. If you inspect the latest version of genui, you won’t find packages like genui_dartantic, genui_google_generative_ai, or genui_firebase_ai. Instead, your app is responsible for establishing a direct connection to an agent and exchanging messages via a TransportAdapter. This simplifies the dependency tree and gives you complete freedom in choosing your LLM provider.

How to Migrate Your App

If you’re upgrading from genui v0.7.0 to v0.9.0, follow these steps:

1. Clean up dependencies: Remove any provider-specific packages (e.g., genui_firebase_ai) and replace them with the standard LLM client libraries you intend to use.
2. Remove ContentGenerator usage: Instead of passing a ContentGenerator to your SurfaceController, set up a direct connection to your agent and implement a TransportAdapter to mediate communication.
3. Implement the new chat loop: Use the Conversation facade to manage chat states, and wire it up with your SurfaceController and TransportAdapter.
4. Test with a sample agent: Run a simple “Hello World” scenario to confirm that messages flow correctly and that widgets render as expected.

For a detailed example, refer to the updated sample code in the official documentation.

What This Means for Developers

The architectural overhaul gives you unprecedented flexibility and control. You can now customize LLM interactions without fighting the framework. The “Prompt First” approach also unlocks compatibility with a wider range of models, including those that don’t offer structured output APIs. Behind the scenes, the decoupled layers make it easier to extend genui with custom transport mechanisms or rendering strategies.

Conclusion

The GenUI and A2UI updates represent a significant step forward for Flutter developers exploring generative user interfaces. By moving to a prompt-first, decoupled architecture, the Flutter team has made genui more adaptable and developer-friendly. Whether you’re building a simple chatbot or a complex adaptive UI, these changes give you the tools to integrate seamless agent-driven interfaces into your Flutter apps.

Ready to upgrade? Start by updating your dependencies and exploring the new TransportAdapter-based workflow. The future of UI generation is here—and Flutter is leading the way.