This guide shows you how to get started making calls to the Vertex AI Gemini API directly from your app using the Vertex AI in Firebase SDK for your chosen platform.
Optionally experiment with an alternative "Google AI" version of the Gemini API
Get free-of-charge access (within limits and where available) using Google AI Studio and Google AI client SDKs. These SDKs should be used for prototyping only in mobile and web apps.After you're familiar with how a Gemini API works, migrate to the Vertex AI in Firebase SDKs, which have many additional features important for mobile and web apps, like protecting the API from abuse using Firebase App Check and support for large media files in requests.
Optionally call the Vertex AI Gemini API server-side (like with Python, Node.js, or Go)
Use the server-side Vertex AI SDKs, Firebase Genkit, or Firebase Extensions for the Gemini API.
Prerequisites
This guide assumes that you're familiar with using JavaScript to develop web apps. This guide is framework-independent.
Make sure that your development environment and web app meet the following requirements:
- (Optional) Node.js
- Modern web browser
(Optional) Check out the sample app.
You can try out the SDK quickly, see a complete implementation of various use cases, or use the sample app if don't have your own web app. To use the sample app, you'll need to connect it to a Firebase project.
Step 1: Set up a Firebase project and connect your app to Firebase
If you already have a Firebase project and an app connected to Firebase
In the Firebase console, go to the Build with Gemini page.
Click the Vertex AI in Firebase card to launch a workflow that helps you complete the following tasks. (Note that if you see a tab in the console for Vertex AI, then these tasks are complete.)
Upgrade your project to use the pay-as-you-go Blaze pricing plan.
Enable the following two APIs for your project:
aiplatform.googleapis.com
andfirebaseml.googleapis.com
.
Continue to the next step in this guide to add the SDK to your app.
If you do not already have a Firebase project and an app connected to Firebase
Sign into the Firebase console.
Click Create project, and then use either of the following options:
Option 1: Create a wholly new Firebase project (and its underlying Google Cloud project automatically) by entering a new project name in the first step of the "Create project" workflow.
Option 2: "Add Firebase" to an existing Google Cloud project by selecting your Google Cloud project name from the drop-down menu in the first step of the "Create project" workflow.
Note that when prompted, you do not need to set up Google Analytics to use the Vertex AI in Firebase SDKs.
In the Firebase console, go to the Build with Gemini page.
Click the Vertex AI in Firebase card to launch a workflow that helps you complete the following tasks. (Note that if you see a tab in the console for Vertex AI, then these tasks are complete.)
Upgrade your project to use the pay-as-you-go Blaze pricing plan.
Enable the following two APIs for your project:
aiplatform.googleapis.com
andfirebaseml.googleapis.com
.
Continue in the console's generative AI workflow to connect your app to Firebase, which includes these tasks:
Registering your app with your Firebase project.
Adding your Firebase configuration object to your app.
In the next steps of this guide, you'll add the Vertex AI in Firebase SDK to your app and complete the required initialization specific to using the SDK and the Gemini API.
Step 2: Add the SDK
With your Firebase project set up and your app connected to Firebase (see previous step), you can now add the Vertex AI in Firebase SDK to your app.
The Vertex AI in Firebase library provides access to the Vertex AI Gemini API and is included as part of the Firebase JavaScript SDK for Web.
Install the Firebase JS SDK for Web using npm:
npm install firebase
Initialize Firebase in your app:
import { initializeApp } from "firebase/app"; // TODO(developer) Replace the following with your app's Firebase configuration // See: https://firebase.google.com/docs/web/learn-more#config-object const firebaseConfig = { // ... }; // Initialize FirebaseApp const firebaseApp = initializeApp(firebaseConfig);
Step 3: Initialize the Vertex AI service and the generative model
Before you can make any API calls, you need to initialize the Vertex AI service and the generative model.
import { initializeApp } from "firebase/app";
import { getVertexAI, getGenerativeModel } from "firebase/vertexai-preview";
// TODO(developer) Replace the following with your app's Firebase configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
// ...
};
// Initialize FirebaseApp
const firebaseApp = initializeApp(firebaseConfig);
// Initialize the Vertex AI service
const vertexAI = getVertexAI(firebaseApp);
// Initialize the generative model with a model that supports your use case
// Gemini 1.5 models are versatile and can be used with all API capabilities
const model = getGenerativeModel(vertexAI, { model: "gemini-1.5-flash" });
When you've finished the getting started guide, learn how to choose a Gemini model and (optionally) a location appropriate for your use case and app.
Step 4: Call the Vertex AI Gemini API
Now that you've connected your app to Firebase, added the SDK, and initialized the Vertex AI service and the generative model, you're ready to call the Vertex AI Gemini API.
You can use generateContent()
to generate text from a text-only prompt
request:
import { initializeApp } from "firebase/app";
import { getVertexAI, getGenerativeModel } from "firebase/vertexai-preview";
// TODO(developer) Replace the following with your app's Firebase configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
// ...
};
// Initialize FirebaseApp
const firebaseApp = initializeApp(firebaseConfig);
// Initialize the Vertex AI service
const vertexAI = getVertexAI(firebaseApp);
// Initialize the generative model with a model that supports your use case
// Gemini 1.5 models are versatile and can be used with all API capabilities
const model = getGenerativeModel(vertexAI, { model: "gemini-1.5-flash" });
// Wrap in an async function so you can use await
async function run() {
// Provide a prompt that contains text
const prompt = "Write a story about a magic backpack."
// To generate text output, call generateContent with the text input
const result = await model.generateContent(prompt);
const response = result.response;
const text = response.text();
console.log(text);
}
run();
What else can you do?
Learn more about the Gemini models
Learn about the models available for various use cases and their quotas and pricing.
Try out other capabilities of the Gemini API
- Learn more about generating text from text-only prompts, including how to stream the response.
- Generate text from multimodal prompts (including text, images, PDFs, video, and audio).
- Build multi-turn conversations (chat).
- Use function calling to connect generative models to external systems and information.
Learn how to control content generation
- Understand prompt design, including best practices, strategies, and example prompts.
- Configure model parameters like temperature and maximum output tokens.
- Use safety settings to adjust the likelihood of getting responses that may be considered harmful.
Give feedback about your experience with Vertex AI in Firebase