App Scaffolds

Generate complete, ready-to-run Flutter apps with AI chat built in. Choose from a single-screen chat or a full multi-screen app with auth, settings, and conversation history.

Overview

App scaffolds go beyond individual components. Instead of assembling pieces one by one, scaffolds generate an entire working app structure in one command. They include routing, state management wiring, and all the FlAI components pre-connected.

There are two scaffold levels:

Level	Command	Description
Basic	flai scaffold basic	Single chat screen with provider, theme, and input bar wired up
Full App	flai scaffold app	Multi-screen app with auth, chat list, settings, profile, and chat screen

Level 1: Basic Scaffold

The basic scaffold generates a minimal single-screen chat app. It is the fastest way to get a working AI chat interface running.

What's included

• FlaiTheme wrapper with the dark preset applied
• FlaiChatScreen with a ChatScreenController pre-wired
• FlaiInputBar connected to send messages
• MessageBubble for user and assistant messages
• TypingIndicator shown while the AI responds
• A configurable AI provider placeholder (swap in OpenAI or Anthropic)

Generated structure

lib/
  main.dart                  ← Entry point with FlaiTheme
  flai/
    core/                    ← Theme, models, provider interface
    components/
      chat_screen/
      message_bubble/
      input_bar/
      typing_indicator/
    providers/
      ai_provider.dart
    flai.dart

Running it

After scaffolding, run the app with your API key:

You get a single screen with a chat header, scrolling message list, and input bar at the bottom. The AI responds in real time with streaming text.

Level 2: Full App Scaffold

The full app scaffold generates a complete multi-screen application with navigation, authentication, and persistent conversation history.

What's included

• Everything from the basic scaffold, plus:
• Auth screen — Sign in / sign up flow with email and password fields
• Conversation list — Browse and search past conversations, create new ones
• Chat screen — Full chat with streaming, tool calls, thinking indicator, and citations
• Settings screen — Theme toggle (light/dark), model selection, API key configuration
• Profile screen — User info display and sign-out
• Navigation — Bottom tab bar or drawer-based routing between screens
• Model selector — Switch between AI models at runtime
• Token usage display — Track input/output tokens and estimated cost

Generated structure

lib/
  main.dart                          ← Entry point with routing
  app/
    router.dart                      ← App navigation / routing
    auth/
      auth_screen.dart               ← Sign in / sign up
      auth_controller.dart
    home/
      home_screen.dart               ← Tab container
    settings/
      settings_screen.dart           ← Theme, model, API key config
    profile/
      profile_screen.dart            ← User info, sign out
  flai/
    core/                            ← Theme, models, provider interface
    components/
      chat_screen/
      message_bubble/
      input_bar/
      streaming_text/
      typing_indicator/
      thinking_indicator/
      tool_call_card/
      citation_card/
      code_block/
      conversation_list/
      model_selector/
      token_usage/
    providers/
      ai_provider.dart
      openai_provider.dart
    flai.dart

Screen by screen

Auth Screen

A clean sign-in/sign-up form styled with FlAI theme tokens. Includes email and password fields, a submit button, and a toggle between sign-in and sign-up modes. Wired to an AuthController you can connect to Firebase, Supabase, or any auth backend.

Conversation List

Displays all past conversations with titles, timestamps, and a search bar. Tap to resume a conversation or tap the new-chat button to start fresh. Uses the FlaiConversationList component.

Chat Screen

The main chat interface with all the bells and whistles: streaming text, thinking indicator for reasoning models, tool call cards, citation cards, code blocks with syntax highlighting, and the input bar with attachment support.

Settings Screen

Lets the user toggle between light and dark themes, select an AI model from the model selector, and configure their API key. All preferences persist locally.

Profile Screen

Shows user info (name, email) and provides a sign-out button. Designed to be extended with subscription or usage-tracking features.

Customization

Since scaffolds generate source code you own, you can customize everything after generation:

• Swap the provider — Change from OpenAI to Anthropic or your own backend
• Change the theme — Switch presets or create a fully custom theme
• Add screens — The generated routing structure makes it easy to add new screens
• Remove screens — Delete the auth or settings screens if you don't need them
• Edit any component — All FlAI components are source code in your project

Basic vs Full App

Feature	Basic	Full App
Chat screen	Yes	Yes
Streaming text	Yes	Yes
Message bubbles	Yes	Yes
Input bar	Yes	Yes
Typing indicator	Yes	Yes
Auth flow	No	Yes
Conversation list	No	Yes
Settings screen	No	Yes
Profile screen	No	Yes
Model selector	No	Yes
Token usage	No	Yes
Thinking indicator	No	Yes
Tool call cards	No	Yes
Citation cards	No	Yes
Navigation / routing	No	Yes
Components included	4	12+