透過 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 連結的應用程式


步驟 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 的使用體驗提供意見回饋