Gemini APIで画像を解析し、Next.jsアプリに組み込む方法【2024年版】

🧠 はじめに

Googleが提供するマルチモーダルな生成AI「Gemini API」を使えば、画像から情報を抽出するアプリを簡単に構築できます。この記事では、Next.js + Gemini API + Vercel AI SDKを組み合わせて、画像に関する質問を送信し、その回答をリアルタイムで受け取るチャット型アプリの作り方を紹介します。

✅ 必要なもの

Node.js (v18以上)
Google AI StudioのAPIキー
Next.jsの基本的な知識

⚙️ プロジェクトのセットアップ

まずはNext.jsアプリを作成します：

npx create-next-app@latest gemini-vision-app
cd gemini-vision-app

必要なライブラリをインストール：

npm install @google/generative-ai @vercel/ai

🔑 APIキーの設定

Google AI Studio（こちら）でAPIキーを取得し、.env.local ファイルに以下のように記述します：

GOOGLE_API_KEY=YOUR_API_KEY

🔧 Gemini Vision APIルートの作成

画像とテキストを同時に送信して回答を取得するためのAPIエンドポイントを作成します。

ファイル: src/app/api/chat/route.ts

import { GoogleGenerativeAI } from "@google/generative-ai";
import { GoogleAIStream, StreamingTextResponse } from "ai";

export const dynamic = "force-dynamic";
export const runtime = "nodejs"; // Buffer を使うためNode.js環境に指定

const genAI = new GoogleGenerativeAI(process.env.GOOGLE_API_KEY || "");

export async function POST(req: Request) {
  const {
    messages,
    data,
  }: {
    messages: { role: string; content: string }[];
    data: { imageUrl: string };
  } = await req.json();

  const lastMessage = messages[messages.length - 1];
  const prompt = lastMessage.content;

  const imageResponse = await fetch(data.imageUrl);
  const imageBuffer = await imageResponse.arrayBuffer();
  const imageBase64 = Buffer.from(imageBuffer).toString("base64");

  const imagePart = {
    inlineData: {
      data: imageBase64,
      mimeType: imageResponse.headers.get("Content-Type") || "image/jpeg",
    },
  };

  const model = genAI.getGenerativeModel({ model: "gemini-pro-vision" });

  const stream = await model.generateContentStream([
    { text: prompt },
    imagePart,
  ]);

  const aiStream = GoogleAIStream(stream);
  return new StreamingTextResponse(aiStream);
}

🖼️ フロントエンドの実装

ユーザーが画像URLと質問を入力し、Geminiからの応答を受け取るUIを作成します。

ファイル: src/app/page.tsx

"use client";

import { useChat } from "ai/react";
import { useState } from "react";

export default function Home() {
  const [imageUrl, setImageUrl] = useState(
    "https://storage.googleapis.com/from-gemini/meiro.jpg"
  );

  const {
    messages,
    input,
    handleInputChange,
    handleSubmit,
  } = useChat({
    api: "/api/chat",
    body: { imageUrl },
  });

  return (
    <div className="flex flex-col w-full max-w-md py-24 mx-auto space-y-6">
      <div>
        <h2 className="text-lg font-semibold">画像のURLを入力してください</h2>
        <input
          className="w-full p-2 border rounded"
          value={imageUrl}
          onChange={(e) => setImageUrl(e.target.value)}
        />
      </div>

      <form onSubmit={handleSubmit}>
        <input
          className="w-full p-2 border border-gray-300 rounded"
          value={input}
          placeholder="この画像について質問してください"
          onChange={handleInputChange}
        />
      </form>

      <div className="mt-6 space-y-2">
        {messages.map((m) => (
          <div key={m.id} className="whitespace-pre-wrap">
            <strong>{m.role === "user" ? "User" : "AI"}:</strong> {m.content}
          </div>
        ))}
      </div>
    </div>
  );
}

🔍 動作イメージ

画像URLに「迷路の写真」などを指定
「この迷路のゴールはどこ？」と入力
Geminiが視覚的に解析して回答！

🌟 まとめ

Gemini APIとNext.jsを連携させることで、画像に対する自然語基盤の質問応答アプリを簡単に構築できます。後は導入や应用のアイデア潰し！

商品画像のキャプション生成
医療画像の予備診断
視覚教材の理解支援

など、広範囲な分野での活用が可能です。