GenUI: Como a IA Gera Interfaces Flutter em Tempo Real

O que é GenUI?

O GenUI (Generative UI) é o SDK do Google para Flutter que permite que agentes de IA gerem interfaces em tempo real. Diferente de chatbots que retornam apenas texto, o GenUI permite que a IA crie interfaces Flutter nativas — cards, formulários, gráficos, listas e muito mais — tudo de forma dinâmica.

Apresentado no Google I/O 2026, o GenUI representa uma mudança fundamental: a IA não apenas responde, mas constrói a interface que melhor atende ao usuário.

Como Funciona?

O GenUI usa um catálogo fechado de widgets Flutter que a IA pode selecionar e parametrizar. O processo é:

Usuário faz uma pergunta — "Mostre produtos de tecnologia"
IA analisa a intenção — Entende que precisa mostrar uma lista de produtos
IA gera JSON — Descreve quais widgets usar e com quais parâmetros
Flutter renderiza — Converte o JSON em UI nativa

Arquitetura

1. Catálogo de Widgets

O GenUI vem com um conjunto pré-definido de widgets que a IA pode usar:

CardWidget — Cards com título, descrição e imagem
ListWidget — Listas com itens
ChartWidget — Gráficos simples
FormWidget — Formulários com campos
MapWidget — Mapas
ImageWidget — Imagens
TextWidget — Textos formatados

2. Protocolo A2UI

O GenUI usa o protocolo A2UI (Agent-to-UI) para comunicação entre IA e interface. É um formato JSON declarativo que descreve a estrutura da UI.

3. Integração com Modelos

O GenUI funciona com modelos Gemini que foram treinados para gerar UI Flutter válida.

Como Começar

1. Instalação

dependencies:
  genui: ^latest
  genui_firebase_ai: ^latest  # Para usar com Firebase AI Logic

2. Configuração Básica

import 'package:genui/genui.dart';
import 'package:genui_firebase_ai/genui_firebase_ai.dart';

class MyGenUIScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GenUI(
      ai: FirebaseAIGenUI(
        model: 'gemini-2.0-flash',
      ),
      builder: (context, ui) {
        // ui é o widget Flutter gerado pela IA
        return Scaffold(
          body: SingleChildScrollView(
            child: ui,
          ),
        );
      },
    );
  }
}

3. Criando um Chat com GenUI

class GenUIChat extends StatefulWidget {
  @override
  _GenUIChatState createState() => _GenUIChatState();
}

class _GenUIChatState extends State<GenUIChat> {
  final TextEditingController _controller = TextEditingController();
  final List<ChatMessage> messages = [];
  final GenUIController _genUI = GenUIController();

  Future<void> sendMessage() async {
    final text = _controller.text;
    
    setState(() {
      messages.add(ChatMessage(text: text, isUser: true));
    });

    // A IA vai gerar UI em resposta
    final response = await _genUI.generate(
      prompt: text,
      catalog: [
        ProductCardWidget(),
        PriceChartWidget(),
        ReviewListWidget(),
      ],
    );

    setState(() {
      messages.add(ChatMessage(widget: response));
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(
          child: ListView.builder(
            itemCount: messages.length,
            itemBuilder: (context, index) {
              final msg = messages[index];
              if (msg.widget != null) {
                return msg.widget!;
              }
              return ListTile(
                title: Text(msg.text),
              );
            },
          ),
        ),
        TextField(
          controller: _controller,
          onSubmitted: (_) => sendMessage(),
          decoration: InputDecoration(
            hintText: 'Descreva o que você quer ver...',
          ),
        ),
      ],
    );
  }
}

Casos de Uso Práticos

1. Dashboard Dinâmico

// Usuário: "Mostre vendas do mês com gráfico"
// IA gera: CardWidget com título + ChartWidget com dados

final dashboard = await genUI.generate(
  prompt: 'Dashboard de vendas de julho 2026',
  catalog: [
    StatCardWidget(),
    LineChartWidget(),
    BarChartWidget(),
    TableWidget(),
  ],
);

2. Listagem de Produtos

// Usuário: "Quero ver celulares até R$ 2000"
// IA gera: ListWidget com ProductCards filtrados

final products = await genUI.generate(
  prompt: 'Celulares até 2000 reais',
  catalog: [
    ProductCardWidget(),
    FilterWidget(),
    SortWidget(),
  ],
);

3. Formulário Adaptativo

// Usuário: "Preciso cadastrar um cliente"
// IA gera: FormWidget com campos relevantes

final form = await genUI.generate(
  prompt: 'Formulário de cadastro de cliente',
  catalog: [
    TextFieldWidget(),
    DropdownWidget(),
    DatePickerWidget(),
    PhoneFieldWidget(),
  ],
);

Widgets Customizados

Você pode criar seus próprios widgets para o catálogo:

class ProductCardWidget extends GenUIWidget {
  @override
  String get name => 'product_card';

  @override
  Schema get schema => Schema.object({
    'name': Schema.string(),
    'price': Schema.number(),
    'image': Schema.string(),
    'description': Schema.string(),
  });

  @override
  Widget build(BuildContext context, Map<String, dynamic> data) {
    return Card(
      child: Column(
        children: [
          Image.network(data['image']),
          Text(data['name'], style: TextStyle(fontSize: 18)),
          Text('R\$ ${data['price']}',
               style: TextStyle(color: Colors.green)),
          Text(data['description']),
        ],
      ),
    );
  }
}

Segurança

O GenUI é projetado com segurança em mente:

Catálogo fechado — A IA só pode usar widgets que você definiu
Sem código arbitrário — Não é possível injetar Dart code
Validação — O JSON é validado antes de renderizar
Sandbox — Widgets rodam em contexto controlado

Limitações Atuais

Estado alfa — v0.8, sujeito a mudanças
Catálogo limitado — Widgets disponíveis são pré-definidos
Tokens extras — System prompt consome 3-5k tokens
Latência — Geração de UI é mais lenta que texto simples

GenUI vs Chatbots Tradicionais

Chatbot — "Aqui estão os celulares: iPhone, Samsung, Xiaomi..."
GenUI — Mostra cards visuais com imagem, preço e botão de compra

A experiência do usuário é significativamente superior com GenUI.

Conclusão

O GenUI representa o futuro da interação entre IA e interfaces. Em vez de apenas ler texto, os usuários poderão interagir com UIs dinâmicas geradas por IA em tempo real. Embora ainda esteja em fase alfa, o potencial é enorme para aplicativos de e-commerce, dashboards, assistentes virtuais e muito mais.

O que você acha da ideia de IA gerando interfaces? Já pensou em usar no seu app? Compartilhe nos comentários!