Generative UI SDK for Flutter (genui)
A Flutter library to enable developers to easily add interactive
generative UI to their applications.
See the Getting started with GenUI video for an overview of the package.
Status: highly experimental
This is a highly experimental package, which means the API will change (sometimes drastically).
Feedback is very welcome.
Summary
Our goal for the GenUI SDK for Flutter is to help you replace static "walls of text" from your LLM with
dynamic, interactive, graphical UI.
It uses a JSON-based format to compose UIs from your existing widget catalog, turning
conversations or agent interactions into rich, intuitive experiences. State changes in the UI update
a client-side data model, which is fed back to the agent, creating a
powerful, high-bandwidth interaction loop. The GenUI SDK for Flutter aims to be easy to integrate
into your Flutter application to significantly improve the usability and satisfaction of your
chatbots and next-generation agent-based user experiences.
High-level goals
- Increase Interaction Bandwidth for Users: allow users to interact with data and controls directly,
making task completion faster and more intuitive. Move beyond a "wall of text".
- Simple and easy to use by developers: seamlessly integrate with your existing Flutter workflow,
design systems, and widget catalogs.
- Drive agent-human UX forward: innovate ways to dramatically improve how users interact with their
LLMs and Agents. Radically simplify the process of building UI-based agent interactions, by
eliminating custom middleware between the agent and the UI layer.
Features
- Multiple agent and LLM provider support
- A2UI support
- Standard UI catalog
- Custom widgets
- Data binding
- Chat UX
- Canvas UX
Use cases
- Incorporate graphical UI into chatbots: instead of describing a list of products in text,
the LLM can render an interactive carousel of product widgets. Instead of asking for a user to
type out answers to questions, the LLM can render sliders, checkboxes, and more.
- Create dynamically composed UIs: an agent can generate a complete form with sliders, date pickers,
and text fields on the fly based on a user's request to "book a flight."
Look & feel
The GIF above shows how GenUI enables dynamic, interactive UI generation,
instead of text descriptions or code from a traditional AI coding agent.
Core difference
This UI is not generated in the form of code; rather, it's generated at runtime
based on a widget catalog from the developers' project.
Implementation goals
- Integrate with your LLM: Work with your chosen LLM and backend to incorporate graphical
UI responses alongside traditional text.
- Leverage Your Widget Catalog: Render UI using your existing, beautifully crafted widgets
for brand and design consistency.
- Interactive State Feedback: Widget state changes are sent back to the LLM, enabling a
true interactive loop where the UI influences the agent's next steps.
- Framework Agnostic: Be integrated into your agent library or LLM framework of choice.
- JSON Based: Use a simple, open standard for UI definition—no proprietary formats.
- Cross-Platform Flutter: Work anywhere Flutter works (mobile, iOS, Android, Web, and more).
- Widget Composition: Support nested layouts and composition of widgets for complex UIs.
- Basic Layout: LLM-driven basic layout generation.
- Any Model: Integrate with any LLM that can generate structured JSON output.
Connecting to an AI agent
The genui framework is designed to be backend agnostic. You can use any AI SDK (such as firebase_ai or dartantic_ai) to generate content. The framework provides adapters (like A2uiTransportAdapter) to ingest the AI response and render it.
For custom agent servers that implement the A2UI protocol, you can use the genui_a2a package.
See the package table below for more details on each.
Packages
| Package | Description | Version |
|---|
| genui | The core framework to employ Generative UI. |  |
| genui_a2a | Provides A2uiAgentConnector for connecting to any server that implements the A2UI protocol. Use this for integrating with custom agent backends. |  |
| genai_primitives | A set of technology-agnostic primitive types and data structures for building Generative AI applications. |  |
| json_schema_builder | A fully featured Dart JSON Schema package with validation, used by the core framework to define widget data structures. |  |
Dependencies
This diagram shows how packages depend on each other and how examples use them.
graph TD
dev_tools/catalog_gallery --> genui
examples/simple_chat --> genui
dev_tools/composer --> genui
examples/verdure --> genui_a2a
genui_a2a --> genui
genui --> genai_primitives
genai_primitives --> json_schema_builder
A2UI Support
The Flutter Gen UI SDK uses the A2UI protocol to represent UI content internally. The genui_a2a package allows it to act as a renderer for UIs generated by an A2UI backend agent, similar to the other A2UI renderers which are maintained within the A2UI repository.
The Flutter Gen UI SDK currently supports A2UI v0.9.
Getting started
See the genui getting started guide.
Skills
This repo contains skill files for developers building with agentic coding tools. They can be copied directly into an agent's preferred location or installed using the skills package:
npx skills add https://github.com/flutter/genui/tree/main/packages/genui/skills
Constraints
This repo requires Flutter version >=3.35.7.
Some things we're thinking about
- Genkit Integration: Integration with Genkit.
- ADK Plugin: turnkey integration with ADK.
- Expanded LLM Framework Support: Official support for additional LLM frameworks.
- Streaming UI: Support for progressively rendering UI components as they stream from the LLM.
- Full-Screen Composition: Enable LLM-driven composition and navigation of entire app screens.
- A2A Agent Support: Support for A2A agent interactions.
- Dart Bytecode: Future support for Dart Bytecode for even greater dynamism and flexibility.
Contribute
See CONTRIBUTING.md
