How to Integrate Generative AI in Your Flutter App Using Firebase Vertex AI

11min
Introduction
Generative AI is fast becoming a normal thing in today's apps; it allows developers to create smart and interactive experiences. Be that text generation, content analysis, or media creation Firebase Vertex AI offers a quite powerful set of tools for realizing these functionalities within your Flutter app. We will walk you through how to bring generative AI into your Flutter app using the firebase_vertexai package in this tutorial. By the end of this tutorial, at the very least, you'll have a functioning application that can tap into Gemini's API to do all manner of generative AI tasks.
Prerequisites
To complete this tutorial, you will need:
A Firebase account and a Firebase project set up. You can sign up for free at Firebase.
A Flutter development environment is set up on your local machine. Follow the Flutter installation guide if you haven't set it up yet.
Basic knowledge of Firebase and Flutter. If you're new to Firebase, check out the Firebase for Flutter guide.
Step 1 – Setting Up Firebase and Vertex AI
Create a Firebase Project: Log in to the Firebase Console, create a new project, and enable the necessary APIs for Vertex AI.
Enable Firebase App Check: Navigate to your project settings in Firebase, and enable Firebase App Check to ensure that all API calls are coming from your app.
Add Firebase to Your Flutter App: Follow the instructions to connect your Flutter app to your Firebase project. This typically involves downloading the google-services.json file for Android or GoogleService-Info.plist for iOS and placing it in the correct directory of your Flutter project.
Step 2 – Adding Required Dependencies
Open your pubspec.yaml file and add the following dependencies:
YAML
dependencies:
  flutter:
    sdk: flutter
  firebase_core: latest_version
  firebase_vertexai: latest_version
dependencies:
  flutter:
    sdk: flutter
  firebase_core: latest_version
  firebase_vertexai: latest_version
﻿
    2. Run flutter pub get to install the dependencies.
Step 3 – Initializing Firebase and Vertex AI
In lib/main.dart, import the necessary Firebase packages:
Dart
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_vertexai/firebase_vertexai.dart';
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_vertexai/firebase_vertexai.dart';
﻿
    2. Initialize Firebase and Vertex AI in the main function:
Dart
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();

  runApp(MyApp());
}
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();

  runApp(MyApp());
}
﻿
    3. In your MyApp widget, create a function to initialize the generative model:
Dart
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Generative AI with Firebase')),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              final result = await generateContent();
              print(result);
            },
            child: Text('Generate Content'),
          ),
        ),
      ),
    );
  }

  Future<String> generateContent() async {
    // Initialize the generative model
    final vertexAI = FirebaseVertexAI.instance;
    final generativeModel = vertexAI.getGenerativeModel(
      modelName: 'projects/YOUR_PROJECT_ID/locations/YOUR_LOCATION/models/YOUR_MODEL_NAME',
    );

    // Construct your prompt
    final prompt = VertexAITextPrompt(text: 'Write a story about a magic backpack');

    // Optionally, you can set generation configurations
    final generationConfig = VertexAIGenerationConfig(
      temperature: 0.7,
      responseMimeType: 'application/json',
    );

    // Generate content
    final response = await generativeModel.generateContent(
      prompt: prompt,
      generationConfig: generationConfig,
    );

    return response.generatedText;
  }
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Generative AI with Firebase')),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              final result = await generateContent();
              print(result);
            },
            child: Text('Generate Content'),
          ),
        ),
      ),
    );
  }

  Future<String> generateContent() async {
    // Initialize the generative model
    final vertexAI = FirebaseVertexAI.instance;
    final generativeModel = vertexAI.getGenerativeModel(
      modelName: 'projects/YOUR_PROJECT_ID/locations/YOUR_LOCATION/models/YOUR_MODEL_NAME',
    );

    // Construct your prompt
    final prompt = VertexAITextPrompt(text: 'Write a story about a magic backpack');

    // Optionally, you can set generation configurations
    final generationConfig = VertexAIGenerationConfig(
      temperature: 0.7,
      responseMimeType: 'application/json',
    );

    // Generate content
    final response = await generativeModel.generateContent(
      prompt: prompt,
      generationConfig: generationConfig,
    );

    return response.generatedText;
  }
}
﻿
Replace 'YOUR_PROJECT_ID', 'YOUR_LOCATION', and 'YOUR_MODEL_NAME' with your actual project details. The generateContent function constructs a prompt, sends it to the Vertex AI model, and returns the generated content.
Step 4 – Constructing Prompts and Handling Responses
Creating a Custom Prompt: You can create more complex prompts by combining different types of data (text, images, audio, etc.). For example:
Dart
final prompt = VertexAITextPrompt(
  text: 'Summarize the following text: "The history of AI is fascinating..."',
);
final prompt = VertexAITextPrompt(
  text: 'Summarize the following text: "The history of AI is fascinating..."',
);
﻿
    2. Handling Large Files: If your prompt involves large files, store the files in Firebase Storage and include the file's Cloud Storage URL in your request.
Dart
final prompt = VertexAITextPrompt(
  text: 'Analyze the content of this document',
  fileUrl: 'gs://your-bucket-name/your-file.pdf',
);
final prompt = VertexAITextPrompt(
  text: 'Analyze the content of this document',
  fileUrl: 'gs://your-bucket-name/your-file.pdf',
);
﻿
    3. Streaming Responses: If you want to stream the AI's output as it becomes available, you can use the generateContentStream method:
Dart
await for (final partialResponse in generativeModel.generateContentStream(prompt: prompt)) {
  print(partialResponse.generatedText);
}
await for (final partialResponse in generativeModel.generateContentStream(prompt: prompt)) {
  print(partialResponse.generatedText);
}
﻿
Step 5 – Testing and Deploying the App
Run your app using flutter run and test the AI generation features. You should see the generated content printed in the console.
Once you've confirmed that everything works, you can deploy your app or continue to enhance it with additional features.
Conclusion
In this tutorial, you learned how to include Generative AI in your Flutter App using the Firebase Vertex AI Package. You can use Gemini to power excellent Artificial Intelligence capabilities in an app for text generation, analysis of content data, and many more AI-driven features. Because of the flexibility of Firebase Vertex AI, you can change at will the AI responses, making it perfect for developing intelligent and interactive apps.

See pub.dev for Firebase Vertex AI, FlutterFire, and other Flutter packages. Happy coding!
Updated 22 Aug 2024
Did this page help you?
How to use Data Handling in Flutter Using List.generate with Back4app
How to Use Flutter Completers with a Backend on Back4app