コンテンツにスキップ

FirebaseAIを介してGeminiに質問を投げる

[質問]

Firebase AI を介して、Geminiに質問を投げる簡単なサンプルが作れますか

[回答] Gemini

はい、もちろんです。Firebase AI Logic (SDK) を使用して、Webアプリ（JavaScript/TypeScript）からGeminiに質問を投げる最小限のサンプルコードをご紹介します。

この方法を使うと、APIキーをフロントエンドに記述する必要がありません。 Firebaseがバックエンドでキーを安全に管理し、中継（プロキシ）してくれます。

1. 準備：Firebaseコンソールでの設定

  1. Firebase コンソールでプロジェクトを作成または選択します。
  2. 左メニューの「Build」→「AI Logic」を開き、セットアップを開始します。
  3. プロバイダーとして「Gemini Developer API」を選択して有効化します。

  4. これにより、Firebaseが自動的にバックエンドでAPIキーを管理するようになります。

  5. App Check（任意ですが本番では必須）を有効にすると、さらにセキュリティが強固になります。

2. サンプルコード (Web SDK v11+)

まず、ライブラリをインストールします。

npm install firebase

次に、アプリの実装例です。

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

// 1. Firebaseの設定（コンソールから取得したもの）
// ここにGeminiのAPIキーは含まれません！
const firebaseConfig = {
  apiKey: "AIza...", // これはFirebase自体の識別キーであり、Geminiの秘密キーではありません
  authDomain: "your-app.firebaseapp.com",
  projectId: "your-app-id",
  storageBucket: "your-app.appspot.com",
  messagingSenderId: "...",
  appId: "..."
};

// 2. 初期化
const app = initializeApp(firebaseConfig);
const ai = getAI(app);

// 3. モデルの取得 (例: gemini-2.0-flash)
const model = getGenerativeModel(ai, { model: "gemini-2.0-flash" });

async function askGemini(prompt) {
  try {
    // 4. 質問を送信
    const result = await model.generateContent(prompt);
    const response = await result.response;

    console.log("Geminiの回答:", response.text());
    return response.text();
  } catch (error) {
    console.error("エラーが発生しました:", error);
  }
}

// 実行例
askGemini("Firebase AI Logicを使うメリットを3つ教えて。");

3. なぜこれで安全なのか？

このコードが動くとき、内部では以下のようなことが起きています。

  1. リクエストの送信: あなたのアプリは、GoogleのGeminiサーバーに直接行くのではなく、Firebaseの専用プロキシエンドポイントにリクエストを送ります。
  2. 認証の検証: Firebase側は「このリクエストは許可されたアプリから来ているか？」を（Firebaseの認証情報やApp Checkを使って）チェックします。
  3. キーの付与: Firebaseのサーバーサイドで、隠されている本物のGemini APIキーをリクエストに付加します。
  4. 回答の返却: Geminiからの回答を、あなたのアプリに安全に差し戻します。

次のステップ

実際に動かしてみる際に、「Firebaseコンソールでの有効化手順」や「特定のフレームワーク（ReactやNext.jsなど）での書き方」について、さらに詳細が必要な箇所はありますか？