Generate images from text prompts in a Next.js route with OpenAI GPT Image

Generate images from text prompts in a Next.js route with OpenAI GPT Image | Wirestack

What you get

A Next.js Route Handler at /api/image that turns a text prompt into a PNG with OpenAI's GPT Image 2.5 Flare model, plus a tiny page to try it.

Prerequisites

A Next.js app using the App Router (app directory)
An OpenAI API key. OpenAI notes you may need to complete API Organization Verification in the developer console before using GPT Image models.

Steps

Install the OpenAI SDK:

Shell

npm install openai

Add your key to .env.local (the SDK reads OPENAI_API_KEY automatically):

Shell

OPENAI_API_KEY=your-key-here

Create app/api/image/route.ts. It calls the Image API and returns the base64 image as a data URL. gpt-image-2.5-flare is OpenAI's fast everyday model; switch to gpt-image-2.5-sunburst when editing precision matters more:

TypeScript

import OpenAI from "openai";

const openai = new OpenAI();

export async function POST(request: Request) {
  const { prompt } = await request.json();

  const result = await openai.images.generate({
    model: "gpt-image-2.5-flare",
    prompt,
  });

  const image_base64 = result.data?.[0]?.b64_json;

  if (!image_base64) {
    return Response.json({ error: "No image returned" }, { status: 500 });
  }

  return Response.json({ image: `data:image/png;base64,${image_base64}` });
}

TSX

"use client";

import { useState } from "react";

export default function ImagePage() {
  const [prompt, setPrompt] = useState("");
  const [image, setImage] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  async function generate() {
    setLoading(true);
    const res = await fetch("/api/image", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ prompt }),
    });
    const data = await res.json();
    setImage(data.image ?? null);
    setLoading(false);
  }

  return (
    <main>
      <input value={prompt} onChange={(e) => setPrompt(e.target.value)} placeholder="Describe an image" />
      <button onClick={generate} disabled={loading || !prompt}>
        {loading ? "Generating..." : "Generate"}
      </button>
      {image && <img src={image} alt={prompt} width={512} />}
    </main>
  );
}

Generate images from text prompts in a Next.js route with OpenAI GPT Image

What you'll need

What you get

Prerequisites

Steps

Test it