# Getting started with GenUI Source: https://www.youtube.com/watch?v=nWr6eZKM6no Recap page: https://rapidrecap.app/video/nWr6eZKM6no Generated: 2025-11-12T21:06:22.049+00:00 --- ## Quick Overview The video demonstrates how to integrate the Flutter GenUI package, which leverages generative AI agents to dynamically create user interfaces based on user prompts, by setting up the necessary dependencies in pubspec.yaml, initializing the GenUI conversation with a Firebase AI generator, defining a custom data schema for a workout card widget, and implementing the UI logic using the `GenUISurface` widget to render the AI-generated content. **Key Points:** - The demonstration involves setting up the `flutter_genui` package by adding `flutter_genui` and `flutter_genui_firebase_ai` to `pubspec.yaml` (05:17). - The core logic is initialized in `initState` by creating a `GenUIConversation` object, a `GenUIManager`, and a `FirebaseAiContentGenerator` (06:11, 06:38). - A custom data schema is defined using `S.object` to structure the expected AI response for a 'WorkoutCard', including a 'title' (String) and 'exercises' (List of Strings) (10:36, 11:49). - The system instruction explicitly tells the agent to act as an expert in creating bodyweight-only workout plans with 3 to 5 exercises and to generate new UI using the custom catalog item (06:54). - The `ListView.builder` in the UI uses `GenUISurface` with the correct `host` (the conversation) and `surfaceId` to dynamically render the AI-generated UI components (08:32). - A successful test prompt, "Leg day workout please," results in the AI generating a structured 'WorkoutCard' UI displaying the exercises (09:33). ![Screenshot at 00:05: The title screen for 'Flutter Flight Plans' introduces the theme of charting a course for the future of app development using generative UI concepts.](https://ss.rapidrecap.app/screens/nWr6eZKM6no/00-00-05.png) **Context:** This video, part of the 'Flutter Flight Plans' series, serves as a tutorial introducing the `flutter_genui` package, a tool designed to facilitate the creation of dynamically generated user interfaces (GenUI) in Flutter applications using large language models (LLMs) via an AI agent. The presenter, Andrew Brogdon, walks through the initial setup required to integrate this package with Firebase AI logic to handle conversational UI generation, specifically focusing on creating a custom widget catalog item. ## Detailed Analysis The tutorial begins by showing the necessary dependency additions to `pubspec.yaml`, including `flutter_genui` and `flutter_genui_firebase_ai`, confirming that the required components for integrating generative UI with Firebase are present (05:17). In the main Dart file, the presenter initializes the core components within `initState`: a `GenUIConversation` object to manage the interaction, a `GenUIManager` linked to the catalog, and a `FirebaseAiContentGenerator` (06:11, 06:41). Crucially, a custom data schema, `final_schema`, is defined as an `S.object` to instruct the AI on the expected output structure for a 'WorkoutCard', specifying required fields like 'title' (String) and 'exercises' (List of Strings) with constraints on length (11:36). The system instruction is set to guide the AI agent to act as an expert in creating bodyweight-only workout plans and to generate new UI (represented by the `WorkoutCard` catalog item) in response to user messages (06:54). Finally, in the UI's `build` method, a `ListView.builder` iterates over active surface IDs, returning a `GenUISurface` widget for each ID, passing the conversation host and surface ID to render the dynamically generated UI. A test prompt, "Leg day workout please," successfully triggers the agent to respond with the correctly formatted 'Back and Shoulders Workout' card (09:33), demonstrating the core functionality of the GenUI package. ### Dependency Setup - Adding `flutter_genui` and `flutter_genui_firebase_ai` via git dependencies in `pubspec.yaml` - Including `json_schema_builder` for defining data structures - Ensuring necessary Flutter and Firebase imports are present in `main.dart` (05:17, 10:23) ### Initialization in State - Creating `GenUIConversation` to manage the overall interaction - Initializing `GenUIManager` with the catalog and generator - Defining `_surfaceIds` list to track active surfaces (06:11, 07:24) ### Defining Custom Schema - Creating a `final_schema` object schema for the 'WorkoutCard' - Specifying 'title' (String) and 'exercises' (List) properties - Setting min/max length constraints (3 to 5 exercises) for the list items (10:36, 11:34) ### Agent Instruction - Setting the `systemInstruction` to define the AI's persona (workout expert) and output requirements (3-5 exercises, bodyweight only) - Instructing the agent to generate new UI (the 'WorkoutCard') in response (06:54) ### UI Implementation - Using `ListView.builder` to iterate over active surface IDs - Returning `GenUISurface` for each ID, linking it to the conversation host and surface ID (08:32) ### Testing the Agent - Sending the prompt "Leg day workout please" via `_sendMessage` - Observing the agent successfully generate and render the custom 'WorkoutCard' UI (09:33) ![Screenshot at 00:05: The introductory screen for 'Flutter Flight Plans' featuring a stylized, glowing avian character outline.](https://ss.rapidrecap.app/screens/nWr6eZKM6no/00-00-05.png) ![Screenshot at 00:17: The presenter introduces the topic, mentioning the new Flutter GenUI package for creating dynamic applications.](https://ss.rapidrecap.app/screens/nWr6eZKM6no/00-00-17.png) ![Screenshot at 00:46: A visual representation of a generic text-heavy mobile screen transforming into a structured, component-based layout, illustrating the concept of dynamic UI generation.](https://ss.rapidrecap.app/screens/nWr6eZKM6no/00-00-46.png) ![Screenshot at 01:37: An abstract visual effect with geometric shapes and a HUD overlay, representing the AI's processing or the dynamic nature of the UI.](https://ss.rapidrecap.app/screens/nWr6eZKM6no/00-01-37.png) ![Screenshot at 02:25: A sequence diagram showing four mobile screens illustrating a complex navigation flow, contrasting it with a streamlined AI-guided path.](https://ss.rapidrecap.app/screens/nWr6eZKM6no/00-02-25.png) ![Screenshot at 04:21: The documentation for flutter\_genui is displayed, outlining key components like GenIConversation and GenISurface.](https://ss.rapidrecap.app/screens/nWr6eZKM6no/00-04-21.png) ![Screenshot at 05:17: The pubspec.yaml file shows the necessary Git-based dependencies being added for flutter\_genui and flutter\_genui\_firebase\_ai.](https://ss.rapidrecap.app/screens/nWr6eZKM6no/00-05-17.png) ![Screenshot at 06:54: The code snippet showing the detailed systemInstruction provided to the AI agent to constrain its output to bodyweight workout plans.](https://ss.rapidrecap.app/screens/nWr6eZKM6no/00-06-54.png) ![Screenshot at 08:43: Code defining the custom JSON schema for the 'WorkoutCard' catalog item, specifying properties like 'title' and 'exercises' list structure.](https://ss.rapidrecap.app/screens/nWr6eZKM6no/00-08-43.png) ![Screenshot at 09:33: A successful test run in the browser where the prompt "Leg day workout please" results in the beautifully rendered 'Back and Shoulders Workout' card.](https://ss.rapidrecap.app/screens/nWr6eZKM6no/00-09-33.png)