# How to connect interfaces to the cloud with AI agents

Source: https://www.youtube.com/watch?v=Dum-LYLm0Uw
Recap page: https://rapidrecap.app/video/Dum-LYLm0Uw
Generated: 2025-12-17T21:35:14.651+00:00

---
## Quick Overview

The video demonstrates how to connect Flutter interfaces to cloud-based AI agents using the Agent Development Kit (ADK) and the Flutter GenUI package, enabling dynamic, stateful, and high-performance conversational UIs without complex server setup.

**Key Points:**
- Dynamic client-side UIs are built by sending structured JSON payloads from the cloud agent, rather than static HTML or images.
- The Agent Development Kit (ADK) handles heavy lifting like reasoning, state management, and tool execution on the server side.
- The Flutter GenUI package facilitates communication, supporting a streaming protocol, JSON schema definition, backend agnosticism, custom components, and incremental UI updates.
- Custom components, like the demonstrated 'BudgetSlider', are registered on both the client (Flutter) and the backend (ADK) by mapping a name to a widget builder.
- The architecture ensures better performance by sending lightweight JSON structures instead of heavy layout code or pixels.
- An example application, 'Verdure' (a landscape design agent), showcases the end-to-end flow, where user input updates the state, which is processed by the ADK, returning new UI structures.

![Screenshot at 00:24: A diagram illustrating the core connection where the 'Flutter App' communicates bidirectionally with the 'ADK' \(Agent Development Kit\), representing the decoupled architecture.](https://ss.rapidrecap.app/screens/Dum-LYLm0Uw/00-00-24.png)

**Context:** This presentation, part of the 'Flutter Flight Plans' series, focuses on integrating generative AI agents into Flutter applications. The core concept is using the Agent Development Kit (ADK) to manage the AI's logic and state on the server, while the client (Flutter app) receives structured JSON that dynamically describes the UI elements needed for interaction. This decouples the agent's logic from the client implementation, allowing for complex, stateful interactions.

## Detailed Analysis

The presentation explains a method for creating dynamic, client-side UIs in Flutter that interact with cloud-based AI agents, avoiding the need for complex server setups or sending heavy UI code/images. This is achieved using the Agent Development Kit (ADK) on the backend and the Flutter GenUI package on the client. The ADK manages complex logic, reasoning, state, and tool execution, communicating via a standardized streaming protocol that transmits structured JSON payloads describing the required UI updates. Developers register custom components, like a 'BudgetSlider', on both sides by defining a schema object on the backend and providing a corresponding widget builder on the Flutter client. The video shows a landscape design example, 'Verdure,' where user input is processed by the agent, which then returns a new JSON state describing the updated UI (like showing cost estimates in a shopping cart), resulting in a native-feeling, high-performance user experience.

### Introduction to Dynamic Client-Side UIs

- Building dynamic client-side UIs
- Focused on local interaction without complex server setup
- Agents provide structured JSON for UI updates, not HTML/images.

### Agent Development Kit (ADK) Role

- ADK handles heavy lifting
- Provides access to massive reasoning models, APIs, and databases
- Manages complex workflows and state.

### Flutter GenUI Package Features

- Utilizes a streaming protocol and JSON schema
- Backend agnostic
- Supports custom components and incremental UI updates.

### Custom Component Implementation

- Defining a 'BudgetSlider' as a CatalogItem with schema properties (value, min, max, label)
- Implementing a corresponding `widgetBuilder` in Flutter to render the native widget based on schema data.

### Verdure Example Walkthrough

- Demonstrates a landscape design agent powered by ADK and Gemini API
- User input triggers backend processing
- Backend returns new structured JSON, updating the Flutter UI seamlessly (e.g., moving from input form to the final custom designs shopping cart).

![Screenshot at 00:01: Abstract 3D shapes floating in a dark blue/purple space, setting a futuristic, digital theme.](https://ss.rapidrecap.app/screens/Dum-LYLm0Uw/00-00-01.png)
![Screenshot at 00:12: The host, Rody Davis, introduces the topic alongside a slide displaying the title 'Getting started with GenUI'.](https://ss.rapidrecap.app/screens/Dum-LYLm0Uw/00-00-12.png)
![Screenshot at 00:24: A diagram showing bidirectional communication between the 'Flutter App' and the 'ADK' \(Agent Development Kit\).](https://ss.rapidrecap.app/screens/Dum-LYLm0Uw/00-00-24.png)
![Screenshot at 00:37: Code snippet showing the JSON schema definition for a custom 'BudgetSlider' component within the ADK framework.](https://ss.rapidrecap.app/screens/Dum-LYLm0Uw/00-00-37.png)
![Screenshot at 01:18: A side-by-side view of the Flutter UI for a landscape design input form and the corresponding structured JSON payload describing that UI.](https://ss.rapidrecap.app/screens/Dum-LYLm0Uw/00-01-18.png)