genui_button #

A GenUI-compatible button widget package, giving AI agents the ability to generate highly styled buttons connected to your app's interactions.

Features #

• Provides a GenUIButton widget defined as a GenUI CatalogItem.
• New UI Customizations: Supports background color, foreground color, border radius, padding, elevation, and font size adjustments.
• Material Styles: Supports elevated, filled, outlined, and text visual button types.
• Integrates flawlessly with genui properties to accept a label string and action ID payload.
• Out-of-the-box UserActionEvent triggering when tapping.

Getting started #

In your pubspec.yaml, add the dependency:

dependencies:
  flutter:
    sdk: flutter
  genui_button: ^0.0.2

Usage #

Simply register genUiButton with your GenUI catalogues:

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

final a2uiMessageProcessor = A2uiMessageProcessor(
  catalogs: [
    CoreCatalogItems.asCatalog().copyWith([genUiButton])
  ],
);

Then your FirebaseAiContentGenerator (or similar generator) system instruction can tell the agent to use GenUIButton globally.

final contentGenerator = FirebaseAiContentGenerator(
  systemInstruction: 'Use GenUIButton to provide user actions with custom styling.',
  additionalTools: a2uiMessageProcessor.getTools(),
);

Whenever the agent generates a UI containing a button, it can trigger UserActionEvent actions back to the app logic that you configure.

The AI can also deeply customize the button's look dynamically using the schema:

• type: elevated, filled, outlined, text
• backgroundColor: #FF5733
• foregroundColor: #FFFFFF
• borderRadius: 8.0
• elevation: 4.0
• padding: 16.0
• fontSize: 18.0

Example #

See the example/ folder for a more comprehensive Flutter project demonstrating how genui_button parses styling under the hood.