AI API for Indie Hackers, Packs From $5

npm install picx-ai

# .env, server only. Never send this key to the browser.
PICX_API_KEY=pxsk_your_key

import { PicX } from "picx-ai";

export const picx = new PicX(process.env.PICX_API_KEY);
export const MODEL = "gemini-3.1-flash-image-preview";
export const SIZE = "1K" as const;

// Read the live price, and refuse early if the balance can't cover it.
export async function canAfford() {
  const [models, account] = await Promise.all([
    picx.models.listAll({ type: "image" }),
    picx.account.me(),
  ]);
  const price = models.find((m) => m.id === MODEL)?.credits[SIZE];
  const balance = account.credits?.balance ?? 0;
  return { price, balance, ok: typeof price === "number" && balance >= price };
}

import { randomUUID } from "node:crypto";
import { PicXInsufficientCreditsError } from "picx-ai";
import { MODEL, SIZE, canAfford, picx } from "@/lib/picx";

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

  const { ok, price, balance } = await canAfford();
  if (!ok) return Response.json({ error: "out_of_credits", price, balance }, { status: 402 });

  try {
    const image = await picx.images.generate(
      { prompt, model: MODEL, size: SIZE, aspect_ratio: "16:9" },
      // With a key, the SDK can safely retry a dropped connection.
      { idempotencyKey: randomUUID() },
    );
    return Response.json({ url: image.url, credits: image.credits_used });
  } catch (err) {
    if (err instanceof PicXInsufficientCreditsError) {
      return Response.json({ error: "out_of_credits" }, { status: 402 });
    }
    throw err;
  }
}

"use client";

import { useState } from "react";

export default function Page() {
  const [url, setUrl] = useState<string>();
  const [busy, setBusy] = useState(false);

  async function submit(form: FormData) {
    setBusy(true);
    const res = await fetch("/api/generate", {
      method: "POST",
      body: JSON.stringify({ prompt: form.get("prompt") }),
    });
    const data = await res.json();
    setUrl(data.url);
    setBusy(false);
  }

  return (
    <form action={submit}>
      <input name="prompt" required placeholder="Describe your cover image" />
      <button disabled={busy}>{busy ? "Working..." : "Generate"}</button>
      {url && <img src={url} alt="Generated cover" />}
    </form>
  );
}