Flutter GenUI SDK: AI-Powered Dynamic UI Generation

GenUI is Flutter official SDK for generative UI — letting AI models create Flutter widgets dynamically at runtime. Instead of pre-building every possible screen, GenUI generates UI on-demand from natural language prompts.

What is GenUI?

GenUI bridges AI language models and Flutter widgets. You describe what you want in natural language, and GenUI generates the corresponding widget tree:

import 'package:genui/genui.dart';

// Generate UI from a prompt
final surface = await GenUI.generate(
  prompt: 'A card showing today\'s weather with temperature and icon',
);

The model returns a widget tree that GenUI renders inside a SurfaceController.

Core architecture

GenUI’s architecture separates concerns cleanly:

Natural Language Prompt
        ↓
   A2UI Protocol
        ↓
  TransportAdapter
        ↓
  DataModel (state)
        ↓
  Widget Catalog
        ↓
  SurfaceController (render)

SurfaceController

The SurfaceController manages rendered surfaces:

class WeatherScreen extends StatefulWidget {
  @override
  _WeatherScreenState createState() => _WeatherScreenState();
}

class _WeatherScreenState extends State<WeatherScreen> {
  final SurfaceController _controller = SurfaceController();

  @override
  Widget build(BuildContext context) {
    return Surface(
      controller: _controller,
      placeholder: CircularProgressIndicator(),
    );
  }

  void _updateWeather(String data) async {
    await _controller.update(
      prompt: 'Update weather display: $data',
    );
  }
}

The Surface widget displays the generated UI and updates when the controller receives new data.

DataModel for reactive UI

The DataModel holds the state that generated widgets can access:

final dataModel = DataModel({
  'temperature': 72,
  'condition': 'sunny',
  'city': 'San Francisco',
});

final surface = await GenUI.generate(
  prompt: 'Weather card',
  dataModel: dataModel,
);

// Update data, UI re-renders
dataModel.update({'temperature': 68});

Changes to DataModel automatically trigger widget rebuilds.

Widget Catalog

GenUI includes a catalog of pre-built widgets that the AI can compose:

// The catalog includes standard Flutter widgets
final catalog = WidgetCatalog(
  widgets: [
    CardWidget(),
    TextWidget(),
    IconWidget(),
    ButtonWidget(),
    ImageWidget(),
    ListViewWidget(),
    // ... hundreds more
  ],
);

The AI model selects widgets from this catalog based on your prompt.

TransportAdapter pattern

The TransportAdapter handles communication with AI backends:

// Firebase AI Logic adapter
final adapter = FirebaseAIAdapter(
  model: 'gemini-2.0-flash',
);

// Custom adapter
class MyAdapter extends TransportAdapter {
  @override
  Future<A2UIResponse> send(A2UIRequest request) async {
    // Call your AI backend
    final response = await http.post(
      Uri.parse('https://api.example.com/genui'),
      body: request.toJson(),
    );
    return A2UIResponse.fromJson(jsonDecode(response.body));
  }
}

Async A2UI caching

GenUI caches generated UI to avoid redundant AI calls:

final surface = await GenUI.generate(
  prompt: 'Product card for SKU-123',
  cacheKey: 'product-SKU-123', // Cache this generation
);

// Subsequent calls with same cacheKey use cached result
final cached = await GenUI.generate(
  prompt: 'Product card for SKU-123',
  cacheKey: 'product-SKU-123',
);

Firebase AI Logic integration

GenUI works seamlessly with Firebase AI Logic:

final genui = GenUI(
  adapter: FirebaseAIAdapter(
    model: 'gemini-2.0-flash',
    firebaseApp: FirebaseAI.instance,
  ),
);

final surface = await genui.generate(
  prompt: 'Dashboard with sales chart and recent orders',
);

Custom agent adapters

Build custom adapters for specialized AI agents:

class CustomAgentAdapter extends TransportAdapter {
  @override
  Future<A2UIResponse> send(A2UIRequest request) async {
    // Route to different models based on prompt content
    if (request.prompt.contains('chart')) {
      return await _chartAgent(request);
    }
    return await _generalAgent(request);
  }
}

Real-world use cases

E-commerce: Generate product pages dynamically based on inventory data.

Dashboards: Create custom dashboards from natural language descriptions.

Onboarding: Generate personalized onboarding flows per user segment.

Prototyping: Rapidly prototype UI ideas without writing code.

Getting started

# pubspec.yaml
dependencies:
  genui: ^0.10.0
  firebase_ai: ^1.0.0

import 'package:genui/genui.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();

  runApp(MyApp());
}

GenUI represents a paradigm shift: instead of building every possible UI upfront, you let AI generate it on-demand. The implications for rapid prototyping, personalization, and dynamic content are enormous.