Firebase AI Logic入門: WebアプリにGeminiを統合し、生成AI機能を実装する方法

今日のWebアプリケーション開発において、ユーザー体験を向上させるための生成AIの活用は非常に注目されています。本記事では、Googleが提供するFirebaseの新機能「Firebase AI Logic」を活用し、強力な生成AIモデルであるGeminiをWebアプリケーションに統合する方法を、具体的なレシピ生成アプリの例を通して詳しく解説します。クライアントサイドから直接AIモデルを呼び出すことのメリットや、簡単なセットアップ手順、そして実際のコード例をご紹介しますので、ぜひ最後までご覧ください。

Friendly Mealsアプリの紹介

本記事では、Firebaseチームが開発した「Friendly Meals」というミールプランニングアプリを例に、Firebase AI Logicの強力さを説明します。Friendly Mealsは、ユーザーが自宅にある食材リストと「イタリアンレシピ」といった好みを入力するだけで、Firebase AI LogicがGeminiモデルを呼び出し、美味しいレシピを生成するWebアプリケーションです。このアプリを通じて、Firebase AI Logicがいかに簡単に、そしてセキュアに生成AI機能をWebアプリに組み込めるかを見ていきましょう。

Firebase AI Logicとは？

Firebase AI Logicは、Generative AIモデル（GeminiやImagenなど）へのアクセスを提供するFirebaseの新しいプロダクトです。最大の特徴は、これらの強力なAIモデルにクライアントサイドのSDKを通じて直接アクセスできる点にあります。

• クライアントサイドでの実行: 通常、AIモデルへの呼び出しはサーバーサイドの環境（Cloud Functionsなど）で行われることが多いですが、Firebase AI Logicはエンドユーザーのデバイス上で直接実行されるように設計されています。これにより、モバイルアプリやWebアプリから簡単にモデルを呼び出すことが可能です。
• Genkitとの違い: AI SDKに詳しい方は「Genkit」を思い浮かべるかもしれません。GenkitはFirebase Cloud FunctionsやFirebase App Hostingバックエンドのような信頼できるサーバー環境で実行されることを目的としています。一方、Firebase AI Logicはクライアントサイドに特化しており、それぞれのユースケースに合わせて使い分けられます。
• APIキーのセキュリティ: Firebase AI Logicは、アプリのセキュリティを維持するよう設計されています。Firebase App Checkを使用することで、APIキーのセキュリティ管理をFirebaseが代行するため、開発者はセキュリティについて心配することなくAI機能を組み込むことができます。

Firebase AI LogicがサポートするAPIや活用事例についてさらに詳しく知りたい場合は、公式ドキュメントや関連動画をご参照ください。

Firebase AI Logicのセットアップ手順

実際にコードを書き始める前に、いくつかのセットアップが必要です。

1. Firebaseプロジェクトの準備

既にFirebaseプロジェクトをお持ちであることを前提とします。もしお持ちでない場合は、Firebaseの公式ドキュメントを参照し、新しいプロジェクトを作成し、Webアプリを接続してください。

2. Firebase AI Logicの有効化

Firebaseプロジェクトが準備できたら、Firebaseコンソールに移動し、「AI Logic」ページで「開始」をクリックして機能を有効化します。

• APIの選択: 本記事では、事前の支払い情報が不要な「Gemini Developer API」を使用します。もし「Vertex AI Gemini API」を選択する場合は、請求プランをBlazeにアップグレードするよう求められますが、この時点では課金されません。API呼び出しを開始した時点で初めて課金が発生します。料金の詳細については、公式ドキュメントをご確認ください。

3. Webアプリへの依存関係の追加

コンソールでFirebase AI Logicを有効化したら、WebアプリにFirebase AI Logicの依存関係を追加します。

まず、Firebase JavaScript SDKをnpmでインストールします。

npm install firebase

次に、他のFirebaseを使用するWebアプリと同様にinitializeAppを呼び出します。

import { initializeApp } from 'firebase/app';

// Your web app's Firebase configuration
const firebaseConfig = {
  // ...
};
const app = initializeApp(firebaseConfig);

Firebase SDKを初期化する場所と同じファイルで、Firebase AIサブパッケージからgetAI関数とGoogleAIBackendクラスをインポートします。

import { getAI, GoogleAIBackend } from 'firebase/ai'; // Firebase AIサブパッケージからインポート

const ai = getAI(app, new GoogleAIBackend());
export { ai };

このaiインスタンスをエクスポートすることで、フロントエンドコードのどこからでも使用できるようになります。

補足：もし「Vertex AI Gemini API」を使用する場合は、GoogleAIBackendの代わりにVertexAIBackendクラスをインポートして渡す必要があります。

import { getAI, VertexAIBackend } from 'firebase/ai'; // VertexAIBackendをインポート

const ai = getAI(app, new VertexAIBackend());
export { ai };

これでセットアップは完了です。いよいよGeminiと対話するJavaScriptコードを記述する準備が整いました。

Geminiとの対話コードを実装する

1. GenerativeModelの取得

まず、Firebase AIサブパッケージからgetGenerativeModelをインポートします。

import { getGenerativeModel } from 'firebase/ai';
import { ai } from './firebase-init'; // 前のステップでエクスポートしたAIインスタンス

次に、この関数を呼び出し、前のステップでエクスポートしたaiインスタンスとモデル名を渡します。

const model = getGenerativeModel(ai, { model: 'gemini-1.5-flash' });

この例ではgemini-1.5-flashを使用していますが、要件に最適なモデルを選択できます。サポートされているモデル、そのクォータ、料金については、Firebaseの公式ドキュメントをご確認ください。

2. 生成設定と安全設定のカスタマイズ（オプション）

生成プロセスは、GenerationConfigオブジェクトでカスタマイズできます。例えば、temperature（応答のランダム性）やmaxOutputTokens（出力トークンの最大数）などを設定できます。

const model = getGenerativeModel(ai, {
  model: 'gemini-1.5-flash',
  generationConfig: {
    temperature: 0.9,
    maxOutputTokens: 2000,
  },
  safetySettings: [
    // 有害なコンテンツを制御するための設定
    // { category: 'HARM_CATEGORY_DANGEROUS_CONTENT', threshold: 'BLOCK_MEDIUM_AND_ABOVE' }
  ],
});

また、実験的な機能として、Chromeのオンデバイスモデルとクラウドホスト型モデルを組み合わせて使用できるハイブリッドAI APIも提供されています。詳細については、リリースノートや関連動画をご覧ください。

本記事では、シンプルさを保つため、これらのカスタマイズオプションはデフォルト設定で進めます。

3. レシピ生成関数の作成

いよいよ、ユーザーの入力に基づいてレシピを生成する関数を記述します。LLM（大規模言語モデル）の応答生成には時間がかかるため、SDKの関数はPromiseを返します。そのため、async/awaitを使用して非同期処理を適切に扱います。

ユーザー体験の観点から、モデルを呼び出す直前にローディング状態を開始し、応答を受け取ったらローディング状態を解除することが推奨されます。これにより、レシピが生成されていることをユーザーに視覚的に伝えることができます。

以下にレシピを生成するコード例を示します。

import { getGenerativeModel } from 'firebase/ai';
import { ai } from './firebase-init'; // Firebase AIインスタンス

const model = getGenerativeModel(ai, { model: 'gemini-1.5-flash' });

async function generateRecipe(ingredients: string[], preferences: string): Promise<string> {
  // ローディング状態を開始する（例: UIの更新）
  // setLoading(true);

  // プロンプトテンプレート文字列を作成
  const prompt = `以下の材料とユーザーの好みに基づいて、美味しいレシピを提案してください。
材料: ${ingredients.join(', ')}
好み: ${preferences}
提案されるレシピの形式は、料理名、必要な材料リスト、そして調理手順を明確に記載してください。`;

  try {
    // model.generateContentを呼び出し、プロンプトを渡す
    const result = await model.generateContent(prompt);
    const response = await result.response;
    const recipeText = response.text();
    return recipeText;
  } catch (error) {
    console.error("レシピの生成中にエラーが発生しました:", error);
    return "レシピの生成に失敗しました。もう一度お試しください。";
  } finally {
    // ローディング状態を解除する（例: UIの更新）
    // setLoading(false);
  }
}

// 例:
// const myIngredients = ["鶏肉", "玉ねぎ", "トマト", "パスタ"];
// const myPreferences = "イタリアン";
// generateRecipe(myIngredients, myPreferences).then(recipe => {
//   console.log(recipe);
// });

上記のコードでは、ユーザーが入力した材料と好みをプレースホルダーとして含むプロンプトテンプレート文字列を作成しています。その後、model.generateContentを呼び出し、生成されたレシピをresponse.text()で読み取ります。この関数は、Webアプリ内で呼び出された任意の場所にレシピテキストを返します。

まとめ

本記事では、Firebase AI Logicを使用して、わずか数分でWebアプリケーションに生成AI機能を組み込む方法を解説しました。Friendly Mealsアプリの例を通じて、Firebase AI Logicがいかに簡単に、そしてセキュアにGeminiのような強力なAIモデルにクライアントサイドからアクセスできるかをお分かりいただけたでしょうか。

Firebase AI Logicは、イメージ生成、双方向ストリーミング、多ターンチャットなど、さらに多くのAI機能の追加を可能にします。今後もFirebase AI Logicに関するチュートリアルが公開される予定ですので、ぜひこのチャンネルを購読して、最新情報をチェックしてください。

GitHubには、本動画で紹介されたすべてのコードが公開されています。より詳細な実装を確認したい方は、ぜひそちらもご参照ください。

Happy coding!

参考動画 Firebase AI Logic 入門: Webアプリに生成AI機能を組み込む方法