Firebase SDK の Vertex AI を使用して Gemini API を使ってみる


このガイドでは、選択したプラットフォームの Vertex AI in Firebase SDK を使用して、アプリから直接 Vertex AI Gemini API を呼び出す方法について説明します。

前提条件

このガイドでは、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 ライブラリは Vertex AI Gemini API へのアクセスを提供します。このライブラリは、Firebase JavaScript SDK for Web の一部として含まれています。

  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 サービスと生成モデルを初期化する

API 呼び出しを行う前に、Vertex AI サービスと生成モデルを初期化する必要があります。

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

スタートガイドを完了したら、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";

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

Google アシスタントの機能

Gemini モデルの詳細

さまざまなユースケースで使用可能なモデルと、その割り当てと料金について学びます。

Gemini API の他の機能を試す

コンテンツの生成を制御する方法

Vertex AI Studio を使用して、プロンプトとモデル構成をテストすることもできます。


Vertex AI in Firebase の使用感に関するフィードバックを送信する