Get started with the Gemini API using the Vertex AI in Firebase SDKs

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.

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.

  Download 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

1. In the Firebase console, go to the Build with Gemini page.

2. Click the Vertex AI in Firebase card to launch a workflow that helps you complete the following tasks:

   • Upgrade your project to use the pay-as-you-go Blaze pricing plan.

   • Enable the required APIs in your project (Vertex AI API and Vertex AI in Firebase API).

3. 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

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.

1. Install the Firebase JS SDK for Web using npm:

     npm install firebase
   

2. 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";

// 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";

// 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

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).
• Generate structured output (like JSON) from both text and multimodal prompts.
• 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