Firebase Studio 入門：GeminiでフルスタックAIアプリを素早く構築する

# Firebase Admin SDKとGoogle AI SDKをインストール
npm install firebase @google/generative-ai
 
# 環境変数を設定（.env.localに記述）
echo "NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-project-id" >> .env.local

// app/api/chat/route.ts
import { GoogleGenerativeAI } from "@google/generative-ai";
import { NextResponse } from "next/server";
 
// Gemini AIクライアントの初期化
const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY!);
 
export async function POST(request: Request) {
  try {
    const { message, history } = await request.json();
 
    // gemini-2.5-flash モデルを使用（高速・高コスパ）
    const model = genAI.getGenerativeModel({ model: "gemini-2.5-flash" });
 
    // チャット履歴を引き継いで会話を継続
    const chat = model.startChat({
      history: history || [],
      generationConfig: {
        maxOutputTokens: 1000,
        temperature: 0.7,
      },
    });
 
    // ユーザーメッセージを送信してレスポンスを受け取る
    const result = await chat.sendMessage(message);
    const response = result.response.text();
 
    return NextResponse.json({ response });
  } catch (error) {
    console.error("Gemini API エラー:", error);
    return NextResponse.json(
      { error: "AIとの通信中にエラーが発生しました" },
      { status: 500 }
    );
  }
}

// app/components/ChatInterface.tsx
"use client";
import { useState } from "react";
 
interface Message {
  role: "user" | "model";
  parts: { text: string }[];
}
 
export default function ChatInterface() {
  const [messages, setMessages] = useState<Message[]>([]);
  const [input, setInput] = useState("");
  const [loading, setLoading] = useState(false);
 
  const sendMessage = async () => {
    if (!input.trim()) return;
    setLoading(true);
 
    // ユーザーメッセージを追加
    const newMessages: Message[] = [
      ...messages,
      { role: "user", parts: [{ text: input }] },
    ];
    setMessages(newMessages);
    setInput("");
 
    try {
      const res = await fetch("/api/chat", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          message: input,
          history: messages,
        }),
      });
      const data = await res.json();
 
      // AIの返答を追加
      setMessages([
        ...newMessages,
        { role: "model", parts: [{ text: data.response }] },
      ]);
    } catch (err) {
      console.error(err);
    } finally {
      setLoading(false);
    }
  };
 
  return (
    <div className="max-w-2xl mx-auto p-4">
      <div className="h-96 overflow-y-auto border rounded p-4 mb-4 space-y-3">
        {messages.map((msg, i) => (
          <div
            key={i}
            className={`p-3 rounded-lg ${
              msg.role === "user"
                ? "bg-blue-100 ml-8"
                : "bg-gray-100 mr-8"
            }`}
          >
            <span className="font-bold text-xs">
              {msg.role === "user" ? "あなた" : "Gemini"}
            </span>
            <p className="mt-1">{msg.parts[0].text}</p>
          </div>
        ))}
        {loading && (
          <div className="bg-gray-100 mr-8 p-3 rounded-lg">
            <span className="text-gray-500">Gemini が考え中...</span>
          </div>
        )}
      </div>
      <div className="flex gap-2">
        <input
          className="flex-1 border rounded p-2"
          value={input}
          onChange={(e) => setInput(e.target.value)}
          onKeyDown={(e) => e.key === "Enter" && sendMessage()}
          placeholder="メッセージを入力..."
        />
        <button
          onClick={sendMessage}
          disabled={loading}
          className="bg-blue-500 text-white px-4 rounded hover:bg-blue-600 disabled:opacity-50"
        >
          送信
        </button>
      </div>
    </div>
  );
}

// functions/src/generateImage.ts（Cloud Functions）
import * as functions from "firebase-functions";
import { GoogleAuth } from "google-auth-library";
import fetch from "node-fetch";
 
export const generateImage = functions.https.onCall(async (data) => {
  const { prompt } = data;
 
  // Vertex AI Imagen 3 エンドポイント
  const endpoint =
    "https://us-central1-aiplatform.googleapis.com/v1/projects/YOUR_PROJECT_ID/locations/us-central1/publishers/google/models/imagen-3.0-generate-001:predict";
 
  const auth = new GoogleAuth({
    scopes: "https://www.googleapis.com/auth/cloud-platform",
  });
  const client = await auth.getClient();
  const token = await client.getAccessToken();
 
  const response = await fetch(endpoint, {
    method: "POST",
    headers: {
      Authorization: `Bearer ${token.token}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      instances: [{ prompt }],
      parameters: {
        sampleCount: 1,
        aspectRatio: "1:1",
      },
    }),
  });
 
  const result = await response.json() as any;
  // Base64エンコードされた画像データが返される
  return { imageBase64: result.predictions[0].bytesBase64Encoded };
});

// app/lib/liveApi.ts
import { GoogleGenerativeAI } from "@google/generative-ai";
 
const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY!);
 
export async function startLiveSession(onMessage: (text: string) => void) {
  const model = genAI.getGenerativeModel({ model: "gemini-2.0-flash-live" });
 
  // Live APIセッションを開始
  const session = await model.startLiveSession({
    config: {
      responseModalities: ["TEXT"],
      speechConfig: {
        languageCode: "ja-JP",
      },
    },
  });
 
  // テキストメッセージを送信（音声はWebRTC経由）
  session.on("message", (response) => {
    const text = response.candidates?.[0]?.content?.parts?.[0]?.text;
    if (text) onMessage(text);
  });
 
  return session;
}