🌟 AI Chat Plus 🌟

A powerful Flutter package for AI chat integration with OpenAI, Google Gemini, and Claude AI

AI Chat Plus #

A Flutter package that provides AI chat functionality with enhanced features including OpenAI, Google Gemini, and Claude AI integrations, voice recognition, and multimodal support.

Key Features #

1. AI Integration – Supports OpenAI, Gemini, and Claude #

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

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

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

2. Prebuilt Chat UI – Ready-to-Use Chatbot Design #

AIChat(
  apiKey: 'YOUR_API_KEY',
  provider: AIProvider.gemini,
  modelId: GeminiModel.geminiFlash.modelId,
  primaryColor: Colors.blue,
  backgroundColor: Colors.grey[100],
)

3. Customizable Themes – Dark Mode, Custom Avatars, Fonts #

CustomChatUI(
  theme: ChatTheme(
    primaryColor: Colors.purple,
    backgroundColor: Colors.grey[900],
    userBubbleColor: Colors.purpleAccent,
    aiBubbleColor: Colors.grey[800],
    messageTextStyle: TextStyle(fontSize: 16),
    bubbleRadius: 20,
    avatarRadius: 24,
  ),
  messages: messages,
  onSendMessage: handleMessage,
  isTyping: isTyping,
)

For detailed examples and customization options, check:

• Basic Chat: example/lib/main.dart
• Theme Customization: example/customizechat/pages/chat_pages/
• Settings UI: example/customizechat/pages/chat_settings_page.dart

Features #

Currently Implemented:

• 🤖 OpenAI GPT Integration (3.5/4.4-turbo)
• 🧠 Google Gemini Integration
• 🔄 Streaming responses support
• 🎯 Type-safe API
• 📱 Easy integration with beautiful UI components
• ⚡ Fast and efficient message handling
• 🎨 Customizable chat UI themes (Light/Dark/Custom)
• 🔄 Real-time provider switching
• 📎 Attachment support in custom chat
• ⌨️ Typing indicators
• 🚨 Enhanced error handling

Coming Soon:

• Claude AI Integration
• Voice Recognition
• Text-to-Speech
• Message Storage
• And more!

Usage #

Basic Setup #

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

dependencies:
  ai_chat_plus: ^1.1.4

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.gpt35Turbo.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.geminiFlash.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.claude3Sonnet.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),
      ),
    );
  }
}

Using Prebuilt Chat UI (New in 1.0.8) #

For quick implementation, you can use our new prebuilt chat UI:

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

Key features of the prebuilt UI:

• Built-in provider switching (OpenAI, Gemini, Claude)
• Customizable themes and styles
• Error handling and loading states
• Message bubble customization
• Input field customization

For detailed customization options, check the example folder in the package repository.

Important Notes #

1. API Keys:

   • OpenAI API key: Get from OpenAI Platform
   • Gemini API key: Get from Google AI Studio
   • Claude API key: Get from Claude AI Platform

2. Available Models:

   • OpenAI: gpt35Turbo, gpt4, gpt4Turbo
   • Gemini: geminiFlash, geminiPro, geminiPro15
   • Claude: claude3Sonnet, claude3Opus, claude3Haiku

3. Error Handling:

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

4. Service Cleanup:

   @override
   void dispose() {
     aiService.dispose();
     super.dispose();
   }
   

For complete implementation examples, check the example folder in the package repository.

Key Features #

1. Provider Selection

   • Switch between OpenAI, Gemini, and Claude providers
   • Each provider uses its specific model configuration

2. Error Handling

   • Proper initialization error handling
   • Message sending error handling
   • Visual error feedback

3. UI Features

   • Beautiful message bubbles
   • Different colors for user and AI messages
   • Loading indicators
   • Provider-specific styling

4. Service Management

   • Proper service initialization
   • Resource cleanup on dispose
   • API key configuration

Important Notes #

1. API Keys

   • Replace YOUR_OPENAI_API_KEY with your actual OpenAI API key
   • Replace YOUR_GEMINI_API_KEY with your actual Gemini API key
   • Replace YOUR_CLAUDE_API_KEY with your actual Claude API key
   • Never commit API keys to version control

2. Model Selection

   • OpenAI models: gpt35Turbo, gpt4, gpt4Turbo
   • Gemini models: geminiFlash, geminiPro, geminiPro15
   • Claude models: claude3Sonnet, claude3Opus, claude3Haiku

3. Streaming Support

   • OpenAI supports streaming responses
   • Gemini Flash currently doesn't support streaming

4. Error Handling

   • Always wrap service calls in try-catch blocks
   • Handle initialization errors
   • Provide user feedback for errors

Additional Information #

• Contributing: We welcome contributions! Please read our contributing guidelines before submitting pull requests.
• Issues: File issues at the GitHub repository
• License: This project is licensed under the MIT License - see the LICENSE file for details

Support #

If you find this package helpful, please give it a star on GitHub!

Contact #

• 👨‍💻 Developed by Jam Ali Hassan
• 🌐 Portfolio
• 📧 Email: jamalihassan0307@gmail.com
• 🔗 LinkedIn