Next.jsGemini APIVercel AI SDK

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

Google Gemini APIとVercel AI SDKを使って、画像から情報を抽出するアプリを構築しよう。

2025-07-27約7分で読める

🧠 はじめに

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>
  );
}