Using Firebase’s Vertex AI for Flutter
As a Flutter developer, I am not currently working on a production AI project, but I maintain several AI demos which I revisit periodically. Each time I come back, I discover some new components in the Flutter/AI tool chain. And each time model access and AI integration get easier.
Last year I wrote about my first AI experiments. At the time, there was no Flutter SDK available yet, so I just rigged my Flutter app to access the PaLM API via HTTP calls. A few months later the Flutter team published a dedicated AI Dart SDK called google_generative_ai. I used this opportunity to update my demo app to usegoogle_generative_ai. The new technique made interaction with the model much easier as the SDK provided more structure and cut down on JSON formatting issues.
While the google_generative_ai Flutter package was a great step forward, it still had one significant disadvantage — calls to the models were placed directly from the client and had to include the developer’s API key! Embedding an API key into the client is always a risk and so the Flutter team eventually changed the documentation to recommend google_generative_ai for prototyping only.
This updated recommendation was in part prompted by the Firebase team, who noticed the potential for security issues with the Generative AI SDK and realized that building the VertexAI via Firebase SDK would add additional safety measures including AppCheck. Firebase has always provided a number of useful services via SDK to different app platforms including Flutter, so it’s no surprise that in May 2024 they introduced Vertex AI, a Gemini API in Firebase.
Vertex AI in Firebase is currently available for iOS, Android, Web, and Flutter. It allows access to all the latest Gemini models. The integration varies depending on the platform but for Flutter it is implemented via the Flutter pluginfirebase_vertexai. Once this plugin is added to the code base, any call to the AI models is initiated from the client app, but authentication is handled by the Firebase core.
Updating my demo app WineSnob to use firebase_vertexai
Of course, I wanted to try out Vertex AI for Firebase plugin for my demo project. The previous version of the WineSnob web app was using the google_generative_ai package to access Gemini’s text and multimodal models. My plan for this round was to replace google_generative_ai with firebase_vertexai while keeping my choice of models and UI unchanged.
Step 1: Add and initialize the Firebase SDK
Any integration of a Firebase service starts with adding the firebase_core package to pubspec.yaml. Furthermore, the Firebase SDK has to be initialized during app startup.
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);Since the WineSnob was already using Firebase for authentication and data storage, these steps had already been taken care of in earlier iterations.
Step 2: Add the firebase_vertexai plugin
In this step I removed google_generative_ai from pubspec.yaml and replaced it with firebase_vertexai. The two packages have very similar signatures, so fixing the build after the swap required only a few tiny changes.
// import 'package:google_generative_ai/google_generative_ai.dart';
// import 'package:google_generative_ai/google_generative_ai.dart';
import 'package:firebase_vertexai/firebase_vertexai.dart';
...
// model = GenerativeModel(model: modelName, apiKey: apiKey, ...);
model = FirebaseVertexAI.instance.generativeModel(model: modelName, ...)
Step 3: Activate Vertex AI in Firebase
At this point, the updated app built and ran, but returned an error the first time a model was accessed. The reason was that Vertex AI has not been enabled in Firebase. To resolve this, I went over to the Firebase console and opened the “Build with Gemini tab” and then the “Vertex AI in Firebase” card.
From this point, I let the Firebase console guide me through the steps necessary to activate the Vertex AI. In my case, the only meaningful change was to switch my project from the Spark plan to Blaze, the pay-as-you-go plan. However, others might find further steps necessary depending on the state of their Firebase integration.
Step 4: Enable Firebase AppCheck
Accessing a paid backend service via Firebase is better than embedding the personal API key into the client, but it still does not provide perfect protection against misuse. To completely secure the backend, the Firebase team recommends activating App Check, a service that uses various attestation providers to protect against unauthorized backend uses.
While AppCheck is considered essential for any production app, I am saving the detailed discussion for my sample app for a separate article.
Summary
And that’s it. With literally a handful of lines changed, my Flutter AI demo is now using Firebase’s Vertex AI to access two different Gemini models. The new API is more secure than the previous version but just as easy to use and integrate.
References
This explainer video from the Firebase team gives a great intro to the Vertex AI SDK.
For the official documentation head to https://firebase.google.com/docs/vertex-ai
As with the previous articles in this series, the source code for this project is available here.
