How to add AI image generation to a Next.js app

WINDPAINT_API_KEY=aak_...# Only needed for webhooks (step 5)WINDPAINT_WEBHOOK_SECRET=whsec_...WINDPAINT_WEBHOOK_URL=https://your-app.example.com/api/windpaint/webhook

import "server-only";const API = "https://api.windpaint.ai/v1";export const TERMINAL = new Set(["completed", "failed", "nsfw", "canceled"]);export type MediaRef = {  id: string;  url: string; // API URL: needs your key, so never send it to the browser  content_type: string;  width: number | null;  height: number | null;  duration_s: number | null;};// 202 body from a submit (also what Prefer: wait returns if the job isn't done yet)export type Submitted = {  status: "queued";  request_id: string;  status_url: string;  credits_estimate: string;};// GET /generation/requests/{id}/status, a 200 from Prefer: wait, and a webhook's dataexport type JobStatus = {  status: "queued" | "in_progress" | "completed" | "failed" | "nsfw" | "canceled";  request_id: string;  outputs: MediaRef[];  video: MediaRef | null;  error: string | null;  error_code: string | null;};export class WindpaintError extends Error {  constructor(public status: number, public code: string | null, message: string) {    super(message);  }}export async function windpaint<T>(path: string, init: RequestInit = {}): Promise<T> {  const res = await fetch(API + path, {    ...init,    cache: "no-store",    headers: {      Authorization: `Bearer ${process.env.WINDPAINT_API_KEY}`,      "Content-Type": "application/json",      ...init.headers,    },  });  const body = await res.json().catch(() => null);  if (!res.ok) {    const error = body?.error;    // 401/403 bodies are {"status": false, "error": "Unauthorized"}; others are {"error": {code, message}}    throw typeof error === "object" && error      ? new WindpaintError(res.status, error.code, error.message)      : new WindpaintError(res.status, null, String(error ?? res.statusText));  }  return body as T;}// A download link valid for 15 minutes. Mint a fresh one each time you show the asset.export async function signedUrl(assetId: string): Promise<string> {  const { data } = await windpaint<{ data: { url: string } }>(`/generation/assets/${assetId}/url`);  return data.url;}// What the browser gets: signed links only, no API URLs or project ids.export async function toClient(job: JobStatus) {  const outputs =    job.status === "completed"      ? await Promise.all(          job.outputs.map(async (o) => ({            assetId: o.id,            url: await signedUrl(o.id),            contentType: o.content_type,            width: o.width,            height: o.height,          })),        )      : [];  return { id: job.request_id, status: job.status, outputs };}

import "server-only";// Replace with your auth: the signed-in user's id, or null.export async function currentUserId(): Promise<string | null> {  return "demo-user";}// Replace these with tables in your database.const jobs = new Map<string, string>(); // request_id -> user idconst assets = new Map<string, string>(); // asset id -> user idconst deliveries = new Set<string>(); // webhook-id values already handledexport async function recordJob(requestId: string, userId: string) {  jobs.set(requestId, userId);}export async function jobOwner(requestId: string) {  return jobs.get(requestId) ?? null;}export async function recordAsset(assetId: string, userId: string) {  assets.set(assetId, userId);}export async function ownsAsset(assetId: string, userId: string) {  return assets.get(assetId) === userId;}export async function firstDelivery(webhookId: string) {  if (deliveries.has(webhookId)) return false;  deliveries.add(webhookId);  return true;}

import { NextResponse } from "next/server";import { windpaint, toClient, TERMINAL, WindpaintError, type JobStatus, type Submitted } from "@/lib/windpaint";import { currentUserId, recordAsset, recordJob } from "@/lib/store";const ASPECT_RATIOS = new Set(["1:1", "4:5", "16:9", "9:16"]);export async function POST(request: Request) {  const userId = await currentUserId();  if (!userId) return NextResponse.json({ error: "Sign in first" }, { status: 401 });  const { prompt, aspectRatio = "1:1", key } = await request.json();  if (    typeof prompt !== "string" || !prompt.trim() || prompt.length > 1000 ||    !ASPECT_RATIOS.has(aspectRatio) || typeof key !== "string"  ) {    return NextResponse.json({ error: "Invalid request" }, { status: 400 });  }  let job: JobStatus | Submitted;  try {    job = await windpaint<JobStatus | Submitted>("/generation/capabilities/image.generate", {      method: "POST",      headers: {        Prefer: "wait=30", // hold the response until the image is done, up to 30 s        "Idempotency-Key": `${userId}:${key}`, // a repeated submit returns the same job      },      body: JSON.stringify({        model: "z-image-turbo",        prompt,        resolution: "1k",        aspect_ratio: aspectRatio,        webhook_url: process.env.WINDPAINT_WEBHOOK_URL, // optional, see step 5      }),    });  } catch (err) {    if (err instanceof WindpaintError && err.code === "billing.insufficient_credits") {      console.error("Windpaint balance too low"); // alert yourself; users get a generic error      return NextResponse.json({ error: "Generation is unavailable right now" }, { status: 503 });    }    if (err instanceof WindpaintError && err.status === 422) {      return NextResponse.json({ error: "That prompt couldn't be used" }, { status: 400 });    }    throw err;  }  await recordJob(job.request_id, userId);  // Not done within the wait: the browser polls GET /api/jobs/{id}.  if (!TERMINAL.has(job.status)) {    return NextResponse.json({ id: job.request_id, status: job.status, outputs: [] }, { status: 202 });  }  const done = job as JobStatus;  for (const o of done.outputs) await recordAsset(o.id, userId);  return NextResponse.json(await toClient(done));}

import { NextResponse } from "next/server";import { windpaint, toClient, type JobStatus } from "@/lib/windpaint";import { currentUserId, jobOwner, recordAsset } from "@/lib/store";export async function GET(_request: Request, { params }: { params: Promise<{ id: string }> }) {  const { id } = await params;  const userId = await currentUserId();  // The status endpoint returns any job in your organization, so check ownership here.  if (!userId || (await jobOwner(id)) !== userId) {    return NextResponse.json({ error: "Not found" }, { status: 404 });  }  const job = await windpaint<JobStatus>(`/generation/requests/${id}/status`);  for (const o of job.outputs) await recordAsset(o.id, userId);  return NextResponse.json(await toClient(job));}

import { after } from "next/server";import { Webhook } from "standardwebhooks";import type { JobStatus } from "@/lib/windpaint";import { firstDelivery, jobOwner, recordAsset } from "@/lib/store";import { copyOutput } from "@/lib/copy-output";const wh = new Webhook(process.env.WINDPAINT_WEBHOOK_SECRET!); // whsec_...type JobEvent = { type: string; timestamp: string; data: JobStatus };export async function POST(request: Request) {  const raw = await request.text(); // the exact bytes the signature covers  const headers = Object.fromEntries(request.headers.entries());  let event: JobEvent;  try {    // Checks the signature and rejects timestamps more than 5 minutes off.    event = wh.verify(raw, headers) as JobEvent;  } catch {    return new Response("Bad signature", { status: 400 });  }  // Retries reuse the same webhook-id; handle each delivery once.  if (await firstDelivery(headers["webhook-id"])) {    // Answer within 10 seconds; do the slow work after the response is sent.    after(async () => {      const job = event.data;      const userId = await jobOwner(job.request_id);      if (job.status !== "completed" || !userId) return;      for (const o of job.outputs) {        await recordAsset(o.id, userId);        await copyOutput(o.id, o.content_type);      }    });  }  return new Response(null, { status: 204 });}

import "server-only";import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3";import { signedUrl } from "@/lib/windpaint";const s3 = new S3Client({}); // region, endpoint and credentials from your environmentexport async function copyOutput(assetId: string, contentType: string): Promise<string> {  const res = await fetch(await signedUrl(assetId)); // no Authorization header to the storage host  if (!res.ok) throw new Error(`download failed: ${res.status}`);  const key = `generated/${assetId}`; // keyed by asset id, so a second copy overwrites  await s3.send(    new PutObjectCommand({      Bucket: process.env.MEDIA_BUCKET,      Key: key,      Body: Buffer.from(await res.arrayBuffer()),      ContentType: contentType,    }),  );  return key; // store next to the asset id}

import { NextResponse } from "next/server";import { windpaint, type Submitted } from "@/lib/windpaint";import { currentUserId, ownsAsset, recordJob } from "@/lib/store";const ASPECT_RATIOS = new Set(["1:1", "4:5", "16:9", "9:16"]);export async function POST(request: Request) {  const userId = await currentUserId();  if (!userId) return NextResponse.json({ error: "Sign in first" }, { status: 401 });  const { assetId, prompt, aspectRatio, key } = await request.json();  if (typeof assetId !== "string" || !(await ownsAsset(assetId, userId))) {    return NextResponse.json({ error: "Not found" }, { status: 404 });  }  if (    typeof prompt !== "string" || !prompt.trim() || prompt.length > 500 ||    !ASPECT_RATIOS.has(aspectRatio) || typeof key !== "string"  ) {    return NextResponse.json({ error: "Invalid request" }, { status: 400 });  }  // Wrap in the same try/catch as the image route for 402 and 422.  const job = await windpaint<Submitted>("/generation/capabilities/video.generate", {    method: "POST",    headers: { "Idempotency-Key": `${userId}:${key}` },    body: JSON.stringify({      model: "wan-2.2-i2v",      prompt,      inputs: { start_frame: [assetId] }, // the image's asset id, no download or re-upload      aspect_ratio: aspectRatio, // same ratio the image was made at      webhook_url: process.env.WINDPAINT_WEBHOOK_URL,    }),  });  await recordJob(job.request_id, userId);  return NextResponse.json({ id: job.request_id, status: job.status, outputs: [] }, { status: 202 });}

"use client";import { useState } from "react";type Output = { assetId: string; url: string; contentType: string; width: number | null; height: number | null };type Job = { id: string; status: string; outputs: Output[] };const TERMINAL = ["completed", "failed", "nsfw", "canceled"];async function submit(path: string, body: object): Promise<Job> {  const res = await fetch(path, {    method: "POST",    headers: { "Content-Type": "application/json" },    // One key per click. If you add retries, resend the same key.    body: JSON.stringify({ ...body, key: crypto.randomUUID() }),  });  if (!res.ok) throw new Error((await res.json()).error ?? "Request failed");  let job: Job = await res.json();  let delay = 1500;  while (!TERMINAL.includes(job.status)) {    await new Promise((r) => setTimeout(r, delay));    job = await (await fetch(`/api/jobs/${job.id}`)).json();    delay = Math.min(delay * 1.5, 15000);  }  if (job.status !== "completed") throw new Error("That didn't work. Try a different prompt.");  return job;}export default function Generate() {  const [prompt, setPrompt] = useState("");  const [image, setImage] = useState<Output | null>(null);  const [video, setVideo] = useState<Output | null>(null);  const [busy, setBusy] = useState<"image" | "video" | null>(null);  const [error, setError] = useState<string | null>(null);  async function run(kind: "image" | "video", task: () => Promise<void>) {    setBusy(kind);    setError(null);    try {      await task();    } catch (e) {      setError(e instanceof Error ? e.message : "Something went wrong");    } finally {      setBusy(null);    }  }  const generate = () =>    run("image", async () => {      setVideo(null);      const job = await submit("/api/images", { prompt, aspectRatio: "16:9" });      setImage(job.outputs[0]);    });  const animate = (assetId: string) =>    run("video", async () => {      const job = await submit("/api/videos", {        assetId,        prompt: "Slow push in. Gentle ambient motion in the scene.",        aspectRatio: "16:9",      });      setVideo(job.outputs[0]);    });  return (    <main>      <textarea value={prompt} onChange={(e) => setPrompt(e.target.value)} placeholder="Describe an image" />      <button onClick={generate} disabled={!!busy || !prompt.trim()}>        {busy === "image" ? "Generating..." : "Generate"}      </button>      {error && <p>{error}</p>}      {image && <img src={image.url} width={image.width ?? undefined} height={image.height ?? undefined} alt={prompt} />}      {image && (        <button onClick={() => animate(image.assetId)} disabled={!!busy}>          {busy === "video" ? "Rendering clip (a few minutes)..." : "Animate"}        </button>      )}      {video && <video src={video.url} controls autoPlay loop muted playsInline />}    </main>  );}