透過 Firebase SDKs 的 Vertex AI AI 開始使用 Gemini'API


本指南說明如何開始使用所選平台的 Vertex AI in Firebase SDK，直接從應用程式呼叫 Vertex AI Gemini API。

請注意，您也可以使用這份指南，開始使用 Vertex AI in Firebase SDK 存取 Imagen 模型。

事前準備

本指南假設您已熟悉使用 JavaScript 開發網路應用程式。本指南不受架構限制。

  • 請確認開發環境和網頁應用程式符合下列規定：

    • (選用) Node.js
    • 新式網路瀏覽器

  • (選用) 查看範例應用程式。

    下載範例應用程式

    您可以快速試用 SDK、查看各種用途的完整導入方式，或在沒有自有網頁應用程式時使用範例應用程式。如要使用範例應用程式，您必須將其連結至 Firebase 專案。

步驟 1：設定 Firebase 專案，並將應用程式連結至 Firebase

如果您已擁有 Firebase 專案和已連結至 Firebase 的應用程式

  1. 在 Firebase 主控台中，前往「運用 Gemini 建構內容」頁面。

  2. 按一下 Vertex AI in Firebase 資訊卡，即可啟動工作流程，協助您完成下列工作：

  3. 請繼續參閱本指南的後續步驟，將 SDK 新增至應用程式。

如果您「沒有」已建立 Firebase 專案，也沒有與 Firebase 連結的應用程式

  1. 登入 Firebase 控制台。

  2. 按一下「建立專案」，然後使用下列任一選項：

    • 選項 1：在「建立專案」工作流程的第一個步驟中輸入新專案名稱，即可建立全新的 Firebase 專案 (以及其底層 Google Cloud 專案)。

    • 選項 2：在現有的 Google Cloud 專案中「新增 Firebase」，方法是在「建立專案」工作流程的第一個步驟中，從下拉式選單中選取 Google Cloud 專案名稱。

    請注意，在系統提示時，您不需要設定 Google Analytics 來使用 Vertex AI in Firebase SDK。

  3. 在 Firebase 主控台中，前往「運用 Gemini 建構內容」頁面。

  4. 按一下 Vertex AI in Firebase 資訊卡，即可啟動工作流程，協助您完成下列工作：

  1. 繼續在主控台的生成式 AI 工作流程中，將應用程式連結至 Firebase，其中包括以下工作：

    • 透過 Firebase 專案註冊應用程式。

    • 將 Firebase 設定物件新增至應用程式。

  2. 在本指南的後續步驟中，您將在應用程式中新增 Vertex AI in Firebase SDK，並完成使用 SDK 和 Gemini API 所需的初始化作業。


步驟 2：新增 SDK

Firebase 專案設定完成，應用程式已連結至 Firebase (請參閱上一個步驟)，現在您可以將 Vertex AI in Firebase SDK 新增至應用程式。

Vertex AI in Firebase 程式庫提供 API 存取權，可用於與 Gemini 和 Imagen 模型互動。這個程式庫是 Firebase JavaScript SDK for Web 的一部分。

  1. 使用 npm 安裝適用於網頁的 Firebase JS SDK：

      npm install firebase

  2. 在應用程式中初始化 Firebase：

      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);

步驟 3：初始化 Vertex AI 服務和生成式模型

您必須先初始化 Vertex AI 服務和生成式模型，才能發出任何 API 呼叫並提示 Gemini 模型。

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" });

完成這份入門指南後，請瞭解如何選擇適合用途和應用程式的模型和 (選用) 位置。

步驟 4：向模型傳送提示要求

您已將應用程式連結至 Firebase、新增 SDK，並初始化 Vertex AI 服務和生成模型，因此可以向 Gemini 模型傳送提示要求。

您可以使用 generateContent()，根據僅限文字提示要求產生文字：

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();

你還可以做些什麼？

進一步瞭解支援的型號

瞭解可用於各種用途的模型，以及相關配額和價格。

試用 Gemini API 的其他功能

瞭解如何控管內容產生

您也可以使用 Vertex AI Studio 實驗提示和模型設定。


針對 Vertex AI in Firebase 的使用體驗提供意見回饋