FlAI / Getting Started

Getting Started

Get up and running with FlAI in under 2 minutes. Install the CLI, initialize your project, and add your first component.

Prerequisites

Quick Start

Install the FlAI CLI

The CLI handles component installation, initialization, and updates.

$ dart pub global activate flai_cli

Initialize FlAI in your project

This creates the core theme system, models, and provider interface in your project.

$ flai init

This generates:

  • lib/flai/core/theme/ — FlaiTheme, FlaiColors, FlaiTypography, FlaiSpacing, FlaiRadius
  • lib/flai/core/models/ — Message, Conversation, ChatEvent, ChatRequest
  • lib/flai/providers/ — Abstract AiProvider interface
  • lib/flai/flai.dart — Barrel export file

Add your first component

Install the full chat screen (includes message bubble, input bar, and typing indicator).

$ flai add chat_screen

Basic Usage

Wrap your app (or a subtree) with FlaiTheme and use the components:

import 'package:flutter/material.dart';
import 'package:my_app/flai/flai.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FlaiTheme(
        data: FlaiThemeData.dark(),
        child: Scaffold(
          body: FlaiChatScreen(
            controller: ChatScreenController(
              provider: myAiProvider,
            ),
            title: 'AI Assistant',
            subtitle: 'Claude 3.5 Sonnet',
          ),
        ),
      ),
    );
  }
}

Project Structure

After initialization and adding components, your project will look like:

lib/
  flai/
    core/
      theme/
        flai_theme.dart
        flai_colors.dart
        flai_typography.dart
        flai_spacing.dart
        flai_radius.dart
      models/
        message.dart
        conversation.dart
        chat_event.dart
        chat_request.dart
    providers/
      ai_provider.dart
    components/
      chat_screen/
        chat_screen.dart
        chat_screen_controller.dart
      message_bubble/
        message_bubble.dart
      input_bar/
        input_bar.dart
      typing_indicator/
        typing_indicator.dart
    flai.dart

What's Next?

Next Installation →