GENUI
GenUI Development · Generative UI with Flutter

Interfaces generated in real time around what each user actually needs.

GenUI turns user intent into screens: the AI model composes the interface on the fly using only approved components from your design system. Flutter's genui SDK, the A2UI protocol and models like Gemini or Claude — built by the only official Google Flutter Partner in Spain.

Respuesta directa

GenUI (Generative UI) = the interface stops being fixed and is generated in real time from the user's intent and context. The AI model doesn't write code or invent designs: it orchestrates components from an approved catalog (your design system) and delivers them as structured data over the A2UI protocol, which Flutter renders natively on iOS, Android and web. Fewer steps, less friction, zero brand risk.

A2UI

UI as structured data, not generated code

100%

Your design system's components — nothing invented

1 → ∞

One catalog, unlimited screens per user

Do you need it?

Signs your product is asking for GenUI.

If any of these sound familiar, your static interface has outgrown what your users now expect from an AI-powered product.

💬

Your assistant answers in paragraphs

You have an LLM chatbot replying with walls of text where it should be showing buttons, product cards, a calendar or a form. Users read when they should be able to tap.

🧭

Your flows have too many steps

An eight-screen onboarding, a checkout that loses half its users, forms that ask for things you already know. GenUI compresses multi-step flows into a single adaptive screen.

🎯

Every user needs a different screen

What's relevant to a new user is clutter to a returning one. Hand-crafting per-segment variants doesn't scale: generative UI adapts to each person without multiplying designs.

🎨

Personalisation doesn't scale by hand

Your design team can't produce a variant per campaign, segment and use case. With a governed catalog, the model composes the variants — inside your rules.

🛡️

You want AI without losing your brand

You're held back by the fear of a model 'inventing' screens outside your visual identity. With GenUI the model can only use pre-approved components: the result is always yours, pixel by pixel.

🚀

You already run an LLM in production

Your assistant works and you want the next leap: for it to stop talking and start operating the interface. GenUI is the natural evolution of a chat that already converts.

How it works

Three pieces govern every generated screen.

GenUI is not a model drawing freely. It's governed generation: three layers define what can appear, when, and how it looks.

01

System prompt

The rules of the game: tone, goals, limits and orchestrator behaviour. It defines what the interface must achieve and what it may never do — your product's constitution.

02

User context

Situational intelligence: who the user is, what they just did, what they asked, where they are in the flow and on which device. It's what makes a generated screen relevant rather than generic.

03

Component catalog

The visual vocabulary: the widgets from your design system the model is allowed to use, with their variants and composition rules. The model picks and combines; it never invents.

How we build it

The four layers of a generative interface in production.

GenUI is easy in a demo; in production it demands engineering: a governed catalog, model orchestration, a delivery protocol and guardrails. We build all four layers.

A governed catalog on top of your design system

  • We audit your design system and translate it into a genui widget Catalog with variants and constraints
  • Accessible components, with dark mode and loading/error states solved out of the box
  • Composition rules: what can go with what, hierarchies and maximum densities per surface
  • A versioned catalog — it evolves with your brand without breaking previously generated screens

Model orchestration

  • Gemini, Claude or whichever model fits: the genui SDK is model-agnostic and the integration lives in your backend
  • Streaming responses: the interface assembles on screen while the model is still generating
  • Function calling so the generated UI triggers real actions (search, book, pay)
  • Model routing by cost and latency + continuous evals of generation quality

A2UI architecture

  • The UI travels as structured data (the A2UI protocol), not generated code — secure and auditable
  • Schema validation before rendering: nothing reaches the screen without passing the contract
  • 100% native Flutter rendering: no webviews, with your app's performance on iOS, Android and web
  • Two-way reactive state: what the user taps in the generated UI flows back to the model as context

Guardrails, fallbacks and observability

  • Deterministic fallbacks: if the model fails or stalls, the app shows the usual static screen
  • Telemetry for every generation: which components were used, with what context, and how it converted
  • Latency and cost budgets per surface, with caching of frequent compositions
  • Data minimisation: the model receives only the essential context, never raw sensitive data

Use cases

Where a generated screen beats a fixed one.

The same patterns Google illustrates with GenUI, applied to the sectors we work in every day.

🛍️

Retail & eCommerce

Before

Static filters and endless listings users have to comb through by hand.

With GenUI

The user describes what they're after and the app instantly composes a screen with the relevant products, comparisons and the CTA that matches their intent.

🏦

Banking & fintech

Before

A transfer or product sign-up spread across six wizard screens.

With GenUI

A single adaptive screen that asks only for what's missing, validates in real time and adjusts to the customer's profile and limits.

🏨

Travel & hospitality

Before

A text chat describing rooms and rates in paragraphs.

With GenUI

Visual booking cards with dates, photos and prices generated inside the conversation, one-tap confirmation, and your visual identity intact.

🏢

Internal tools & enterprise

Before

Fixed dashboards identical for every role, full of metrics nobody looks at.

With GenUI

Panels composed around the role, the task at hand and what the user asks — from data to action without going through the BI team.

Guide

GenUI with Flutter: what it is, how it's governed, and why now

GenUI (Generative UI) is a paradigm shift in how a digital product's interface is built: instead of designing every possible screen up front, you define a system — rules, context and a component catalog — and an AI model composes the concrete interface in real time, adapted to each user's intent at each moment. The screen stops being a fixed artefact and becomes the outcome of a conversation between the user and the system.

The obvious objection is control: how do you stop a generative model from producing screens that are off-brand, inaccessible or plain broken? The answer is that in well-built GenUI the model never generates code or draws pixels. It acts as an orchestrator: it picks components from a pre-approved catalog — your design system turned into a vocabulary —, combines them according to explicit composition rules, and the result is validated against a schema before it ever reaches the screen. It's governed generation: the model's creativity operates inside a perimeter defined by your design team, not by the model.

The piece that has made this viable in production is Flutter's genui SDK — published by Flutter Labs, the Flutter team's labs group at Google — together with the open A2UI protocol. With genui, the generated interface travels from the agent to the app as streamed structured data: messages that create surfaces, update components or modify the data model, which Flutter renders natively. There are no webviews, no generated code executing on the device, and no performance penalty: they are your app's own widgets, composed dynamically. The SDK is model-agnostic — it works with Gemini, with Claude, or with any LLM you connect through your backend.

Why is Flutter the natural platform for GenUI? Because a single component catalog performs on iOS, Android, web and desktop from the same codebase, and because its composable widget system fits naturally with the idea of an interface described as data. For a company, that means the investment in the catalog — the expensive part of the project — pays off across every surface at once. And if your app is already built in Flutter, GenUI can be introduced surface by surface, with nothing rewritten: you start with one concrete flow (search, onboarding, support) and expand based on results.

At Dribba we've been shipping AI to production for years — autonomous agents, enterprise RAG, voice apps — and we are the only Spanish consultancy in Google's official Flutter Partners directory. That combination is exactly what a GenUI project demands: product judgement to decide which flows benefit from generation, senior Flutter engineering to build the catalog, and real experience operating LLMs in production with guardrails, evals and observability. If you want to explore what GenUI would do in your product, we'll show you on your case — not with slides.

      Frequently asked questions

      Everything about generative interface development.

      GenUI is an architecture pattern in which the user interface is not pre-designed screen by screen; instead, an AI model composes it in real time from the user's intent and context. The model acts as an orchestrator: it selects components from an approved catalog (your design system), combines them following explicit rules, and the app renders them natively. The result is an interface that adapts to each user and each situation — fewer steps, less friction, more relevant experiences — without sacrificing visual identity or control.

      A chatbot answers with text; GenUI answers with interface. When you ask for 'a hotel in Lisbon for the long weekend', a chatbot describes options in paragraphs you have to read; an app with GenUI shows you visual cards with photos, dates and prices you can tap, compare and book. The LLM is still underneath — understanding intent — but its output is an operative screen, not prose. In fact, the usual path is to evolve a conversational assistant that already works into GenUI: same brain, better body.

      No — and this is the crux of a serious GenUI project. The model doesn't generate code or draw freely: it can only use the components your team has approved in the catalog, with the variants and composition rules you've defined. Every model response is validated against a schema before rendering — if something doesn't meet the contract, it never reaches the screen and the app shows a deterministic fallback. Your design system stops being a guideline that gets bent and becomes a technical boundary that cannot be crossed.

      genui is the open source SDK published by Flutter Labs (the Flutter team's labs group at Google) for building generative interfaces in Flutter. It provides the production pieces: the Catalog that defines which widgets the model may use, surface management and reactive state, and the A2UI protocol parser. A2UI is an open protocol in which the interface travels from the agent to the app as streamed structured data — not code — which makes it secure, auditable and fast to render. We integrate it with your backend and your design system.

      Any of them. The genui SDK is model-agnostic: the app sends context to your backend, and that's where you decide which LLM generates the interface — Gemini, Claude, a self-hosted model, or a combination with routing by cost and latency. At Dribba we regularly run Claude (Anthropic) and Gemini (Google) in production, and we set up evals to measure which model composes better interfaces for your specific case before committing to one.

      Yes — and it's the path we recommend. GenUI doesn't require rewriting the app: it's introduced surface by surface. We pick a flow with measurable friction — search, onboarding, support, a long form —, build the catalog from the components already in your design system, and ship that generative surface with a fallback to the current static screen. If your app isn't built in Flutter, that pilot can also be the first piece of a progressive migration.

      They're design constraints, not billing surprises. The interface is streamed — the user watches the screen assemble within hundreds of milliseconds instead of waiting for the full generation —, frequent compositions are cached, and we define latency and cost budgets per surface: which flows justify live generation and which run on pre-generated templates. With model routing (small models for simple compositions, large ones for complex cases) the cost per session stays in the cents.

      It depends on two variables: the size of the catalog (how many components and variants the model must be able to use) and how many generative surfaces you want in production. Our entry format is a scoped pilot: one concrete flow, a reduced catalog built on your current design system, and conversion metrics compared against the static screen. That gives you a real business signal before scaling. In the first session — free of charge — we give you a closed range for your case.

      You may also be interested in

      “Show us one flow in your app that takes too many steps and we'll show you how GenUI solves it in a single screen.”

      We analyse your case, your design system and which flows gain the most from generation. First session free of charge.

      See pricing →