Installation

Install the FlAI CLI and add components to your Flutter project. Two approaches: CLI (recommended) or manual.

CLI Installation

The FlAI CLI is the recommended way to install components. It handles dependencies, file placement, and import resolution.

Install the CLI

$ dart pub global activate flai_cli

ⓘ

Make sure ~/.pub-cache/bin is in your PATH. Run dart pub global list to verify the installation.

Initialize Your Project

Run flai init in your Flutter project root. This installs the core theme system, data models, and provider interface.

$ flai init

The CLI will ask you for an output directory (default: flai). Files are placed under lib/{output_dir}/.

Add Components

Install individual components with flai add:

# Add a single component
flai add message_bubble

# Add multiple components
flai add chat_screen input_bar streaming_text

# Add a provider
flai add openai_provider

Available Components

Component	Command	Description
chat_screen	`flai add chat_screen`	Full-page chat screen
message_bubble	`flai add message_bubble`	Chat message bubble
input_bar	`flai add input_bar`	Chat input with send button
streaming_text	`flai add streaming_text`	Real-time streaming text
typing_indicator	`flai add typing_indicator`	AI typing animation
tool_call_card	`flai add tool_call_card`	Tool/function call card
code_block	`flai add code_block`	Syntax-highlighted code
thinking_indicator	`flai add thinking_indicator`	AI thinking panel
citation_card	`flai add citation_card`	Source citation card
image_preview	`flai add image_preview`	Image preview with expand
conversation_list	`flai add conversation_list`	Conversation history list
model_selector	`flai add model_selector`	AI model dropdown
token_usage	`flai add token_usage`	Token usage display
openai_provider	`flai add openai_provider`	OpenAI API provider
anthropic_provider	`flai add anthropic_provider`	Anthropic API provider
Flows
auth_flow	`flai add auth_flow`	Login, register, forgot password, verification, reset (6 screens)
onboarding_flow	`flai add onboarding_flow`	Splash, naming, multi-select pills, reveal animation
chat_experience	`flai add chat_experience`	Composer with voice, model selector, attachments, ghost mode
sidebar_nav	`flai add sidebar_nav`	Drawer, conversation list with grouping, settings sheet
app_scaffold	`flai add app_scaffold`	Complete app shell (installs all above + generates main.dart)

Manual Installation

If you prefer not to use the CLI, you can copy component files directly from the FlAI repository.

Clone the repository

git clone https://github.com/getflai-dev/flai.git

Copy core files

Copy bricks/flai_init/__brick__/lib/flai/ into your project's lib/flai/ directory.

Copy components

Copy individual component folders from bricks/{component}/__brick__/lib/flai/components/ into lib/flai/components/.

Update imports

Adjust import paths to match your project's package name and directory structure.

Configuration

After running flai init, a flai.yaml file is created in your project root:

# flai.yaml
output_dir: lib/flai       # Where FlAI files live
theme: dark                # Theme preset (dark, light, ios, premium)
app_name: My App           # Application display name
assistant_name: Assistant  # AI assistant display name
installed:                 # Installed components (auto-managed)
  - flai_init
  - auth_flow
  - app_scaffold

The CLI reads this file to place components, generate main.dart with your branding, and track installed bricks.

Connect a Backend

After installing app_scaffold, connect to a production backend:

flai connect cmmd     # Rewrites main.dart with CMMD providers

This generates provider implementations and rewrites main.dart to use real authentication, AI streaming, conversation persistence, and voice — zero manual wiring.

⚡

You can change output_dir during flai init. For example, use ui/chat to install under lib/ui/chat/.

Previous ← Getting Started Next Theming →