在 Firebase SDK 中使用 Vertex AI 開始使用 Gemini API


本指南說明如何開始呼叫 Vertex AI Gemini API Vertex AI in Firebase SDK (適用於您選擇的平台)。

事前準備

本指南假設您熟悉 JavaScript 開發 網頁應用程式。本指南與架構無關。

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

如果您已經有 Firebase 專案，且有一個應用程式連結至 Firebase

  1. 前往 Firebase 控制台中的 「使用 Gemini 建構內容」頁面。

  2. 按一下 Vertex AI in Firebase 資訊卡即可啟動可協助您的工作流程 請完成下列任務(請注意，如果您在控制台中看到 Vertex AI，表示這些工作已完成)。

  3. 請繼續進行本指南的下一步驟，將 SDK 加入應用程式。

如果您尚未有 Firebase 專案，且有一個應用程式連結至 Firebase


步驟 2：新增 SDK

設定 Firebase 專案，並將應用程式連結至 Firebase (請參閱上一步) 您現在可以在應用程式中加入 Vertex AI in Firebase SDK。

Vertex AI in Firebase 程式庫可讓您存取 Vertex AI Gemini API，並包含在 Firebase JavaScript SDK 網頁版。

  1. 使用 npm 安裝 Firebase JS SDK for Web：

    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 呼叫 以及生成式模型

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

閱讀完入門指南後，請瞭解如何選擇 Gemini 模型，以及視需要調整 找出適合您的用途和應用程式的位置。

步驟 4：呼叫 Vertex AI Gemini API

您已將應用程式連結至 Firebase、加入 SDK 並初始化 Vertex AI 服務和生成式模型 你準備呼叫 Vertex AI Gemini API 了。

您可以使用 generateContent()，透過純文字提示生成文字 要求：

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();
，瞭解如何調查及移除這項存取權。 ，瞭解如何調查及移除這項存取權。

您還能做些什麼？

進一步瞭解 Gemini 模型

進一步瞭解 適用於各種用途 和 配額與定價。

試試 Gemini API 的其他功能

瞭解如何控管內容生成功能

，瞭解如何調查及移除這項存取權。 您也可以使用 Vertex AI Studio。


提供意見 你使用 Vertex AI in Firebase 的感想