scaffold-genui

Scaffold Flutter GenUI Feature

Creates a Flutter GenUI conversational UI feature module in an existing Flutter project.

Feature name: $ARGUMENTS (default to "gen-ui-chat" if not provided)

Pre-requisites

1. Read the flutter-genui skill (SKILL.md and all reference/*.md files) for SDK concepts, catalog design, security rules, and state binding patterns.
2. Read the flutter-mobile skill's reference/flutter-conventions.md for Flutter coding standards.
3. Verify Flutter/Dart APIs using dart-mcp-server MCP or Context7 MCP before using any API.

Steps

1. Add GenUI dependencies to pubspec.yaml

   dependencies:
     genui:
       git:
         url: https://github.com/flutter/genui.git
         path: packages/genui
     genui_a2a:
       git:
         url: https://github.com/flutter/genui.git
         path: packages/genui_a2a
     intl: ^0.19.0          # for A2UIFunctionEvaluator formatting
     url_launcher: ^6.3.0   # for openUrl function
   

2. Create feature folder structure

   lib/features/<name>/
   ├── models/
   │   └── gen_ui_message.dart          # ChatMessage, SurfaceState models
   ├── services/
   │   └── gen_ui_agent_service.dart    # SSE transport + Conversation setup
   ├── widgets/
   │   ├── gen_ui_renderer.dart         # SurfaceController + rendering logic
   │   ├── widget_catalog.dart          # Catalog with all registered CatalogItems
   │   ├── widget_types.dart            # Custom widget builders
   │   └── a2ui_function_evaluator.dart # Declarative functions evaluator
   ├── screens/
   │   └── gen_ui_chat_screen.dart      # Chat screen with history + GenUI surfaces
   └── <name>_page.dart                 # Lazy-loaded page entry point
   

3. Create models (gen_ui_message.dart)

   • ChatMessage — role (user/assistant), text content, optional surfaceId
   • GenUIState — message history, loading flag, error state Use Riverpod StateNotifier or AsyncNotifier for state management.