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 (CustomProvider)
• 💾 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
        },
      ),
    );
  }
}

📸 Screenshots #

Dark Theme	Light Theme

🤖 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',
);

5. Custom Backend Provider #

final provider = CustomProvider(
  providerId: 'custom-backend',
  displayName: 'My Custom AI',
  streamHandler: (history, prompt, attachments, cancelToken) async* {
    // Stream response text chunks from your backend API
    yield 'Response chunk 1';
    yield 'Response chunk 2';
  },
);

🔐 Security & API Key Best Practices #

🎨 Theme & Config Customization #

Configuration Options (AIChatConfig) #

💾 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.