公開日: 2025 年 5 月 20 日
ユーザーのニーズに合わせて、使用するプラットフォームやハードウェアに関係なく、組み込みの Prompt APIを使用して Firebase AI Logic でクラウドへのフォールバックを設定できます。
ハイブリッド AI エクスペリエンスを構築する
組み込み AI には、 次のような多くのメリットが あります。
- 機密データのローカル処理: 機密データを扱う場合は、エンドツーエンド暗号化を使用して AI 機能をユーザーに提供できます。
- オフラインでの AI の使用: ユーザーは、オフラインの場合や接続が切断された場合でも、AI 機能にアクセスできます。
これらのメリットはクラウド アプリケーションには適用されませんが、組み込み AI にアクセスできないユーザーにシームレスなエクスペリエンスを提供できます。
Firebase を使ってみる
Firebase プロジェクトを作成し、Firebase をウェブアプリに追加する方法について説明します。
Firebase プロジェクトは、Firebase 固有の構成とサービスを備えた Google Cloud プロジェクトです。詳しくは、 Google Cloud と Firebase をご覧ください。
SDK をインストールする
このワークフローでは npm を使用します。モジュール バンドラまたは JavaScript フレームワーク ツールが必要です。Firebase AI Logic は、モジュール バンドラと連携して、未使用コードを削除して SDK のサイズを小さくするように最適化されています。
Firebase JS SDK をインストールします。
npm install firebase
Firebase AI Logic を設定して保護する
Firebase コンソールで、[AI サービス] > [AI Logic] に移動します。
[開始] をクリックして、設定ワークフローを起動します。
[Gemini API プロバイダ] を選択するよう求められたら、 [Gemini Developer API] を選択することをおすすめします。これにより、無料で簡単に始めることができます。
後でいつでも、 Vertex AI Gemini API （とその課金要件）を設定できます。
コンソールのワークフローで、Firebase AI Logic に必要な API と関連サービスを設定します。
2026 年 7 月上旬から、ワークフローのこの段階では、AI Logic に対して Firebase App Check が自動的に 適用されます。これは、アプリから直接アクセスされたときに Gemini API を保護するための重要なサービスです。開始手順の一環として（このガイドの後半の手順を参照）、App Check が適用されている場合は、ローカル開発用に App Check デバッグ プロバイダを構成する必要があります。
このガイドの次のセクションに進み、ローカル開発用に App Check デバッグ プロバイダを構成してから、Gemini API に最初のリクエストを送信します。
ローカル開発用に App Check デバッグ プロバイダを構成する
localhost からアプリをインタラクティブに実行しているときに（ローカル開発中など）デバッグ プロバイダを使用する方法は次のとおりです。
App Check を初期化する前に、デバッグビルドで
self.FIREBASE_APPCHECK_DEBUG_TOKENをtrueに設定してデバッグモードを有効にします。次に例を示します。self.FIREBASE_APPCHECK_DEBUG_TOKEN = true; initializeAppCheck(app, { /* App Check options */ });ウェブアプリをローカルで表示し、ブラウザのデベロッパー ツールを開きます。デバッグ コンソールに、デバッグ トークンが表示されます。
AppCheck debug token: "123a4567-b89c-12d3-e456-789012345678". You will need to safelist it in the Firebase console for it to work.デバッグ トークンを App Check に登録します。
Firebase コンソールで、 [セキュリティ] > [App Check] > [アプリ] タブに移動します。
アプリを見つけて、オーバーフロー メニュー （）をクリックし、 [**デバッグ トークンの管理**] を選択します。
画面の指示に沿ってデバッグ トークンを登録します。
デバッグ プロバイダの詳細（新しいデバッグ トークンを取得する方法など）については、 App Check の 公式ドキュメントをご覧ください。
Gemini API にリクエストを送信する
テキストまたはマルチモーダル入力でモデルにプロンプトを表示します。このガイドの次のサブセクションの例をご覧ください。
テキスト プロンプト
モデルへの指示にはプレーン テキストを使用できます。たとえば、モデルにジョークを教えてもらうことができます。
リクエストのルーティング方法には、いくつかのオプションがあります。
getGenerativeModel()関数でmodeを'prefer_on_device'に設定すると、組み込み AI が利用可能な場合はデフォルトで使用されます。組み込みモデルが使用できない場合、リクエストはクラウドモデルを使用するようにシームレスにフォールバックします（オンラインの場合）。getGenerativeModel()関数でmodeを'prefer_in_cloud'に設定すると、オンラインの場合はデフォルトでクラウドモデルが使用されます。オフラインの場合、リクエストはシームレスにフォールバックして、利用可能な場合は組み込み AI を使用します。
// Initialize the Google AI service.
const googleAI = getAI(firebaseApp);
// Create a `GenerativeModel` instance with a model that supports your use case.
const model = getGenerativeModel(googleAI, { mode: 'prefer_on_device' });
const prompt = 'Tell me a joke';
const result = await model.generateContentStream(prompt);
for await (const chunk of result.stream) {
const chunkText = chunk.text();
console.log(chunkText);
}
console.log('Complete response', await result.response);
マルチモーダル プロンプト
テキストに加えて、画像や音声でプロンプトを表示することもできます。モデルに画像のコンテンツを説明したり、音声ファイルを文字起こししたりするように指示できます。
画像は、Firebase FileDataPart オブジェクトとして base64 エンコードされた文字列として渡す必要があります。これは、ヘルパー関数 fileToGenerativePart() を使用して行うことができます。
// Converts a File object to a `FileDataPart` object.
// https://firebase.google.com/docs/reference/js/vertexai.filedatapart
async function fileToGenerativePart(file) {
const base64EncodedDataPromise = new Promise((resolve) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result.split(',')[1]);
reader.readAsDataURL(file);
});
return {
inlineData: { data: await base64EncodedDataPromise, mimeType: file.type },
};
}
const fileInputEl = document.querySelector('input[type=file]');
fileInputEl.addEventListener('change', async () => {
const prompt = 'Describe the contents of this image.';
const imagePart = await fileToGenerativePart(fileInputEl.files[0]);
// To generate text output, call generateContent with the text and image
const result = await model.generateContentStream([prompt, imagePart]);
for await (const chunk of result.stream) {
const chunkText = chunk.text();
console.log(chunkText);
}
console.log(Complete response: ', await result.response);
});
デモ
さまざまなデバイス とブラウザで Firebase AI Logic デモをご覧ください。モデルのレスポンスが組み込み AI モデルとクラウドのどちらから提供されるかを確認できます。
Chrome のサポート対象ハードウェアでは、デモで Prompt API と Gemini Nano が使用されます。メイン ドキュメント、JavaScript ファイル、CSS ファイルに対して行われるリクエストは 3 つだけです。
別のブラウザまたは組み込み AI をサポートしていないオペレーティング システムでは、Firebase エンドポイント https://firebasevertexai.googleapis.com に追加のリクエストが送信されます。
参加してフィードバックを共有する
Firebase AI Logic は、ウェブアプリに AI 機能を統合するのに最適な選択肢です。Prompt API が使用できない場合にクラウドにフォールバックすることで、SDK は AI 機能のアクセシビリティと信頼性を高めます。
クラウド アプリケーションはプライバシーと機能に関する新たな期待を生み出すため、データの処理場所をユーザーに通知することが重要です。