ai_chat_plus

---

AI Chat Plus

🌟 Experience the future of chat interfaces with AI Chat Plus - where intelligent chat meets modern design. Featuring seamless AI integration, real-time interactions, and multiple provider support. Built with Flutter, powered by cutting-edge AI.

📱 Live Demos

💡 Note: Large GIF files (up to 12MB) may take a moment to load. Click on any demo image to view the full-size version.

✨ Crafted by Jamalihassan0307

Transform your chat experience with:

• ⚡ Real-time AI interactions with typing indicators
• 🤖 Multiple AI providers (OpenAI, Gemini, Claude)
• 🔄 Seamless provider switching
• 📱 Clean and efficient message handling
• ✨ Type-safe API implementation
• 🛡️ Robust error handling
• 🎨 Fully customizable themes and UI components
• 📊 Message persistence (Coming Soon)

👨‍💻 Developer Contact

• Creator: Jam Ali Hassan
• Portfolio: View Portfolio
• Email: jamalihassan0307@gmail.com
• LinkedIn: Connect on LinkedIn

Key Features

1. AI Integration - Multiple Provider Support

// Initialize OpenAI
final openAIConfig = AIModelConfig(
  provider: AIProvider.openAI,
  apiKey: 'YOUR_OPENAI_API_KEY',
  modelId: OpenAIModel.gpt5.modelId,
);

// Initialize Gemini
final geminiConfig = AIModelConfig(
  provider: AIProvider.gemini,
  apiKey: 'YOUR_GEMINI_API_KEY',
  modelId: GeminiModel.gemini35Flash.modelId,
);

// Initialize Claude
final claudeConfig = AIModelConfig(
  provider: AIProvider.claude,
  apiKey: 'YOUR_CLAUDE_API_KEY',
  modelId: ClaudeModel.claude4Sonnet.modelId,
);

2. Efficient Message Handling

AIChat(
  apiKey: 'YOUR_API_KEY',
  provider: AIProvider.gemini,
  modelId: GeminiModel.gemini35Flash.modelId,
  onError: (error) {
    print('Error: $error');
  },
)

3. Type-Safe Implementation

CustomChatUI(
  messages: messages,
  onSendMessage: handleMessage,
  isTyping: isTyping,
  onError: handleError,
)

📚 Comprehensive Examples

Explore our detailed examples to get started quickly:

🎯 Simple Chat Implementation

📍 Location: example/simple_chat/main.dart

// Quick start with minimal setup
AIChat(
  apiKey: 'YOUR_API_KEY',
  provider: AIProvider.gemini,
  modelId: GeminiModel.gemini35Flash.modelId,
)

🤖 AI Integration Examples

📍 Location: example/ai_integration/

• Main App: main.dart - Navigation between AI providers
• OpenAI Chat: pages/openai_page.dart - GPT integration
• Gemini Chat: pages/gemini_page.dart - Google Gemini
• Claude Chat: pages/claude_page.dart - Anthropic Claude

🎨 Customizable Chat UI

📍 Location: example/customizable_chatui/

• Main App: main.dart - Custom theme showcase
• Home Page: pages/home_page.dart - Theme selection
• Custom Chat: pages/chat_pages/custom_chat_page.dart - Full customization
• Settings: pages/chat_pages/chat_settings_page.dart - Theme configuration

🚀 Prebuilt Simple Chat UI

📍 Location: example/prebuilt_simple_chatui/

• Main App: main.dart - App setup
• Test Chat: test_chat_page.dart - Ready-to-use chat interface

Features

✅ Currently Implemented:

• 🤖 OpenAI GPT Integration (GPT-5, GPT-5 Mini, GPT-5 Nano)
• 🧠 Google Gemini Integration (Gemini 3.5 Flash, Gemini 3.5 Pro, Gemini 3.5 Flash Lite)
• 🧠 Claude AI Integration (Claude 4 Sonnet, Opus, Haiku)
• �🔄 Streaming responses support
• 🎯 Type-safe API implementation
• ⚡ Fast and efficient message handling
• 🔄 Real-time provider switching
• ⌨️ Typing indicators and animations
• 🚨 Enhanced error handling and recovery
• 🎨 Customizable themes and UI components
• 📱 Multiple chat UI options (Simple, Custom, Prebuilt)
• 🌐 Cross-platform support (Android, iOS, Web)
• 🛡️ Secure API key management

🚀 Coming Soon:

• 💾 Message Storage & Persistence
  • 🔥 Firebase Firestore integration
  • 📱 Local SQLite storage
  • ☁️ Cloud sync capabilities
  • 📊 Chat history management
• 🎤 Voice Features
  • 🗣️ Speech-to-text integration
  • 🔊 Text-to-speech responses
  • 🎵 Voice message support
• 📁 File & Media Support
  • 📎 File attachments
  • 🖼️ Image sharing and analysis
  • 📄 Document processing
• 🔍 Advanced Features
  • 🔍 Message search functionality
  • 🏷️ Chat categorization and tagging
  • 📈 Usage analytics and insights
  • 🌍 Multi-language support
• 🎮 Enhanced UI/UX
  • 🌙 Dark/Light theme auto-switching
  • 📱 Adaptive design improvements
  • ✨ Animation enhancements
  • 🎨 More theme presets

Usage

Basic Setup

Add this to your package's pubspec.yaml file:

dependencies:
  ai_chat_plus: ^1.2.3

Then run:

flutter pub get

Using OpenAI Service

import 'package:ai_chat_plus/ai_chat_plus.dart';

Future<void> initOpenAI() async {
  final config = AIModelConfig(
    provider: AIProvider.openAI,
    apiKey: 'YOUR_OPENAI_API_KEY',
    modelId: OpenAIModel.gpt41.modelId,
  );

  final aiService = AIServiceFactory.createService(AIProvider.openAI);
  await aiService.initialize(config);
  
  // Generate response
  final response = await aiService.generateResponse("Hello, how are you?");
  print(response);
}

Using Gemini Service

import 'package:ai_chat_plus/ai_chat_plus.dart';

Future<void> initGemini() async {
  final config = AIModelConfig(
    provider: AIProvider.gemini,
    apiKey: 'YOUR_GEMINI_API_KEY',
    modelId: GeminiModel.gemini25Flash.modelId,
  );

  final aiService = AIServiceFactory.createService(AIProvider.gemini);
  await aiService.initialize(config);
  
  // Generate response
  final response = await aiService.generateResponse("What is quantum computing?");
  print(response);
}

Using Claude Service

import 'package:ai_chat_plus/ai_chat_plus.dart';

Future<void> initClaude() async {
  final config = AIModelConfig(
    provider: AIProvider.claude,
    apiKey: 'YOUR_CLAUDE_API_KEY',
    modelId: ClaudeModel.claude4Sonnet.modelId,
  );

  final aiService = AIServiceFactory.createService(AIProvider.claude);
  await aiService.initialize(config);
  
  // Generate response
  final response = await aiService.generateResponse("What is artificial intelligence?");
  print(response);
}

Creating a Chat Application

To create a chat application with both OpenAI and Gemini support:

1. Create separate pages for each service:

// Create OpenAI chat page
class OpenAIChatPage extends StatefulWidget {
  // ... implementation in example/pages/openai_page.dart
}

// Create Gemini chat page
class GeminiChatPage extends StatefulWidget {
  // ... implementation in example/pages/gemini_page.dart
}

2. Set up navigation between services:

class ChatScreen extends StatefulWidget {
  @override
  State<ChatScreen> createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {
  int _selectedIndex = 0;
  final List<Widget> _pages = [
    const GeminiChatPage(),
    const OpenAIChatPage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages[_selectedIndex],
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.psychology),
            label: 'Gemini',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.chat_bubble),
            label: 'OpenAI',
          ),
        ],
        currentIndex: _selectedIndex,
        onTap: (index) => setState(() => _selectedIndex = index),
      ),
    );
  }
}

🚀 Prebuilt Chat UI - Quick Start

Get started in minutes with our prebuilt chat interface:

AIChat(
  apiKey: 'YOUR_API_KEY',
  provider: AIProvider.gemini,
  modelId: GeminiModel.gemini25Flash.modelId,
  primaryColor: Theme.of(context).primaryColor,
  backgroundColor: Colors.grey[100],
  // Provider switching
  onProviderChanged: (AIProvider newProvider) {
    return AIModelConfig(
      provider: newProvider,
      apiKey: getApiKeyForProvider(newProvider),
      modelId: getDefaultModelForProvider(newProvider),
    );
  },
  // Error handling
  onError: (error) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text(error.toString())),
    );
  },
)

🎨 Custom Chat UI - Full Control

For complete customization, use our custom chat components:

CustomChatUI(
  messages: _messages,
  onSendMessage: _handleSendMessage,
  isTyping: _isTyping,
  theme: ChatTheme(
    primaryColor: Colors.purple,
    backgroundColor: const Color(0xFFF0F0F0),
    userBubbleGradient: const LinearGradient(
      colors: [Colors.purple, Colors.deepPurple],
    ),
    aiBubbleColor: Colors.white,
    bubbleRadius: 20,
    // ... more customization options
  ),
  userAvatarUrl: 'https://example.com/user-avatar.png',
  aiAvatarUrl: 'https://example.com/ai-avatar.png',
  enableAttachments: true,
)

📱 Multi-Provider Chat App

Create an app with multiple AI providers:

class ChatApp extends StatefulWidget {
  @override
  State<ChatApp> createState() => _ChatAppState();
}

class _ChatAppState extends State<ChatApp> {
  AIProvider _currentProvider = AIProvider.gemini;
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AI Chat Plus'),
        actions: [
          PopupMenuButton<AIProvider>(
            onSelected: (provider) {
              setState(() => _currentProvider = provider);
            },
            itemBuilder: (context) => [
              PopupMenuItem(value: AIProvider.openAI, child: Text('OpenAI')),
              PopupMenuItem(value: AIProvider.gemini, child: Text('Gemini')),
              PopupMenuItem(value: AIProvider.claude, child: Text('Claude')),
            ],
          ),
        ],
      ),
      body: AIChat(
        apiKey: _getApiKey(_currentProvider),
        provider: _currentProvider,
        modelId: _getDefaultModel(_currentProvider),
      ),
    );
  }
}

🔧 Key Features

Prebuilt UI Features:

• 🔄 Built-in provider switching (OpenAI, Gemini, Claude)
• 🎨 Customizable themes and colors
• 🚨 Error handling and loading states
• 💬 Message bubble customization
• ⌨️ Input field styling
• 📱 Responsive design

Custom UI Features:

• 🎛️ Complete theme control
• 👤 Custom avatars and profiles
• 📎 Attachment support
• ✨ Animation customization
• 🌈 Gradient backgrounds
• 📐 Flexible layouts

For detailed implementation examples, check:

• Simple Usage: example/simple_chat/
• AI Integration: example/ai_integration/
• Custom Themes: example/customizable_chatui/
• Prebuilt UI: example/prebuilt_simple_chatui/

📚 API Documentation

🔑 API Keys Setup

1. OpenAI API Key: Get from OpenAI Platform
2. Gemini API Key: Get from Google AI Studio
3. Claude API Key: Get from Claude AI Platform

🤖 Available Models

OpenAI Models:

• OpenAIModel.gpt41 - Most capable model
• OpenAIModel.gpt41Mini - Balanced speed and cost
• OpenAIModel.gpt41Nano - Lowest latency

Gemini Models:

• GeminiModel.gemini25Flash - Fast responses
• GeminiModel.gemini25Pro - Balanced performance
• GeminiModel.gemini25FlashLite - Lowest-cost option

Claude Models:

• ClaudeModel.claude4Haiku - Fast and lightweight
• ClaudeModel.claude4Sonnet - Balanced performance
• ClaudeModel.claude4Opus - Most capable Claude model

🛡️ Security Best Practices

// ✅ Good: Use environment variables
final apiKey = const String.fromEnvironment('OPENAI_API_KEY');

// ❌ Bad: Hardcoded API keys
final apiKey = 'sk-your-actual-key-here'; // Never do this!

// ✅ Good: Error handling
try {
  final response = await aiService.generateResponse(message);
  // Handle success
} catch (e) {
  // Handle error gracefully
  print('Error: $e');
}

// ✅ Good: Proper cleanup
@override
void dispose() {
  aiService.dispose();
  super.dispose();
}

🔧 Advanced Configuration

// Custom service configuration
final config = AIModelConfig(
  provider: AIProvider.openAI,
  apiKey: 'YOUR_API_KEY',
  modelId: OpenAIModel.gpt41Mini.modelId,
  // Optional: Custom parameters
  maxTokens: 2048,
  temperature: 0.7,
  topP: 1.0,
);

// Initialize service with custom config
final aiService = AIServiceFactory.createService(AIProvider.openAI);
await aiService.initialize(config);

🎯 Performance Tips

1. Service Reuse: Initialize services once and reuse them
2. Proper Disposal: Always dispose services to prevent memory leaks
3. Error Handling: Implement robust error handling for better UX
4. Streaming: Use streaming for real-time responses where supported
5. Model Selection: Choose appropriate models based on your use case

🚀 Future Roadmap

Version 1.3.0 (Next Release)

• 🔥 Firebase Firestore integration for message persistence
• 📱 Local SQLite storage for offline capabilities
• 🎤 Voice message recording and playback
• 📷 Image upload and analysis support

Version 1.4.0 (Upcoming)

• 🔍 Advanced search functionality
• 🏷️ Message categorization and tagging
• 📊 Usage analytics and insights
• 🌍 Multi-language support

Version 1.5.0 (Future)

• 🎨 Enhanced theme system with more presets
• 🤖 Custom AI model integration support
• 📱 Improved mobile responsiveness
• ⚡ Performance optimizations

🤝 Contributing

We welcome contributions! Please see our Contributing Guidelines for details.

Ways to Contribute:

• 🐛 Report bugs and issues
• 💡 Suggest new features
• 📝 Improve documentation
• 🧪 Add tests
• 🎨 Enhance UI/UX

📞 Support & Community

• 📋 Issues: GitHub Issues
• 💬 Discussions: GitHub Discussions
• 📧 Email: jamalihassan0307@gmail.com
• 🐦 Follow Updates: GitHub

⭐ Show Your Support

If you find AI Chat Plus helpful, please:

• ⭐ Star the repository on GitHub
• 👍 Like the package on pub.dev
• 📢 Share with other developers
• 💝 Consider sponsoring the project

📄 License

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

👨‍💻 About the Developer

---