genai_components
Flutter component library with built-in routing, auth, AI assistant, theme system, and 40+ UI widgets. Used as the foundation for enterprise Flutter web apps.
Installation
dependencies:
genai_components: ^4.0.0
flutter pub get
Quick Start — Full App Bootstrap
The recommended way is to extend CLAppConfig and let CLApp handle initialization, routing, auth, providers and theming:
import 'package:genai_components/genai_components.dart';
void main() {
runApp(CLApp(config: MyAppConfig()));
}
class MyAppConfig extends CLAppConfig {
@override
String get appName => 'My App';
@override
String get baseUrl => 'https://api.myapp.com/api/';
@override
String get oidcEndpoint => 'https://auth.myapp.com/oidc';
@override
CLAuthState get authState => MyAuthState();
@override
String get initialRoute => '/home';
@override
String get authRoute => '/auth';
@override
List<ModularRoute> get preAuthRoutes => [
ModuleRoute(module: AuthModule(), isVisible: false),
];
@override
List<ModularRoute> get shellRoutes => [
ModuleRoute(module: HomeModule(), isVisible: true),
ModuleRoute(module: SettingsModule(), isVisible: true),
];
}
Routing — GoRouterModular
Module-based routing wrapping GoRouter:
class HomeModule extends Module {
@override
CLRoute get moduleRoute => HomeRoutes.moduleRoute;
@override
List<ModularRoute> get routes => [
ChildRoute(
route: HomeRoutes.moduleRoute,
builder: (context, state) => HomeView.builder(context),
),
];
}
MVVM — CLBaseViewModel
class HomeViewModel extends CLBaseViewModel {
List<Item> items = [];
@override
Future<void> initialize() async {
setBusy(true);
final response = await ApiManager.make(
callName: 'getItems',
apiUrl: ApiEndpoints.items,
callType: ApiCallType.GET,
);
if (response.succeeded) {
items = (response.jsonBody['data'] as List)
.map((e) => Item.fromJson(e))
.toList();
}
setBusy(false);
}
}
Theme
// Read anywhere in the widget tree
final theme = CLTheme.of(context);
Text('Hello', style: theme.heading1);
Container(color: theme.primary);
Icon(Icons.star, color: theme.warning);
Custom theme via CLThemeProvider:
ChangeNotifierProvider(
create: (_) => CLThemeProvider(
lightTheme: const LightModeTheme(
primary: Color(0xFF6366F1),
secondary: Color(0xFF4F46E5),
success: Color(0xFF16A34A),
danger: Color(0xFFDC2626),
),
darkTheme: const DarkModeTheme(
primary: Color(0xFF818CF8),
),
),
child: MaterialApp(...),
)
UI Components
| Category | Components |
|---|---|
| Buttons | CLButton, CLSoftButton, CLGhostButton, CLOutlineButton |
| Forms | CLTextField, CLDropdown, CLCheckbox, CLFilePicker, CLDateInput, CLTimeInput |
| Data | PagedDataTable, CLPagination, CLMonthCalendar |
| Charts | CLBarChart, CLPieChart, CLSplineChart, CLAreaChart |
| Layout | CLCard, CLContainer, CLSectionCard, CLPageHeader, CLResponsiveGrid |
| Feedback | CLAlert, CLInfoBanner, CLShimmer, CLLifecycleProgress |
| Media | CLMediaViewer, CLPdfViewer, CLVideoPlayer |
| Complex | CLOrgChart, CLSurvey, CLAiAssistant, CLAnnouncement, CLFaq |
| Misc | CLTabs, CLPill, CLStatusBadge, CLRoleBadge, CLPopupMenu, Avatar |
AI Assistant
Built-in LLM-powered assistant with tool calling, voice input and navigation:
AiAssistantConfig(
provider: OpenAiProvider(
apiKey: 'YOUR_KEY',
model: 'gpt-4o',
),
assistantName: 'My Assistant',
voiceEnabled: true,
knownRoutes: ['home', 'settings'],
navigateToRoute: (route) async => GoRouter.of(context).go('/$route'),
globalContextProvider: () async => {
'userName': authState.currentUser?.name,
'locale': 'it_IT',
},
)
Local Development
Use the cl CLI tool to work on the library inside a consumer project:
# Bootstrap (first time in a new project)
curl -fsSL https://raw.githubusercontent.com/GenerazioneAI-SRL/genai_components/stable/cl -o ./cl && chmod +x ./cl
./cl dev # Clone genai_components locally and link it
./cl push "msg" # Commit + push changes to GitHub
./cl release patch # Bump version → push → publish to pub.dev
./cl prod # Remove local clone, use pub.dev version
./cl status # Show current mode
License
MIT — see LICENSE
Libraries
- cl_theme
- core_models/app_error.model
- core_models/languages.model
- core_models/media.model
- core_models/notification.model
- core_models/upload_file.model
- enums/message_role.enum
- enums/resource_type.enum
- enums/tool_name.enum
- genai_components
- CL Components — UI component library for Generazione AI projects.
- layout/constants/sizes.constant
- main
- utils/download_extension_io
- utils/models/custom_model.model
- utils/models/pagination.model
- utils/providers/cl_theme.provider
- widgets/alertmanager/alert_manager
- widgets/animation_trigger
- widgets/avatar.widget
- widgets/buttons/cl_action_chip.widget
- widgets/buttons/cl_action_text.widget
- widgets/buttons/cl_compact_action_scope
- widgets/buttons/cl_confirm_dialog
- widgets/buttons/cl_loading_spinner.widget
- widgets/charts/cl_bar_chart.widget
- widgets/cl_ai_assistant/flutter_ai_assistant
- Drop-in AI assistant for any Flutter app.
- widgets/cl_ai_assistant/src/action/action_executor
- widgets/cl_ai_assistant/src/action/executors/input_executor
- widgets/cl_ai_assistant/src/action/executors/node_finder
- widgets/cl_ai_assistant/src/action/executors/scroll_executor
- widgets/cl_ai_assistant/src/action/executors/semantics_action_runner
- widgets/cl_ai_assistant/src/action/executors/stepper_executor
- widgets/cl_ai_assistant/src/action/executors/tap_executor
- widgets/cl_ai_assistant/src/action/scroll_handler
- widgets/cl_ai_assistant/src/context/context_cache
- widgets/cl_ai_assistant/src/context/context_invalidator
- widgets/cl_ai_assistant/src/context/route_discovery
- widgets/cl_ai_assistant/src/context/screen_context
- widgets/cl_ai_assistant/src/context/screenshot_capture
- widgets/cl_ai_assistant/src/context/semantics_walker
- widgets/cl_ai_assistant/src/core/ai_assistant
- widgets/cl_ai_assistant/src/core/ai_assistant_config
- widgets/cl_ai_assistant/src/core/ai_assistant_controller
- widgets/cl_ai_assistant/src/core/ai_conversation_store
- widgets/cl_ai_assistant/src/core/ai_event
- Comprehensive analytics event system for the AI Assistant.
- widgets/cl_ai_assistant/src/core/ai_logger
- widgets/cl_ai_assistant/src/llm/conversation_memory
- widgets/cl_ai_assistant/src/llm/internal/agent_heuristics
- widgets/cl_ai_assistant/src/llm/internal/agent_messages
- widgets/cl_ai_assistant/src/llm/internal/manifest_section
- widgets/cl_ai_assistant/src/llm/internal/prompt_sections
- widgets/cl_ai_assistant/src/llm/internal/system_prompt_builder
- widgets/cl_ai_assistant/src/llm/llm_provider
- widgets/cl_ai_assistant/src/llm/providers/claude_provider
- widgets/cl_ai_assistant/src/llm/providers/gemini_provider
- widgets/cl_ai_assistant/src/llm/providers/openai_provider
- widgets/cl_ai_assistant/src/llm/react_agent
- widgets/cl_ai_assistant/src/manifest/ai_action_manifest
- widgets/cl_ai_assistant/src/manifest/ai_app_manifest
- widgets/cl_ai_assistant/src/manifest/ai_element_manifest
- widgets/cl_ai_assistant/src/manifest/ai_flow_manifest
- widgets/cl_ai_assistant/src/manifest/ai_screen_manifest
- widgets/cl_ai_assistant/src/manifest/ai_section_manifest
- widgets/cl_ai_assistant/src/manifest/manifest
- widgets/cl_ai_assistant/src/models/action_step
- widgets/cl_ai_assistant/src/models/agent_action
- widgets/cl_ai_assistant/src/models/app_context_snapshot
- widgets/cl_ai_assistant/src/models/chat_content
- widgets/cl_ai_assistant/src/models/chat_message
- widgets/cl_ai_assistant/src/models/ui_element
- widgets/cl_ai_assistant/src/tools/built_in_tools
- widgets/cl_ai_assistant/src/tools/tool_definition
- widgets/cl_ai_assistant/src/tools/tool_registry
- widgets/cl_ai_assistant/src/tools/tool_result
- widgets/cl_ai_assistant/src/ui/action_feed_overlay
- widgets/cl_ai_assistant/src/ui/chat_bubble
- widgets/cl_ai_assistant/src/ui/chat_overlay
- widgets/cl_ai_assistant/src/ui/handoff_indicator
- widgets/cl_ai_assistant/src/ui/markdown_text
- widgets/cl_ai_assistant/src/ui/response_popup
- widgets/cl_ai_assistant/src/voice/voice_input_service
- widgets/cl_ai_assistant/src/voice/voice_output_service
- widgets/cl_ai_assistant/ui/cl_ai_assistant.widget
- widgets/cl_ai_assistant_dialog.widget
- widgets/cl_alert.widget
- widgets/cl_announcement/cl_announcement_widget
- widgets/cl_announcement/cl_announcemet.model
- widgets/cl_calendar.widget
- widgets/cl_card.widget
- widgets/cl_checkbox.widget
- widgets/cl_clipboard.widget
- widgets/cl_code_text.widget
- widgets/cl_collapsible.widget
- widgets/cl_command/cl_command.widget
- widgets/cl_command/cl_command_item.model
- widgets/cl_command/cl_global_search.widget
- widgets/cl_container.widget
- widgets/cl_date_picker.widget
- widgets/cl_dialog.widget
- widgets/cl_divider.widget
- widgets/cl_dropdown/cl_dropdown
- widgets/cl_dropdown/cl_dropdown_registry
- widgets/cl_dropdown/dropdown_state
- widgets/cl_empty_state.widget
- widgets/cl_entity_tabs/cl_entity_tabs.widget
- widgets/cl_entity_tabs/entity_domain
- widgets/cl_entity_tabs/entity_tab.model
- widgets/cl_error_page.widget
- widgets/cl_faq/cl_faq
- widgets/cl_faq/models/cl_faq.model
- widgets/cl_faq/models/cl_faq_category.model
- widgets/cl_file_picker.widget
- widgets/cl_input_group.widget
- widgets/cl_label_value.widget
- widgets/cl_lifecycle_progress.widget
- widgets/cl_media_attach.widget
- widgets/cl_media_viewer.widget
- widgets/cl_metric_card.widget
- widgets/cl_month_calendar.widget
- widgets/cl_org_chart/org_chart
- widgets/cl_org_chart/src/base/base_controller
- widgets/cl_org_chart/src/base/base_graph
- widgets/cl_org_chart/src/base/base_graph_constants
- widgets/cl_org_chart/src/base/edge_painter_utils
- widgets/cl_org_chart/src/common/custom_animated_positioned
- widgets/cl_org_chart/src/common/exporting
- widgets/cl_org_chart/src/common/node
- widgets/cl_org_chart/src/common/node_builder_details
- widgets/cl_org_chart/src/common/quadtree
- widgets/cl_org_chart/src/common/quadtree_constants
- widgets/cl_org_chart/src/genogram/edge_painter
- widgets/cl_org_chart/src/genogram/genogram
- widgets/cl_org_chart/src/genogram/genogram_constants
- widgets/cl_org_chart/src/genogram/genogram_controller
- widgets/cl_org_chart/src/genogram/genogram_edge_config
- widgets/cl_org_chart/src/genogram/genogram_enums
- widgets/cl_org_chart/src/genogram/marriage_style
- widgets/cl_org_chart/src/orgchart/edge_painter
- widgets/cl_org_chart/src/orgchart/mixins/node_modification_mixin
- widgets/cl_org_chart/src/orgchart/mixins/node_positioning_mixin
- widgets/cl_org_chart/src/orgchart/mixins/node_query_mixin
- widgets/cl_org_chart/src/orgchart/org_chart
- widgets/cl_org_chart/src/orgchart/org_chart_constants
- widgets/cl_org_chart/src/orgchart/org_chart_controller
- widgets/cl_pagination.widget
- widgets/cl_pdf_viewer.widget
- widgets/cl_pill.widget
- widgets/cl_popup_surface.widget
- widgets/cl_progress.widget
- widgets/cl_responsive_grid/flutter_responsive_flex_grid
- widgets/cl_role_badge.widget
- widgets/cl_section_card.widget
- widgets/cl_separator.widget
- widgets/cl_sheet.widget
- widgets/cl_shimmer.widget
- widgets/cl_skeleton.widget
- widgets/cl_status_badge.widget
- widgets/cl_summary_stat_card.widget
- widgets/cl_survey/answer_choice_widget
- widgets/cl_survey/cl_survey_builder.widget
- widgets/cl_survey/cl_survey_result_viewer.widget
- widgets/cl_survey/cl_survey_viewer.widget
- widgets/cl_survey/models/option
- widgets/cl_survey/models/question
- widgets/cl_survey/models/question_result
- widgets/cl_survey/question_card
- widgets/cl_survey/survey
- widgets/cl_survey/survey.state
- widgets/cl_survey/survey_form_field
- widgets/cl_tabs/cl_tab_item.model
- widgets/cl_tabs/cl_tab_view.widget
- widgets/cl_text_field.widget
- widgets/cl_title.widget
- widgets/cl_toast.widget
- widgets/cl_tooltip_wrapper.widget
- widgets/cl_universal_repeatable.widget
- widgets/cl_view_toggle.widget
- widgets/customexpansiontile.widget
- widgets/detail_element.widget
- widgets/dialogs/_dialog_chrome
- widgets/dialogs/assign_entities_modal
- widgets/dialogs/confirmation_dialog
- widgets/dialogs/qr_code_dialog
- widgets/excerpt_text.widget
- widgets/formatters/date_mask_formatter
- widgets/foundation/cl_focus_ring
- widgets/foundation/cl_pressable.widget
- widgets/foundation/cl_surface.widget
- widgets/foundation/cl_tone_style
- widgets/gradient_background.widget
- widgets/layout/cl_adaptive_shell.widget
- widgets/layout/cl_bottom_bar.widget
- widgets/layout/cl_destination
- widgets/layout/cl_page_container.widget
- widgets/layout/cl_responsive_grid_shadcn.widget
- widgets/layout/cl_responsive_stack.widget
- widgets/layout/cl_shell_config
- widgets/layout/cl_shell_slots
- widgets/loading.widget
- widgets/logo.widget
- widgets/page_with_header_spacing.widget
- widgets/paged_datatable/column_builders
- widgets/paged_datatable/paged_datatable
- widgets/stats.widget
- widgets/table_action_item.widget
- widgets/textfield_validator
- widgets/time_input_field.widget
- widgets/video_player.widget