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 請求先アカウントには、クレジット カードなどの支払い方法が必要です。
  • 特別なプロモーション期間中や、イベントの一環としてこの Codelab を実施している場合は、Google Cloud クレジットを利用できることがあります。
  • Firebase と Google Cloud を初めて使用する場合は、$300 のクレジットと無料トライアル用 Cloud 請求先アカウントを利用できるかどうかご確認ください。

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

  1. Firebase コンソールで、プランをアップグレードします。
  2. Blaze プランを選択します。画面上の手順に沿って、Cloud 請求先アカウントをプロジェクトにリンクします。
    • この Codelab で Google Cloud クレジットを使用している場合、請求先アカウントの名前は Google Cloud Platform Trial Billing Account または My Billing Account になっている可能性があります。
    • このアップグレードの一環として 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. ストレージ バケットの [ファイル] タブをクリックします。
    2. [ファイルをアップロード] をクリックし、スターター コードから products.txt ファイルをアップロードします。このファイルは src/data/products.txt にあります。

Firebase AI Logic を構成する

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

  1. Firebase コンソールで、[AI サービス] > [AI ロジック] に移動します。
  2. [開始] をクリックします。
  3. [Agent Platform Gemini API] カードで、[この API を使ってみる] をクリックし、画面の指示に沿って操作します。このフローにより、Agent Platform 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 コンソールからコピーした firebaseConfig に置き換えます。

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

import { getAI, getTemplateGenerativeModel, AgentPlatformBackend } 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 AgentPlatformBackend() });

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

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

これにより、エンドユーザーに「Appeasement Budget」ルールの詳細が表示されなくなります。

  1. Firebase コンソールで、[AI サービス] > [AI ロジック] > [プロンプト テンプレート] タブに移動します。
  2. [テンプレートを作成] をクリックし、[空白のテンプレート] を選択します。
  3. テンプレート名を Product Agent に、ID を product-agent に設定します。
  4. モデルを gemini-3.1-flash-lite（または利用可能な最新バージョン）に設定します。
  5. この Codelab 用に提供されているスターター コードから、product-agent.prompt の内容をコピーします（このファイルはルート ディレクトリにあります）。次に、このコンテンツを Firebase コンソールのサーバー プロンプト テンプレートの [プロンプトと（省略可）システム指示] フィールドに貼り付けます。このコンテンツは、モデルに「Rugged Operator」として動作し、商品カタログを参照する方法を安全に指示します。
  6. [テスト入力] フィールドで、入力スキーマを次のように定義します。
    {
  "type": "object",
  "required": [
    "query"
  ],
  "properties": {
    "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"
          }
        }
      }
    }
  }
}
  7. [テンプレートを保存] をクリックして、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 を常に使用して、実際のウェブアプリのみが Gemini API にリクエストを送信できるようにし、ボットや不正なクライアントをブロックする必要があります。

  1. Google Cloud コンソールで、[セキュリティ] > [Fraud Defense] に移動します。
  2. [キーを作成] をクリックして、フィールドに入力します。
    • Display name: Codelab Key
    • アプリケーションの種類: ウェブ
    • ドメインリスト: ローカルの Vite サーバーがリクエストを行えるように、localhost と 127.0.0.1 を追加します。
  3. [キーを作成] をクリックして、キーを登録します。
  4. Fraud Defense キーの詳細ページの上部から、サイトキー ID をクリップボードにコピーします。
  5. Firebase コンソールで、[セキュリティ] > [App Check] に移動します。
  6. [アプリ] タブをクリックし、ウェブアプリ（Rugged Web）を開いて、[reCAPTCHA Enterprise] プロバイダをクリックします。
  7. [reCAPTCHA Enterprise サイトキー] フィールドに、Fraud Defense の [キーの詳細] ページからサイトキー ID を貼り付け、[保存] をクリックします。
  8. コードエディタで、再度 src/firebase.ts を開きます。
  9. 次のインポートを先頭に追加します。
    import { initializeAppCheck, ReCaptchaEnterpriseProvider } from "firebase/app-check";
  10. initializeApp(firebaseConfig) 呼び出しの直後に App Check の初期化を追加し、コピーしたサイトキー ID を貼り付けます。
    // Initialize App Check
const appCheck = initializeAppCheck(app, {
  provider: new ReCaptchaEnterpriseProvider('YOUR_RECAPTCHA_ENTERPRISE_SITE_KEY'),
  isTokenAutoRefreshEnabled: true
});
  11. これらのトークンを使用するように getAI() 関数呼び出しを更新します。以下のように変更します。
    const ai = getAI(app, { backend: new AgentPlatformBackend(), useLimitedUseAppCheckTokens: true });
    useLimitedUseAppCheckTokens の値を true に設定すると、短期間のトークンが適用され、バックエンドが受ける可能性のある不正使用を制限できます。

8. アプリを実行する

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

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

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

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

  1. Firebase コンソールで、[設定] > [全般] タブに移動します。
  2. 表示しているプロジェクトが、この Codelab で使用したプロジェクトであることを確認します。Codelab のプロジェクトでない場合は、左上のプロジェクト選択ツール プルダウンを使用してプロジェクトを変更できます。
  3. ページの一番下までスクロールし、[プロジェクトを削除] をクリックします。
  4. 画面上の手順に沿って削除を確定します。

10. 完了

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

達成した内容:

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

次のステップ