fl_select_genui 0.2.0 copy "fl_select_genui: ^0.2.0" to clipboard
fl_select_genui: ^0.2.0 copied to clipboard

GenUI SDK (A2UI) integration for fl_select: ready-made CatalogItems so AI agents can render fl_select selection components in chat and get selections back as structured query data.

GenUI SDK (A2UI) integration for fl_select: exposes fl_select components as CatalogItems so conversational AI agents can render real, interactive selection UIs inside chat surfaces — and receive the user's selections back as structured query data.

agent ──JSON payload──▶ Select (fl_select UI) ──selection──▶ Map<String, List<String>>

How it works #

  1. You register [FlSelectCatalogItems.asCatalog()] (or .all) with your GenUI SurfaceController alongside the basic catalog.
  2. Your agent's system prompt includes [FlSelectCatalogItems.systemPromptFragment], which teaches it the Select vocabulary.
  3. When the user needs to pick values, the agent emits a Select payload — a delegate (list / grid / wrap / cascading / tabNav / sideNav / expandable) plus an entries tree authored in the SelectEntryCodec JSON format.
  4. The user interacts with a real fl_select component; selections are written back to the GenUI data model at <id>.value as a Map<String, List<String>> (same shape as fl_select's toQueryMap), ready for the next agent turn or your query layer.

Invalid agent payloads render an inline error card instead of crashing.

Usage #

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

final controller = SurfaceController(
  catalogs: [
    BasicCatalogItems.asCatalog().copyWith(
      newItems: FlSelectCatalogItems.all,
    ),
  ],
);

// System prompt:
FlSelectCatalogItems.systemPromptFragment;

See example/ for an end-to-end demo of the payload → render → write-back loop.

Entry tree format #

{"type": "category", "id": "price", "name": "Price", "children": [
  {"type": "any", "name": "Any"},
  {"type": "range", "id": "0-100", "name": "$0 - $100", "min": 0, "max": 100},
  {"type": "custom", "name": "Custom", "min": 0, "max": 1000}
]}

Node types: category (group, optional selectionMode / layout), text (option or sub-branch), range (slider), any (reset sentinel), custom (user-typed range). See SelectEntrySchema for the generated JSON Schema and FlSelectCatalogItems.systemPromptFragment for the agent-facing documentation.

1
likes
0
points
483
downloads

Publisher

verified publisherzeaon.dev

Weekly Downloads

GenUI SDK (A2UI) integration for fl_select: ready-made CatalogItems so AI agents can render fl_select selection components in chat and get selections back as structured query data.

Repository (GitHub)
View/report issues

Topics

#genui #select #multiselect #dropdown #a2ui

License

unknown (license)

Dependencies

fl_select, flutter, genui, json_schema_builder

More

Packages that depend on fl_select_genui