GenUI in FlutterFlow 2026: How AI Agents Now Compose Your App's UI in Real Time

Every UI you have ever built makes the same assumption: you know in advance what the user will need.

You design screens for the expected user journeys. You build forms for the expected inputs. You create navigation for the expected flows. The UI is a static prediction of what users will want.

GenUI breaks this assumption. The AI agent observes what the user is trying to accomplish — and assembles the appropriate UI at runtime, from your existing widget catalog, in response to the user's actual intent.

The Core Concept: From Text to UI

The evolution of AI in apps:

Gen 1: AI returns text
User: "Show available rooms for next weekend"
AI: "We have Room 101 available at $120/night and Room 205 at $150/night..."

Gen 2: AI returns structured data (JSON)
User: "Show available rooms for next weekend"
AI returns: { rooms: [{id: 101, price: 120, ...}, {id: 205, ...}] }
App renders: a list view using hardcoded template

Gen 3 (GenUI): AI returns UI specification
User: "Show available rooms for next weekend"
AI returns A2UI JSON: {
  type: "RoomGrid",
  items: [{widget: "RoomCard", id: 101, price: 120, features: [...], cta: "Book Now"}],
  layout: "grid_2col",
  filter_widget: "PriceRangeSlider"
}
App renders: actual RoomCard widgets + PriceRangeSlider, all interactive

In Gen 3, the agent does not just answer — it builds the interface. The user gets functional UI components, not a text description of what the UI would show.

How GenUI Works Technically

GenUI uses a three-layer architecture:

Layer 1: Widget Catalog Registration

You register your app's components with the GenUI SDK — defining what widgets exist and what data they accept:

// Register your widget catalog with GenUI
final catalog = GenUIWidgetCatalog(
  widgets: [
    WidgetSpec(
      name: "ProductCard",
      description: "Displays a product with image, name, price, and add-to-cart button",
      schema: {
        "product_id": SchemaField.string(required: true),
        "name": SchemaField.string(required: true),
        "price": SchemaField.number(required: true),
        "image_url": SchemaField.string(),
        "rating": SchemaField.number(min: 0, max: 5),
        "in_stock": SchemaField.boolean(defaultValue: true),
      },
      builder: (data, onAction) => ProductCard(
        productId: data["product_id"],
        name: data["name"],
        price: data["price"],
        imageUrl: data["image_url"],
        rating: data["rating"],
        onAddToCart: () => onAction("add_to_cart", {"product_id": data["product_id"]}),
      ),
    ),
    WidgetSpec(
      name: "BookingCalendar",
      description: "Interactive calendar for selecting available appointment slots",
      schema: {
        "available_dates": SchemaField.array(SchemaField.string()),
        "time_slots": SchemaField.array(SchemaField.string()),
        "service_type": SchemaField.string(),
      },
      builder: (data, onAction) => BookingCalendar(
        availableDates: data["available_dates"],
        timeSlots: data["time_slots"],
        onSlotSelected: (date, time) => onAction("slot_selected", {
          "date": date, "time": time
        }),
      ),
    ),
    // ... more widgets
  ],
);

Layer 2: Agent-to-UI Communication

When the user sends input, GenUI sends it to the LLM along with the widget catalog schema. The LLM responds with A2UI JSON — a specification of which widgets to render with what data:

{
  "ui_response": {
    "message": "I found 3 available slots for your haircut appointment this week:",
    "components": [
      {
        "widget": "BookingCalendar",
        "data": {
          "available_dates": ["2026-05-19", "2026-05-20", "2026-05-22"],
          "time_slots": ["10:00 AM", "2:00 PM", "4:30 PM"],
          "service_type": "haircut"
        }
      },
      {
        "widget": "ServiceInfoCard",
        "data": {
          "service": "Classic Haircut",
          "duration": "45 minutes",
          "price": 35
        }
      }
    ]
  }
}

Layer 3: State Feedback Loop

When the user interacts with the rendered widget (selects a time slot, clicks Add to Cart, fills a form), the action is fed back to the agent:

// GenUI automatically feeds user actions back to the agent
GenUIChat(
  catalog: catalog,
  model: FirebaseAI.googleAI().generativeModel("gemini-2.5-flash"),
  onAction: (actionType, actionData, conversation) {
    // "slot_selected" action fires when user picks a booking time
    // GenUI automatically includes this in the next agent context
    // The agent knows what the user selected and responds appropriately
  },
)

The agent maintains context of the entire interaction — what UI it showed, what the user clicked, what data was displayed. The next user input continues a stateful conversation where the agent knows exactly where you are in the flow.

FlutterFlow's GenUI Chat

For FlutterFlow developers, GenUI Chat is available without writing the SDK integration manually:

1. Enable GenUI Chat in the FlutterFlow widget library
2. Define your widget catalog — select which FlutterFlow components the agent can use (you pick from your existing component library)
3. Connect AI model — select Firebase AI Logic + Gemini (zero configuration) or configure a custom LLM endpoint
4. Configure the agent's system prompt — define the agent's role, what it can do, what widgets to use for different scenarios

FlutterFlow generates the widget catalog schema automatically from your component library — you do not need to write JSON schemas by hand.

Real Use Cases in Production

E-Commerce: Dynamic Product Discovery

Instead of fixed category pages, the agent assembles product grids based on natural language queries. "Show me running shoes under $100 for wide feet" → agent renders a filtered ProductGrid with PriceRangeSlider and FootWidthFilter widgets, with results pre-filtered to the user's criteria.

Healthcare: Personalized Patient Dashboards

Instead of one-size-fits-all health dashboards, the agent assembles relevant widgets based on each patient's conditions, medications, and upcoming appointments. A diabetic patient's dashboard shows GlucoseTracker and MealLogger. A cardiac patient's shows HeartRateCard and MedicationSchedule. For regulated environments, this requires HIPAA-compliant development practices throughout the agent and data layers.

B2B SaaS: Adaptive Analytics

Instead of fixed dashboard layouts, the agent assembles the metrics most relevant to each user's role and current goals. The sales VP sees pipeline and quota attainment. The account manager sees their book of business and renewal risk. This adaptive approach is core to modern SaaS development where personalization drives retention.

Travel Apps: Conversational Booking

"I want a beach vacation in Southeast Asia, first week of July, family of 4, ~$3,000 budget" → agent assembles FlightSearchResults + HotelGrid + ItineraryBuilder, pre-filtered and pre-populated with the user's constraints.

What This Changes for Flutter Developers

GenUI shifts the Flutter developer's role:

Before GenUI: You design every possible screen, every state, every user flow — and hope you predicted what users would need.

With GenUI: You build a rich widget catalog — high-quality, composable components. The agent decides which widgets to assemble for each user's specific situation. You focus on making great widgets; the AI focuses on assembling them correctly. This shifts Flutter development from predicting flows to building vocabularies of reusable components.

The implication: the UI layer becomes a vocabulary of components, and the agent is the grammar that arranges them. Apps that implement GenUI can handle user intents that were never explicitly designed for, because the agent can assemble novel combinations of existing widgets.

---

Ortem Technologies builds Flutter and FlutterFlow applications with GenUI integration — creating adaptive, agent-driven experiences for healthcare, fintech, and enterprise clients. Explore our Flutter development services → | AI agent development → | Talk to our mobile team →