How to Add Firebase AI Logic in Flutter | Navoki

In the rapidly evolving world of AI, developers are looking for ways to integrate smart capabilities into their mobile apps. That’s where Firebase AI Logic comes in a powerful tool from Google to bring the magic of Generative AI directly into your Flutter apps.

Why learning Firebase AI is important read here

In this tutorial, I’ll show you how to integrate Firebase AI Logic in a Flutter app step by step to use Gemini API

Use Gemini API when you are making POCs and MVP for your ideas

Prerequisites

Before we begin, make sure you have:

1. A Firebase project
2. Flutter SDK installed
3. Basic knowledge of Dart and Firebase

Setup Firebase AI Logic in Flutter app

1. Enable Gemini AI API in Firebase Console

1. Using Gemini API is free upto certain limit
2. Vertex AI. to enable it add billing and update to Blaze Plan

2. Add Firebase Ai Packages in Flutter App

1. Add these flutter packages along with firebase_ai package to use firebase ai client side sdk

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.8
  firebase_core: ^3.1.1
  flutter_dotenv: ^5.1.0
  firebase_ai: ^2.3.0

2. Create .env file in project directory to add firebase configuration. Copy all values from Firebase Console.

ANDROID_API_KEY=
ANDROID_APP_ID=
MESSAGING_SENDER_ID=
PROJECT_ID=



IOS_APP_ID=
IOS_API_KEY=

3. Make sure you add .env file in pubspec.yaml file too.

flutter:
  uses-material-design: true
  assets:
    - .env

4. Get Gemini API Key form Google Cloud Console. Click Show Key , Copy and paste in .env file

/

5. Initialize your Firebase app in main.dart in main function,

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await dotenv.load(fileName: ".env");

  await Firebase.initializeApp(
    options: FirebaseOptions(
      apiKey: Platform.isIOS
          ? dotenv.env['IOS_API_KEY']!
          : dotenv.env['ANDROID_API_KEY']!,
      appId: Platform.isIOS
          ? dotenv.env['IOS_APP_ID']!
          : dotenv.env['ANDROID_APP_ID']!,
      messagingSenderId: dotenv.env['MESSAGING_SENDER_ID']!,
      projectId: dotenv.env['PROJECT_ID']!,
    ),
  );
  runApp(const MyApp());
}

Your Firebase Ai setup is complete here

Create Generative Ai apps

Now you can create ai apps, to create you first app check this Firebase AI Logic Chat App tutorial

Check out my YouTube tutorial, dive deeper into setup, code, and integration!

Connect with me on Social Media and Discord Community