We bolted a chatbot on.
And called it AI.

You ask a question. You get back text. You still have to read it, decide, and go tap the real UI yourself.

Generative UI:
the model builds the interface.

Instead of replying in text, the model assembles real, interactive widgets — cards, chips, forms — out of your design system, shaped by what the person actually asked for.

They get a screen to use. Not a transcript to read.

Three ideas. That's it.

One model response.
Many front-ends.

Underneath sits an open protocol. The same response can render on Flutter, React, Angular, or native — each drawing with its own components.

Apache-2.0, built by Google with the open-source community. Flutter is one renderer that speaks it.

Round and round.

Each turn, the screen gets closer to what they meant.

A widget the model is allowed to use

final recipeCardItem = CatalogItem(
  name: 'RecipeCard',
  // The schema only accepts an id — not a title, not a price.
  // The model can point at a recipe, never invent one.
  dataSchema: S.object(properties: {
    'recipeId': S.string(),
    'reason': S.string(), // the one thing it may write freely
  }, required: ['recipeId']),
  widgetBuilder: (ctx) {
    final recipe = recipeById(ctx.data['recipeId']);
    return RecipeCard(recipe: recipe); // your widget, your brand
  },
);

name + schema + builder. The schema is the leash — it's how you stop the model hallucinating recipes that don't exist.

App owns facts. Model owns words.

  final recipe = recipeById(recipeId);     // FACTS: from my data
  final modelSteps = data['steps'];        // WORDS: from the model

  // Use the model's adapted steps if it sent any —
  // e.g. "no blender" — otherwise fall back to mine.
  final steps = (modelSteps != null && modelSteps.isNotEmpty)
      ? modelSteps
      : recipe.steps;

The model rewrites the phrasing. The cook time, the ingredients, the image — those are never up for negotiation.

Swap the model in one file

  // No API key in the app — Firebase AI Logic holds it.
  _model = FirebaseAI.googleAI().generativeModel(
    model: 'gemini-3.1-flash-lite',
    systemInstruction: Content.system(buildSystemInstruction()),
  );

  // genui just needs streamed text. Feed each chunk in.
  await for (final res in chat.sendMessageStream(content)) {
    _adapter.addChunk(res.text);     // the backend-agnostic seam
  }

genui doesn't care which model you use. Change providers later and this is the only file you touch.

The fence cuts both ways.

Locking the model to your data kills hallucination. It also means the moment someone asks for something you don't have, it has nothing honest to say.

Ask for a burger from a paneer menu, and a naive build will force paneer on you. You have to teach it to say "I don't have that — here's what I can do."

Cleaning up the screen
is your job.

Generative UI keeps adding. Nothing gets tidied unless you tidy it. And the model controls each screen's identity — a smaller model that reuses an id will quietly paint over your last one.

Model quality isn't abstract here. It shows up directly in your UX.

When to reach for it.

A chatbot that builds UI isn't always the answer. Use it where the uncertainty lives.

Two Delhi communities, always open.

I help organise Flutter Delhi and FFDG New Delhi — talks, meetups, and a room full of people figuring this out together. Scan in, say hi.

Flutter DelhiCommudle FFDG New DelhiLuma