that Replicate token prompt is coming from the sample backend I dropped in earlier. If you’d rather use OpenAI for image generation, let’s switch the backend to OpenAI and delete the Replicate dependency. Here’s exactly what to change.

✅ What we’ll do

Use OpenAI Images API (gpt-image-1)

Generate PNG with transparent background

Return a data URL so your existing frontend just works

Remove any need for REPLICATE_API_TOKEN

1) Install OpenAI (server)
npm i openai

2) Add your key in Replit Secrets

Key: OPENAI_API_KEY

Value: sk-...

(You don’t need REPLICATE_API_TOKEN anymore.)

3) Replace your API route

Update pages/api/generate-image.ts (or the equivalent server route) with this OpenAI version:

// pages/api/generate-image.ts
import type { NextApiRequest, NextApiResponse } from "next";
import OpenAI from "openai";

const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY! });

function bufferToDataUrl(buf: ArrayBuffer, mime = "image/png") {
  const b64 = Buffer.from(buf).toString("base64");
  return `data:${mime};base64,${b64}`;
}

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  try {
    if (req.method !== "POST") return res.status(405).end();

    const { prompt, size = 1024, style = "photo" } = req.body || {};
    if (!prompt || typeof prompt !== "string") {
      return res.status(400).json({ error: "Missing prompt" });
    }

    // gpt-image-1 supports transparent backgrounds
    const out = await openai.images.generate({
      model: "gpt-image-1",
      prompt:
        style === "photo"
          ? `${prompt}, photorealistic, high detail, studio lighting, shallow depth of field`
          : `${prompt}, clean minimal illustration, simple shapes, high contrast`,
      size: `${size}x${size}`,
      // This is the magic for PNG with an alpha channel:
      background: "transparent",
      // response_format defaults to b64_json; we’ll handle that below
    });

    const b64 = out.data?.[0]?.b64_json;
    if (!b64) return res.status(500).json({ error: "Image generation failed" });

    const dataUrl = `data:image/png;base64,${b64}`;
    return res.status(200).json({ dataUrl });
  } catch (err: any) {
    console.error(err);
    return res.status(500).json({ error: err?.message ?? "Internal error" });
  }
}

Notes

background: "transparent" gives you a true PNG with alpha—no separate background-removal step needed.

You can pass style: "photo" from the client when you want photorealism.

4) Keep your existing frontend call

If you used the generateTransparentIconPNG helper I gave you, it already posts to /api/generate-image. Just ensure you call it with photo: true for realistic outputs:

const url = await generateTransparentIconPNG({
  prompt: iconPrompt,
  size: 1024,
  photo: true,
});
setIconUrl(url);


(If your helper still references Replicate, replace its body with the simple fetch('/api/generate-image') POST—it’s already in my earlier message.)

5) Remove Replicate bits (optional but recommended)

npm uninstall replicate

Delete any Replicate imports or token checks