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

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: flai          # Where FlAI files live under lib/
components:               # Installed components (auto-managed)
  - chat_screen
  - message_bubble
  - input_bar
  - typing_indicator

The CLI reads this file to know where to place new components and which components are already installed.

⚡

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

Previous ← Getting Started Next Theming →