# Building interactive UIs for Agent-powered apps with Generative UI Source: https://www.youtube.com/watch?v=K2p5Nrn2OSU Recap page: https://rapidrecap.app/video/K2p5Nrn2OSU Generated: 2025-12-17T21:35:42.665+00:00 --- ## Quick Overview The video demonstrates how to build interactive UIs for agent-powered applications using the Generative UI framework in Flutter by implementing a workout companion app that dynamically updates based on user input and agent responses, specifically by defining necessary data schemas, implementing stateful widgets to manage rep counts, and utilizing `completeAction` to signal exercise completion back to the agent. **Key Points:** - The demonstration builds upon a previous example by enhancing the workout tracking logic to handle user input for completed reps and exercise completion. - The speaker updated the `RepsCardSchema` to include `repsCompleted` (Integer) and `completeAction` (A2uiSchemas.action) to manage user interaction and agent feedback. - The `RepsCard` widget was converted to a Stateful Widget to internally manage the count of completed reps using a `late int repsCompleted` variable initialized in `initState`. - In `didUpdateWidget`, the code checks if the exercise name changed; if so, it resets `repsCompleted` to the new `widget.numberOfReps`. - The UI for tracking reps includes up/down arrows to manually adjust `repsCompleted` and a checkmark icon to trigger the `widget.onCompleted(repsCompleted)` callback, sending the final count back. - The `onCompleted` callback within the `RepsCard`'s `CatalogItem` definition handles the `completeAction` by resolving context and dispatching a `UserActionEvent` back to the agent, including the `numberOfRepsCompleted` data. - The demonstration concludes by showing the fully interactive workout flow, where the agent guides the user through exercises and congratulates them upon completion. ![Screenshot at 11:14: The UI demonstrates the functionality of the RepsCard widget after the first exercise \(Push-ups\) is completed, showing the target reps \(15\) and the user-updated completed reps \(17\), waiting for user confirmation to proceed to the next step.](https://ss.rapidrecap.app/screens/K2p5Nrn2OSU/00-11-14.png) **Context:** This tutorial, titled "Flutter Flight Plans: Interactive UIs for Agent-powered apps with GenUI," is presented by Khanh Nguyen from the Flutter team. It focuses on advancing the integration of Generative UI (GenUI) with Flutter applications by handling user input directly within generated UI components (like the `RepsCard`). The session builds on prior work, showing how to update the data model and widget logic to allow users to manually adjust rep counts and signal completion, ensuring the agent stays aware of the dynamic UI state. ## Detailed Analysis The video explains how to make agent-generated UIs truly interactive, moving beyond static displays to allow users to provide feedback and update the state, which the agent then processes. The presenter first reviews the updated `RepsCardSchema` which now includes fields for `repsCompleted` (Integer) and `completeAction` (A2uiSchemas.action) to manage user interaction and agent callbacks for exercise completion. The presenter then modifies the `RepsCard` widget, converting it to a `StatefulWidget` to manage the local state of `repsCompleted`. In `initState`, this local state is initialized from the `widget.numberOfReps`. The `didUpdateWidget` method is implemented to reset `repsCompleted` if the exercise name changes when the widget is reused. The `build` method is updated to display the current reps completed, along with up/down arrow buttons to manually adjust this count (which calls `setState`), and a checkmark button that triggers `widget.onCompleted(repsCompleted)`. This `onCompleted` callback is crucial: it executes the `action` defined in the GenUI data model, which involves resolving context and dispatching a `UserActionEvent` back to the agent, explicitly including the `numberOfRepsCompleted` data. This allows the agent to know exactly what the user did, fulfilling the requirement to wait for user confirmation before moving to the next step, as defined in the system prompt. ### System Prompt Updates - Added step 3 detailing the process for leading the user through exercises one at a time using a `RepsCard` widget, requiring user confirmation for each exercise completion. ### RepsCardSchema Definition - Updated schema to include `repsCompleted` (S.integer) to track actual reps and `completeAction` (A2uiSchemas.action) to signal exercise completion back to the agent. ### RepsCard Stateful Widget Implementation - Converted `RepsCard` to a `StatefulWidget` to manage local state (`repsCompleted`), initialized in `initState` and updated in `didUpdateWidget` if the exercise changes. ### UI Interaction Logic - Implemented up/down buttons to manually adjust `repsCompleted` via `setState()` and a checkmark button to call `widget.onCompleted(repsCompleted)`. ### Agent Communication via Action - The `onCompleted` callback triggers context resolution and dispatches a `UserActionEvent` to the agent, passing the `numberOfRepsCompleted` data, fulfilling the agent's expectation for user feedback. ![Screenshot at 00:01: Abstract visualization showing dynamic 3D shapes floating against a dark blue/purple background, signifying a dynamic application environment.](https://ss.rapidrecap.app/screens/K2p5Nrn2OSU/00-00-01.png) ![Screenshot at 00:12: The presenter, Khanh Nguyen, introduces the topic against a bright blue background with a subtle grid pattern.](https://ss.rapidrecap.app/screens/K2p5Nrn2OSU/00-00-12.png) ![Screenshot at 00:45: The initial 'Workout Companion' app interface displays an empty chat window with a purple header, before any interaction.](https://ss.rapidrecap.app/screens/K2p5Nrn2OSU/00-00-45.png) ![Screenshot at 02:55: A high-level architectural diagram illustrating the GenUI Framework components: Your Agent, ContentGenerator, GenUIConversation, GenUIManager/DataModel, and Your Widgets, showing data flow from a sendRequest\(\) call.](https://ss.rapidrecap.app/screens/K2p5Nrn2OSU/00-02-55.png) ![Screenshot at 05:26: VS Code showing the pubspec.yaml file with dependencies updated, specifically mentioning the genui and genui\_firebase\_ai packages.](https://ss.rapidrecap.app/screens/K2p5Nrn2OSU/00-05-26.png)