import SocialEmbed from "../../../../components/SocialEmbed.astro";


# How to connect interfaces to the cloud with AI agents

<SocialEmbed platform="youtube" id="Dum-LYLm0Uw" />

## Description

Verdure example → https://goo.gle/3XY7GX8
GenUI package → https://goo.gle/4oXUoou

Give AI agents massive reasoning models, real-time APIs, and the ability to perform complex tasks. Watch along as Googler Rody Davis leverages Agent Development Kit (ADK) to securely access databases, call internal APIs, and orchestrate complex workflows. Watch along and discover the power of GenUI SDK for Flutter.

Chapters:
0:00 - Intro
0:36 - What is Agent Development Kit?
1:17 - Rendering the UI for app workflows
1:56 -[Demo] Verdure
2:44 - [Demo] Building a new “Budget Slider”
4:32 - Summary

Watch more Flutter Flight Plans → https://www.youtube.com/watch?v=pMoUg3dkDJk&list=PLjxrf2q8roU1yXu4k7ivSLAa0cizD4feH
🔔 Subscribe to Flutter → https://goo.gle/FlutterYT 

#Flutter

Speaker: Rody Davis
Products Mentioned: Agent Development Kit, GenUI SDK for Flutter

## Transcript

### Intro

**0:07** · \[music\] In a recent video, get started with GenUI and Flutter, we explored how to build dynamic client side UIs. We focused on local interaction, showing you how to create adaptive experiences without needing a complex server setup.

**0:24** · Today, we're taking the next step. We're looking at how you can connect those interfaces to the cloud, giving your agents access to massive reasoning models, real-time APIs, and the ability to perform complex tasks. To do that, we can use agent development kit or ADK. It provides the infrastructure needed to build these powerful back-end agents.

### What is Agent Development Kit?

**0:44** · ADK is an open- source framework that handles the heavy lifting, reasoning, state management, and tool execution. to communicate with the user. The agents built with ADK use a standardized streaming protocol which we can use to have a standard way to send dynamic UI components to the front end. Decoupling your agents logic from the client implementation. The real power lies in what ADK enables on the server. Your agents can securely access databases, call internal APIs, and orchestrate complex workflows, things you can't easily do on a client device.

**1:15** · But how do we render the UI for these workflows?

### Rendering the UI for app workflows

**1:20** · Instead of sending static images or HTML, the agent generates structured JSON payloads describing the intent of the UI. This is where Flutter Genui package comes in. Your app receives the structured response which might include an initial generated plan alongside specific inputs for refinement. It maps the schema to the widgets you defined.

**1:42** · The agent provides the content and the controls and your app decides to render this as a seamless experience. This means your agent can think, fetch data, and update the UI incrementally without you having to write complex socket management code. Let's see this in action. This is for a demo of a landscape design agent. It is a Flutter client powered by an ADK backend. Let's say the user starts a new landscape design. The agent processes a request and responds not just with the text, but with a structured JSON payload describing the interactive interface.

### \[Demo\] Verdure

**2:15** · It's similar to how a web server might return a form, but here it's fully native. But unlike a normal client server form, it can generate unique questions based on the content that the user uploaded powered by Gemini. In this video, the agent composed a layout in its response and the Flutter app composed to gather the corresponding widgets. When the user takes action, it will update the client side data model.

**2:37** · And when they hit submit as a user action, it will be sent back to the agent with the new context and returns the new state.

### \[Demo\] Building a new “Budget Slider”

**2:45** · This looks like magic, but the code is surprisingly simple. Let's build a new budget slider component in the Verdue sample to see what is needed on the client and server to have these custom components beyond what the default catalog provides. First, in Flutter, we can introduce the default widget catalog. Then, we can use the Genui package to map a name and a schema with a widget builder to the new custom component. Notice that we aren't writing any networking code here.

**3:10** · We just tell the SDK if the agent asks for a budget slider, verify that the data matches the schema and render the standard Flutter slider. Now, let's flip to the backend.

**3:21** · Since the Genui architecture relies on a standard JSON protocol to describe the widgets and intent, your backend can technically be anything. A Dart server, a Node.js app, or even a Python service.

**3:33** · As long as it returns the correct JSON schema, the Flutter client can render it. However, to build a robust, scalable agent, we recommend using ADK. It handles the complex reasoning and state management for you. In our code, we simply define agents logic to have it return the UI structure. ADK takes care of the rest, bridging the intelligence back to your Flutter app. But why go to all this trouble? Why not just render markdown or HTML? It comes down to control. With Genui, you are not limited to just generic text and images. You define components.

**4:05** · This means the agent can leverage custom interactive components like the budget slider that fit perfectly into your app's design system. You get the flexibility of generative UI without sacrificing the native look and feel and performance.

**4:20** · Because we're sending lightweight JSON structures, not pixels or heavy layout code. The payloads are tiny. And because the widgets are in Flutter, you get 60 FPS animations and native gestures. By combining the Flutter Genui package with an ADK backend, you can unlock a whole new class of applications. Check out the Verdue sample and start building your own widget registry at github.com/flutter/genui.

### Summary

**4:44** · We cannot wait to see what you'll build.

**4:47** · \[music\] \[music\]