This application is a minimal example of how to use the genui package to create a simple, conversational chat application.

The main goal of this example is to demonstrate the fundamental concepts of genui in a straightforward chat context. It shows how to:

1. Initialize and use the GenUiConversation, the primary facade for the package.
2. Provide a simple system prompt to guide the AI's behavior.
3. Send user messages to the AI and receive responses.
4. Handle the creation of new UI "surfaces" generated by the AI.
5. Render these dynamic UI surfaces within a standard chat message list.
6. Manage a conversation history that interleaves user text messages with AI-generated UI responses.
7. Support multiple AI backends (Firebase AI or Google Generative AI).

Unlike more complex examples, this app does not define a custom widget catalog. Instead, it relies on the default coreCatalog provided by genui, meaning the AI can only respond with basic widgets like Text, Column, ElevatedButton, etc.

The application's logic is contained almost entirely within lib/main.dart.

1. Initialization: A GenUiConversation is created with a simple system prompt instructing it to act as a helpful assistant. It's configured with an onSurfaceAdded callback.
2. User Input: The user types a message into a TextField and hits send.
3. Sending the Message:
   • The user's text is immediately added to the local message list and displayed on screen as a simple text message (e.g., "You: Hello").
   • The genUiConversation.sendRequest() method is called with the user's text wrapped in a UserMessage.
4. AI Response:
   • The GenUiConversation sends the conversation history to the configured ContentGenerator (either FirebaseAiContentGenerator or GoogleGenerativeAiContentGenerator).
   • The AI model processes the prompt and generates A2uiMessages (like SurfaceUpdate, BeginRendering).
   • These messages are emitted on the ContentGenerator.a2uiMessageStream.
5. UI Rendering:
   • GenUiConversation listens to the stream and processes the A2uiMessages, invoking the appropriate callbacks like onSurfaceAdded.
   • The _handleSurfaceAdded callback adds a new message item to the list, containing the surfaceId.
   • The ListView rebuilds, and a GenUiSurface widget is rendered for the AI's message, dynamically building the UI based on the UiDefinition managed by A2uiMessageProcessor.

This example supports two AI backends: Google Generative AI (default) and Firebase AI. Choose the option that best fits your needs.

⚠️ Warning: This option is for demo purposes only. For production applications, use Firebase AI (Option 2) which provides better security, quota management, and production-ready infrastructure.

1. Get an API Key: Obtain a Google Cloud API key with access to the Generative Language API from the Google AI Studio.

2. Run the App: Pass your API key as a Dart environment variable when running the app:

   flutter run -d <device> --dart-define=GEMINI_API_KEY=your_api_key

   Or set it as an environment variable and reference it:

   export GEMINI_API_KEY=your_api_key_here flutter run -d <device> --dart-define=GEMINI_API_KEY=$GEMINI_API_KEY

1. Configure Firebase: Follow the instructions in the main genui package README.md to add Firebase to your Flutter app. You will need to:

   • Set up a Firebase project
   • Generate a firebase_options.dart file using the FlutterFire CLI. You can run sh tool/refresh_firebase.sh <project_id> from the repo root to help you set this up.

2. Switch the Backend: In lib/configuration.dart, change the aiBackend constant to use Firebase:

   const AiBackend aiBackend = AiBackend.firebase;

3. Run the App:

   flutter run -d <device>

To switch backends, modify the aiBackend constant in lib/configuration.dart:

• AiBackend.googleGenerativeAi (default) - Uses Google Generative AI with an API key
• AiBackend.firebase - Uses Firebase AI