ai_assistant_ui

A customizable, modern, and futuristic AI Chat UI library for Flutter. Built with dynamic light/dark glassmorphism themes, markdown support, code highlighting, floating capsule input, and multi-AI provider support (Google Gemini, OpenAI, Claude, Ollama).


✨ Features

  • 🎨 Futuristic UI: Glassmorphic styling with smooth message bubbles, timestamps, and responsive layouts.
  • πŸŒ“ Dynamic Light/Dark Themes: Easily sync with Theme.of(context).brightness or toggle via built-in β˜€οΈ / πŸŒ™ app bar controls.
  • πŸ€– Multi-AI Provider Integration: Connect seamlessly to:
    • Google Gemini (GeminiProvider)
    • OpenAI (OpenAIProvider)
    • Anthropic Claude (ClaudeProvider)
    • Ollama Local LLMs (OllamaProvider)
    • Custom AI Backends (CustomAIProvider)
  • πŸ’Ύ Session History & Persistence: Built-in support for offline storage via HiveChatStorage or in-memory MemoryChatStorage.
  • πŸ’¬ Rich Formatting & Code Actions: Full GFM Markdown support with syntax-highlighted code blocks and single-tap copy buttons.
  • ⌨️ Capsule Input Bar: Single-container rounded input bar with circular Send (Icons.arrow_upward_rounded) and Stop Generation (Icons.stop_rounded) buttons.

πŸš€ Getting Started

Add ai_assistant_ui to your pubspec.yaml:

dependencies:
  ai_assistant_ui: ^0.0.1

Or run:

flutter pub add ai_assistant_ui

πŸ’‘ Usage Example

import 'package:flutter/material.dart';
import 'package:ai_assistant_ui/ai_assistant_ui.dart';

class ChatScreen extends StatelessWidget {
  const ChatScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AIChatView(
        provider: GeminiProvider(
          apiKey: 'YOUR_GEMINI_API_KEY',
          model: 'gemini-1.5-flash',
        ),
        config: const AIChatConfig(
          title: 'AravGPT',
          placeholderText: 'Ask anything...',
          welcomeMessage: 'How can I help you today?',
        ),
        isDarkMode: Theme.of(context).brightness == Brightness.dark,
        onThemeToggle: () {
          // Trigger your app's theme toggle handler
        },
      ),
    );
  }
}

πŸ€– AI Provider Configurations

1. Google Gemini

final provider = GeminiProvider(
  apiKey: 'YOUR_GEMINI_API_KEY',
  model: 'gemini-1.5-flash', // or 'gemini-1.5-pro'
);

2. OpenAI (ChatGPT)

final provider = OpenAIProvider(
  apiKey: 'YOUR_OPENAI_API_KEY',
  model: 'gpt-4o-mini',
);

3. Anthropic Claude

final provider = ClaudeProvider(
  apiKey: 'YOUR_CLAUDE_API_KEY',
  model: 'claude-3-5-sonnet-20240620',
);

4. Ollama (Local AI)

final provider = OllamaProvider(
  baseUrl: 'http://localhost:11434',
  model: 'llama3',
);

🎨 Theme & Config Customization

Configuration Options (AIChatConfig)

Option Type Default Description
title String 'AravGPT' App bar title text
placeholderText String 'Ask anything...' Input field placeholder text
welcomeMessage String 'How can I help you today?' Welcome title displayed on empty state
enableHistoryDrawer bool true Show side drawer menu with previous sessions
enableMarkdown bool true Render assistant responses formatted in Markdown
enableCodeCopy bool true Show copy button inside code blocks
enableStopGeneration bool true Allow users to stop streaming responses

πŸ’Ύ Storage Options

// Persistent local storage via Hive
final storage = HiveChatStorage();

// Temporary in-memory storage
final storage = MemoryChatStorage();

πŸ“„ License

This project is licensed under the MIT License - see the LICENSE file for details.

Libraries

ai_assistant_ui