オンデバイス モデルとクラウドホスト モデルを使用してウェブアプリでハイブリッド エクスペリエンスを構築する

ハイブリッド推論を使用して、AI を活用したウェブアプリや機能を作成します。 Firebase AI Logicハイブリッド推論では、デバイスモデルが使用可能な場合はそれを使用して推論を実行し、使用できない場合はクラウド ホスト型モデルにシームレスにフォールバックします（逆も同様です）。

このページでは、 クライアント SDK の使用を開始する方法について説明します。この標準 設定が完了したら、 追加の構成オプションと機能（ 構造化出力など）を確認してください。

なお、デバイス上での推論は、デスクトップの Chrome で実行されるウェブアプリでのみサポートされています。

コード例に移動

推奨されるユースケースとサポートされている機能

推奨されるユースケース:

  • 推論にデバイスモデルを使用すると、次のメリットがあります。

    • プライバシーの強化
    • ローカル コンテキスト
    • 推論を無料で使用できる
    • オフライン機能

  • ハイブリッド機能を使用すると、次のメリットがあります。

    • デバイスモデルの可用性やインターネット接続に関係なく、オーディエンスの 100% にリーチできる

デバイス上での推論でサポートされている機能:

デバイス上での推論では、単一ターンのテキスト生成（チャットではない） のみがサポートされ、 ストリーミング出力または非ストリーミング出力が可能です。次のテキスト生成機能がサポートされています。

JSON や列挙型などの構造化出力を生成することもできます。

始める前に

次の点に注目してください。

  • デバイスモデルを使用した推論では Chrome の Prompt APIが使用されます。 一方、クラウド ホスト型モデルを使用した推論では、選択したGemini API プロバイダ（Gemini Developer APIまたは Agent Platform Gemini API (formerly Vertex AI)）が使用されます。

  • このページでは、localhost を使用して開発を開始する方法 について説明します（localhost での API の使用 について詳しくは 、 Chrome のドキュメントをご覧ください）。

    この標準設定が完了したら、 追加の構成オプションと機能（ 構造化出力など）を確認してください。

localhost で始める

以下の手順では、送信するサポート対象のプロンプト リクエストに必要な一般的な設定について説明します。

ステップ 1: デバイス上での推論用に Chrome と Prompt API を設定する

  1. 最新バージョンの Chrome を使用していることを確認します。 chrome://settings/help で更新します。
    デバイス上での推論は Chrome v139 以降で利用できます。

  2. 次のフラグを [**有効**]に設定して、デバイス上のマルチモーダル モデルを有効にします。

    • chrome://flags/#prompt-api-for-gemini-nano-multimodal-input

  3. Chrome を再起動します。

  4. （省略可）最初のリクエストの前にデバイスモデルをダウンロードします。

    Prompt API は Chrome に組み込まれていますが、デバイスモデルはデフォルトでは使用できません。デバイス上での推論の最初のリクエストの前にモデルをダウンロードしていない場合、リクエストによってバックグラウンドでモデルのダウンロードが自動的に開始されます。

ステップ 2: Firebase プロジェクトを設定し、アプリを Firebase に接続する

  1. Firebase コンソールにログインし Firebase プロジェクトを選択します。

  2. Firebase コンソールで、[AI サービス] > [AI Logic] に移動します。

  3. [使ってみる] をクリックして、プロジェクトに 必要な API とリソースの設定に役立つガイド付きワークフローを起動します。

  4. プロンプトが表示されたら、画面上の手順に沿ってアプリを登録し、Firebase 構成をアプリに追加します。

  5. [Gemini API プロバイダ] を選択するよう求められたら、 [Gemini Developer API] を選択することをおすすめします。これにより、無料で簡単に始めることができます。

    後でいつでも、 を設定できますAgent Platform Gemini API (formerly Vertex AI) （とその課金要件）。

  6. ワークフローを続行して、必要な API と関連サービスを設定します Firebase AI Logic。

    2026 年 7 月上旬から、ワークフローのこの段階では、AI Logic の Firebase App Check が自動的に 適用されますFirebase App Check。AI Logicこれは、アプリから直接アクセスされたときに Gemini APIGemini API を保護するための重要なサービスです。開始手順の一環として（このガイドの後の手順を参照）、App CheckApp Check が適用されている場合は、ローカル開発用に App CheckApp Check デバッグ プロバイダを構成する必要があります。

  7. このガイドの次のステップに進み、必要な SDK をアプリに追加します。

ステップ 3: SDK を追加する

Firebase ライブラリを使用すると、生成モデルを操作するための API にアクセスできます。このライブラリは、ウェブ用の Firebase JavaScript SDK の一部として含まれています。

  1. npm を使用してウェブ用の Firebase JS SDK をインストールします。

    npm install firebase

  2. アプリで Firebase を初期化します。

    import { initializeApp } from "firebase/app";
import { initializeAppCheck } from "firebase/app-check";

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

ステップ 4: ローカル開発用に App Check デバッグ プロバイダを構成する

2026 年 7 月上旬から、コンソールの AI Logic のガイド付き設定ワークフローの一環として、Firebase App Checkが Gemini APIを保護するために自動的に適用されます。ローカル開発では、App Check の適用を維持しながら構成証明をバイパスするように App Check デバッグ プロバイダを構成する必要があります。 App Check

localhost からアプリをインタラクティブに実行しているときに（ローカル開発中など）デバッグ プロバイダを使用する方法は次のとおりです。

  1. デバッグビルドで、 self.FIREBASE_APPCHECK_DEBUG_TOKEN を true に設定して、 App Check を初期化する前にデバッグモードを有効にします。例:

    self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
initializeAppCheck(firebaseApp, { /* App Check options */ });

  2. ウェブアプリをローカルで表示し、ブラウザのデベロッパー ツールを開きます。デバッグ コンソールに、デバッグ トークンが表示されます。

    AppCheck debug token: "123a4567-b89c-12d3-e456-789012345678".
You will need to safelist it in the Firebase console for it to work.

  3. デバッグ トークンを App Check に登録します。

    1. Firebase コンソールで、 [セキュリティ] > [App Check] > [アプリ] タブに移動します。

    2. アプリを見つけてオーバーフロー メニュー （）をクリックし、 次に [**デバッグ トークンを管理**]を選択します。

    3. 画面上の手順に沿ってデバッグ トークンを登録します。

デバッグ プロバイダの詳細（新しいデバッグ トークンを取得する方法など）については、公式App Checkドキュメント をご覧ください 。

ステップ 5: サービスを初期化してモデル インスタンスを作成する

Gemini API プロバイダをクリックして、このページでプロバイダ固有のコンテンツとコードを表示します。

モデルにプロンプト リクエストを送信する前に、次の設定を行います。

  1. 選択した API プロバイダのサービスを初期化します。

  2. GenerativeModel インスタンスを作成します。mode を次のいずれかに設定してください。

    • PREFER_ON_DEVICE: デバイスモデルが使用可能な場合はそれを使用します。使用できない場合は、クラウド ホスト型モデルにフォールバックします。

    • ONLY_ON_DEVICE: デバイスモデルが使用可能な場合はそれを使用します。使用できない場合は、例外をスローします。

    • PREFER_IN_CLOUD: クラウド ホスト型モデルが使用可能な場合はそれを使用します。使用できない場合は、デバイスモデルにフォールバックします。

    • ONLY_IN_CLOUD: クラウド ホスト型モデルが使用可能な場合はそれを使用します。使用できない場合は、例外をスローします。 

import { initializeApp } from "firebase/app";
import { getAI, getGenerativeModel, GoogleAIBackend, InferenceMode } from "firebase/ai";

// 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 Gemini Developer API backend service
const ai = getAI(firebaseApp, { backend: new GoogleAIBackend() });

// Create a `GenerativeModel` instance
// Set the mode (for example, use the on-device model if it's available)
const model = getGenerativeModel(ai, { mode: InferenceMode.PREFER_ON_DEVICE });

ステップ 6: デバイスモデルを初期化する

エンドユーザー ページ 操作（ボタンクリックなど）の後または操作時、かつモデルにプロンプト リクエストを送信する前に、initializeDeviceModel() を呼び出す必要があります。ユーザー アクティベーション要件について詳しくは、 Chrome のドキュメント をご覧ください。

import { initializeApp } from "firebase/app";
import { getAI, getGenerativeModel, GoogleAIBackend, InferenceMode } from "firebase/ai";

// 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 Gemini Developer API backend service
const ai = getAI(firebaseApp, { backend: new GoogleAIBackend() });

// Create a `GenerativeModel` instance
// Set the mode (for example, use the on-device model if it's available)
const model = getGenerativeModel(ai, { mode: InferenceMode.PREFER_ON_DEVICE });

// `initializeDeviceModel` must be called:
// (1) after or on an end-user page interaction such as a button click
// and
// (2) before any queries to the model (such as `generateContent()`)
// You may want to `await` this promise if using `ONLY_ON_DEVICE` (see note below).
model.initializeDeviceModel((val) =>
  // Example: "Download progress: 72.62%""
  console.log(`Download progress: ${Math.round(val*10000) / 100}%`)
);

ステップ 7: モデルにプロンプト リクエストを送信する

このセクションでは、さまざまな種類の入力を送信して、次のようなさまざまな種類の出力を生成する方法について説明します。

構造化出力（JSON や列挙型など）を生成する場合は、 次のいずれかの「テキストを生成する」の例を使用し、さらに 指定されたスキーマに従って応答するようにモデルを構成します。

テキストのみの入力からテキストを生成する

このサンプルを試す前に、このガイドの「始める前に」セクションを完了していることを確認してください。

generateContent() を使用すると、テキストを含むプロンプトからテキストを生成できます。

// Imports + initialization of FirebaseApp and backend service + creation of model instance

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

Firebase AI Logic では、 generateContentStream (generateContent) の代わりに、テキスト レスポンスのストリーミングもサポートしています。

テキストと画像（マルチモーダル）の入力からテキストを生成する

このサンプルを試す前に、このガイドの「始める前に」セクションを完了していることを確認してください。

generateContent() を使用すると、テキストと画像ファイルを含むプロンプトからテキストを生成できます。各 入力ファイルのmimeTypeとファイル自体を指定します。

デバイス上での推論でサポートされている入力画像タイプは PNG と JPEG です。

// Imports + initialization of FirebaseApp and backend service + creation of model instance

// Converts a File object to a Part object.
async function fileToGenerativePart(file) {
  const base64EncodedDataPromise = new Promise((resolve) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result.split(',')[1]);
    reader.readAsDataURL(file);
  });
  return {
    inlineData: { data: await base64EncodedDataPromise, mimeType: file.type },
  };
}

async function run() {
  // Provide a text prompt to include with the image
  const prompt = "Write a poem about this picture:";

  const fileInputEl = document.querySelector("input[type=file]");
  const imagePart = await fileToGenerativePart(fileInputEl.files[0]);

  // To generate text output, call `generateContent` with the text and image
  const result = await model.generateContent([prompt, imagePart]);

  const response = result.response;
  const text = response.text();
  console.log(text);
}

run();

Firebase AI Logic では、 generateContentStream (generateContent) の代わりに、テキスト レスポンスのストリーミングもサポートしています。

Google アシスタントの機能

ハイブリッド エクスペリエンスでは、さまざまな追加の構成オプションと機能を使用できます。

デバイス上での推論でまだ利用できない機能

ウェブ SDK のすべての機能がデバイス上での推論で使用できるわけではありません。 次の機能は、デバイス上での推論ではまだサポートされていません（通常はクラウドベースの推論で使用できます）。

  • JPEG と PNG 以外の画像ファイル入力タイプからテキストを生成する

    • クラウド ホスト型モデルにフォールバックできますが、ONLY_ON_DEVICE モードではエラーがスローされます。

  • 音声、動画、ドキュメント（PDF など）の入力からテキストを生成する

    • クラウド ホスト型モデルにフォールバックできますが、ONLY_ON_DEVICE モードではエラーがスローされます。

  • Gemini または Imagen モデルを使用して画像を生成する

    • クラウド ホスト型モデルにフォールバックできますが、ONLY_ON_DEVICE モードではエラーがスローされます。

  • マルチモーダル リクエストで URL を使用してファイルを提供する。デバイスモデルには、インライン データとしてファイルを提供する必要があります。

  • マルチターン チャット

    • クラウド ホスト型モデルにフォールバックできますが、ONLY_ON_DEVICE モードではエラーがスローされます。

  • Gemini Live API を使用した双方向ストリーミング

  • レスポンスの生成に役立つツールをモデルに提供する （関数呼び出し、コード実行、URL コンテキスト、 Google Searchによるグラウンディング、Google Mapsによるグラウンディングなど）

  • トークンのカウント

    • 常にエラーがスローされます。カウントはクラウド ホスト型モデルとデバイスモデルで異なるため、直感的なフォールバックはありません。

  • デバイス上での推論用の Firebase コンソールの AI モニタリング。

    • クラウド ホスト型モデルを使用した推論は、ウェブ用の Firebase AI Logic クライアント SDK を使用した他の推論と同様に モニタリングできます。


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