Firebase AI Logic を使用して AI を活用したカスタマー サポート エージェントを構築する

1. はじめに

この Codelab では、Rugged Terrain Guide というアウトドア用品の e コマースショップに、スマートなカスタマー サポート チャット ウィジェットを追加します。Firebase AI Logic を使用してこのエージェントを構築し、AI のペルソナ、厳格な緩和対応予算ルールを処理し、商品カタログをコンテキストとして動的に使用するサーバーサイドのプロンプト テンプレート（product-agent）を構成する方法を学びます。

手順:

  • この Codelab のウェブアプリのスターター コードを取得します。
  • Firebase プロジェクトを設定します。
  • ウェブアプリで Firebase サービス（Firebase AI Logic など）を設定して初期化します。
  • Firebase コンソールでサーバーサイドのプロンプト テンプレートを構成します。
  • React のような TypeScript フロントエンドから生成 AI サービスを呼び出してテンプレートにアクセスします。

必要なもの:

  • ウェブブラウザ（Chrome など）。
  • TypeScript と Node.js の基本的な知識。
  • 任意の IDE またはテキスト エディタ。Antigravity をおすすめします。

2. スターター コードを取得する

  1. ターミナルで、スターター リポジトリのクローンを作成します。
    git clone https://github.com/GoogleCloudPlatform/devrel-demos.git
  2. コード ディレクトリに移動し、依存関係をインストールします。
    cd devrel-demos/codelabs/firebase-server-prompt-templates-codelab
npm install

3. Firebase プロジェクトを設定する

Firebase プロジェクトを作成する

  1. Google アカウントを使用して Firebase コンソール にログインします。
  2. ボタンをクリックして新しいプロジェクトを作成し、プロジェクト名（rugged-terrain-ai など）を入力します。
  3. [続行] をクリックします。
  4. Firebase の利用規約が表示されたら、内容を読み、同意して [続行] をクリックします。
  5. （省略可）Firebase コンソールで AI アシスタンス（「Gemini in Firebase」）を有効にします。
  6. この Codelab では Google アナリティクスは不要 なので、Google アナリティクスのオプションをオフに切り替えます 。
  7. [プロジェクトを作成] をクリックし、プロジェクトのプロビジョニングが完了するまで待ってから、[続行] をクリックします。

Firebase のお支払いプランをアップグレードする

この Codelab で Firebase サービスを使用するには、Firebase プロジェクトが従量課金制（Blaze）の料金プランに登録されている必要があります。つまり、Cloud 請求先アカウントにリンクされている必要があります。

  • Cloud 請求先アカウントには、クレジット カードなどのお支払い方法を設定する必要があります。
  • Firebase と Google Cloud を初めて使用する場合は、$300 のクレジットと無料トライアル用 Cloud 請求先アカウントを利用してサービスを試せるかどうか確認してください。
  • イベントの一環としてこの Codelab を行う場合は、Cloud クレジットが利用可能かどうかを主催者にお問い合わせください。

プロジェクトを Blaze プランにアップグレードする手順は次のとおりです。

  1. Firebase コンソールで、プランをアップグレードするために を選択します。
  2. Blaze プランを選択します。画面上の手順に沿って、Cloud 請求先アカウントをプロジェクトにリンクします。
    このアップグレードの一環として Cloud 請求先アカウントを作成する必要があった場合は、Firebase コンソールのアップグレード フローに戻ってアップグレードを完了する必要があるかもしれません。

4. Firebase サービスを設定してアプリを接続する

この Codelab では、Firebase プロジェクトで Cloud Storage for Firebase と Firebase AI Logic を設定する必要があります。また、アプリのソースコードを Firebase プロジェクトに接続する必要があります。

Cloud Storage for Firebase を設定する

この Codelab では、Cloud Storage for Firebase を使用して商品説明を保存します。

  1. Firebase コンソールで、[データベースとストレージ] > [ストレージ] に移動します。
  2. [開始] をクリックします。
  3. デフォルトの Storage バケットのロケーションを選択します。
    US-WEST1、US-CENTRAL1、US-EAST1 のバケットでは、Google Cloud Storage の「常時無料」階層を利用できます。他のすべてのロケーションのバケットは、Google Cloud Storage の料金と使用量に従います。
  4. [本番環境モード] をクリックします。すぐ下のステップで、これらのセキュリティ ルールをこの Codelab に固有のものに更新します。
  5. [作成] をクリックします。
  6. セキュリティ ルールを更新します。
    1. バケットがプロビジョニングされたら、[ルール] タブに移動します。
    2. 次のルールをコピーして貼り付けます。
      rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /products.txt {
      allow read;
    }
  }
}
    3. [公開] をクリックします。
  7. スターター コードから商品説明をアップロードします。
    1. Storage バケットの [ファイル] タブをクリックします。
    2. [ファイルをアップロード] をクリックし、スターター コードから products.txt ファイルをアップロードします。このファイルは src/data/products.txt にあります。

Firebase AI Logic を構成する

Firebase AI Logic は、この Codelab で使用するメインの Firebase サービスです。

  1. Firebase コンソールで、[AI サービス] > [AI Logic] に移動します。
  2. [開始] をクリックします。
  3. [Vertex AI Gemini API] カードで、[この API を使ってみる] をクリックし、画面上の手順に沿って操作します。このフローにより、Vertex AI Gemini API で Firebase AI Logic を使用するために必要な API が有効になります。
  4. （省略可）[AI モニタリングを有効にする] を選択すると、さまざまなアプリレベルの指標と使用状況を観察して、Firebase AI Logic を介したリクエストを包括的に把握できます。

コードを Firebase プロジェクトに接続する

Firebase AI Logic の設定の一環として、Firebase ウェブアプリを作成し、構成をソースコードに追加するよう求められます。

  1. Firebase AI Logic の設定フローでプロンプトが表示されたら、[ウェブ] () アイコンをクリックして新しいウェブアプリを登録します。
  2. アプリに名前を付けます（例: Rugged Web）。
  3. 設定手順から firebaseConfig オブジェクトをコピーします。

次に、スターター コードを更新します。

  1. コードエディタで src/firebase.ts を開きます。
  2. 既存の firebaseConfig を、Firebase コンソールからコピーしたオブジェクトに置き換えます。

ファイルは以下のようになります。

import { getAI, getTemplateGenerativeModel, VertexAIBackend } from "firebase/ai";
import { initializeApp } from "firebase/app";

// Your web app's Firebase configuration
const firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_PROJECT_ID.firebasestorage.app",
    messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
    appId: "YOUR_APP_ID"
};

// Initialize Firebase
export const app = initializeApp(firebaseConfig);

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

5. サーバーサイドのプロンプト テンプレートを作成する

クライアント アプリに複雑な AI プロンプトをハードコードするのではなく、Dotprompt 構文 を使用してサーバーで手順を安全に管理します。

これにより、エンドユーザーは秘密の「緩和対応予算」ルールを確認できなくなります。

  1. Firebase コンソールで、[Vertex AI] または [プロンプト管理] セクションに移動します。
  2. 新しいプロンプト テンプレートを作成し、product-agent という名前を付けます。
  3. モデルを gemini-2.5-flash に設定します。
  4. 入力スキーマを次のように定義します。
    input:
  schema:
    query:
      type: string
      description: the customers ask of the robot
    productId?:
      type: string
      description: the product the customer is looking at right now
    history?:
      type: array
      description: list of previous history between the user and system
      items:
        type: object
        required: [role, contents]
        properties:
          role:
            type: string
          contents:
            type: string
  5. ルート ディレクトリから agent-product.prompt の内容をコピーして、[プロンプトとオプションのシステム指示] フィールドに貼り付けます。これにより、モデルは「Rugged Operator」として動作し、商品カタログを挿入する方法を安全に指示できます。
  6. Firebase コンソールで、product-agent テンプレートを保存して公開します。

6. AI モデルを呼び出す

テンプレートがサーバーで安全に定義されたので、アプリのフロントエンドから呼び出すだけです。

  1. コードエディタで、src/firebase.ts に戻ります。
  2. 初期化の下で、getTemplateGenerativeModel を使用してテンプレートに接続します。
    const model = getTemplateGenerativeModel(ai);

export const callCustomerSupportModel = async (query: string, productId?: string, history?: { role: string, contents: string }[]) => {
    // Generate content using the published 'product-agent' template
    const result = await model.generateContent('product-agent', {
        query,
        productId,
        history,
    });
    return result.response.text();
}

7. Firebase App Check でエージェントを保護する

AI モデルは強力ですが、公開エンドポイントが保護されていない場合、悪用される可能性があります。Firebase App Check を使用して、実際のウェブアプリのみが Vertex AI 生成モデルを呼び出すことができるようにし、ボットと不正なクライアントをブロックする必要があります。

  1. Firebase コンソールで、[ビルド > App Check] に移動します。
  2. [アプリ] タブをクリックし、ウェブアプリ（Rugged Web）を展開して、[reCAPTCHA Enterprise] プロバイダをクリックします。
  3. [新しい reCAPTCHA Enterprise キーを作成] を選択し、プロンプトを入力します。
    • 名前: Codelab Key
    • ドメイン: ローカル Vite サーバーがリクエストを行えるように、localhost と 127.0.0.1 を追加します。
  4. [保存] をクリックしてアプリを登録します。
  5. 登録すると、Firebase コンソールにサイトキー が表示されます。この文字列をコピーします。
  6. コードエディタで、src/firebase.ts をもう一度開きます。
  7. 先頭に次のインポートを追加します。
    import { initializeAppCheck, ReCaptchaEnterpriseProvider } from "firebase/app-check";
  8. initializeApp(firebaseConfig) 呼び出しの直後に App Check の初期化を追加し、コピーしたサイトキーを貼り付けます。
    // Initialize App Check
const appCheck = initializeAppCheck(app, {
  provider: new ReCaptchaEnterpriseProvider('YOUR_RECAPTCHA_ENTERPRISE_SITE_KEY'),
  useLimitedUseAppCheckTokens: true
});
  9. これらのトークンを使用するように getAI() 関数呼び出しを更新します。次の変更を行います。
    const ai = getAI(app, { backend: new VertexAIBackend(), useLimitedUseAppCheckTokens: true });
    useLimitedUseAppCheckTokens の値を true に設定すると、有効期間の短いトークンが適用され、バックエンドが受け取る可能性のある不正使用を制限できます。

8. アプリを実行する

Firebase の構成が完了し、サポート チャット ウィジェットが接続されたので、アプリを実行します。

  1. ターミナルで、Vite 開発サーバーを実行します。
    npm run dev
  2. 指定されたローカル URL（通常は http://localhost:5173/）を開きます。
  3. 右下の Tactical Support フローティング アクション ボタン（FAB）をクリックします。
  4. 次のように、商品について質問してみてください。
    • 「耐候性シェルを探しています」
    • 「サブゼロ ビーニーに欠陥があります。どうすればよいですか？」
    • AI の「緩和対応予算」ロジックをトリガーするために、プッシュバックを続けます。

9. （省略可）Codelab のリソースをクリーンアップする

Google Cloud 請求先アカウントに課金されないようにするには、この Codelab で作成したリソースを削除します。

  1. Firebase コンソールに移動します。
  2. rugged-terrain-ai プロジェクトを選択します。
  3. [プロジェクト設定]（歯車アイコン）に移動します。
  4. 下部までスクロールして [プロジェクトを削除] をクリックします。
  5. 画面上の手順に沿って削除を確認します。

10. 完了

🎊 ミッション完了!テンプレート駆動型の堅牢な AI カスタマー サポート エージェントを統合できました。

達成したこと:

  • クライアント アプリで Firebase と Vertex AI バックエンドを初期化 した。
  • Handlebars と厳格な入力スキーマを使用して安全なサーバーサイドのプロンプト テンプレートを構成 し、エージェントの複雑な動作を定義した。
  • チャット履歴とコンテキスト プロダクト ID を安全に渡してLLM を動的に呼び出し 、内部プロンプト ロジックをクライアントに公開しないようにした。

次のステップ