GenUI in Flutter: Real-time Dynamic UI Generation with LLMs

Learn how to generate rich, dynamic Flutter UIs in real-time based on LLM responses and user context.

Posted on: 2026-03-15 by AI Assistant

Introduction

Chatbots that only return text are becoming obsolete. Users expect AI to interact using rich, interactive interfaces—forms, charts, and custom widgets. This concept is called GenUI (Generative UI). In this tutorial, you will learn how to use an LLM to generate real-time Flutter widgets dynamically based on user intent.

Prerequisites

• Flutter SDK installed
• An API key for a model that supports structured JSON output (e.g., Gemini 1.5 Pro)
• A package for server-driven UI in Flutter (like rfw or a custom JSON-to-Widget parser)

Core Content: From JSON to Widgets

1. Prompting for Structured UI Logic

Instead of asking the LLM for an answer, we ask it for a UI layout.

final prompt = """
The user wants to book a flight to Tokyo. 
Generate a JSON UI representing a booking card.
Include a title, a date picker, and a 'Confirm' button.
""";

// Model returns structured JSON representing the requested UI
final jsonResponse = await model.generateContent([Content.text(prompt)]);

2. Rendering Dynamic Widgets

Once we receive the JSON payload from the AI, we map it to our internal Flutter component catalog.

import 'package:flutter/material.dart';

Widget buildGenUI(Map<String, dynamic> uiSchema) {
  switch (uiSchema['type']) {
    case 'BookingCard':
      return Card(
        child: Column(
          children: [
            Text(uiSchema['title']),
            ElevatedButton(
              onPressed: () => handleAction(uiSchema['action']),
              child: Text(uiSchema['buttonText']),
            ),
          ],
        ),
      );
    // Add more mappings here
    default:
      return const SizedBox.shrink();
  }
}

Putting It All Together

With GenUI, your app’s interface isn’t hardcoded. If the user asks for a weather forecast, the AI renders a beautiful weather widget. If they ask for stock prices, it renders a dynamic chart. The possibilities are endless when the UI itself is an AI artifact.

Conclusion & Next Steps

You’ve built a foundational GenUI pipeline! To take this to the next level, investigate the Flutter AI Toolkit, which provides pre-built infrastructure for streaming AI responses directly into complex interactive widgets. Questions? Drop a comment below!