Comienza a usar la API de Gemini con Vertex AI en los SDK de Firebase


En esta guía, se muestra cómo comenzar a realizar llamadas a Vertex AI Gemini API directamente desde tu app con el SDK de Vertex AI in Firebase para la plataforma que elijas.

Ten en cuenta que también puedes usar esta guía para comenzar a acceder a modelos de Imagen con los SDK de Vertex AI in Firebase.

Requisitos previos

En esta guía, se da por sentado que estás familiarizado con el uso de JavaScript para desarrollar apps web. Esta guía no depende del framework.

  • Asegúrate de que tu entorno de desarrollo y tu app web cumplan con los siguientes requisitos:

    • Node.js (opcional)
    • Navegador web moderno

  • (Opcional) Consulta la app de ejemplo.

    Descarga la app de ejemplo

    Puedes probar el SDK rápidamente, ver una implementación completa de varios casos de uso o usar la app de ejemplo si no tienes tu propia app web. Para usar la app de ejemplo, deberás conectarla a un proyecto de Firebase.

Paso 1: Configura un proyecto de Firebase y conecta tu app a Firebase

Si ya tienes un proyecto de Firebase y una app conectada a Firebase

  1. En la consola de Firebase, ve a la página Crear con Gemini.

  2. Haz clic en la tarjeta Vertex AI in Firebase para iniciar un flujo de trabajo que te ayude a completar las siguientes tareas:

  3. Continúa con el siguiente paso de esta guía para agregar el SDK a tu app.

Si no tienes un proyecto de Firebase ni una app conectada a Firebase


Paso 2: Agrega el SDK

Con tu proyecto de Firebase configurado y tu app conectada a Firebase (consulta el paso anterior), ahora puedes agregar el SDK de Vertex AI in Firebase a tu app.

La biblioteca de Vertex AI in Firebase proporciona acceso a las APIs para interactuar con los modelos Gemini y Imagen. La biblioteca se incluye como parte del SDK de Firebase JavaScript para la Web.

  1. Instala el SDK de Firebase JS para la Web con npm:

      npm install firebase

  2. Inicializa Firebase en tu 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);

Paso 3: Inicializa el servicio Vertex AI y el modelo generativo

Antes de poder realizar llamadas a la API y solicitar un modelo Gemini, debes inicializar el servicio Vertex AI y el modelo generativo.

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
const model = getGenerativeModel(vertexAI, { model: "gemini-2.0-flash" });

Después de terminar esta guía de introducción, obtén información para elegir un modelo y, de manera opcional, una ubicación adecuada para tu caso de uso y app.

Paso 4: Envía una solicitud de instrucción a un modelo

Ahora que conectaste tu app a Firebase, agregaste el SDK y inicializaste el servicio Vertex AI y el modelo generativo, está todo listo para enviar una solicitud de instrucción a un modelo Gemini.

Puedes usar generateContent() para generar texto a partir de una solicitud de instrucción solo de texto:

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
const model = getGenerativeModel(vertexAI, { model: "gemini-2.0-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();

¿Qué más puedes hacer?

Más información sobre los modelos compatibles

Obtén información sobre los modelos disponibles para varios casos de uso y sus cuotas y precios.

Prueba otras funciones de Gemini API

Aprende a controlar la generación de contenido

También puedes experimentar con instrucciones y configuraciones de modelos con Vertex AI Studio.


Envía comentarios sobre tu experiencia con Vertex AI in Firebase