Now let’s make sure your BrandKit page starts cleared (no leftover preview/error/prompt state when the user first loads it).

What to reset on load

Prompt box → should be empty (or a default placeholder, not prefilled).

Status → "idle".

Error → null.

svgUrl → null (so preview box shows “No logo generated yet”).

Prediction ID → null.

Updated Component

Here’s a cleaned-up RecraftGenerator.tsx where everything is blank at start:

"use client";
import React, { useState } from "react";

type GenState = "idle" | "running" | "done" | "error";

export default function RecraftGenerator() {
  // 🔹 Start with empty prompt
  const [prompt, setPrompt] = useState("");
  const [status, setStatus] = useState<GenState>("idle");
  const [error, setError] = useState<string | null>(null);
  const [svgUrl, setSvgUrl] = useState<string | null>(null);
  const [predictionId, setPredictionId] = useState<string | null>(null);

  async function onGenerate() {
    setStatus("running");
    setError(null);
    setSvgUrl(null);
    setPredictionId(null);

    try {
      const res = await fetch("/api/vector/recraft", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ prompt }),
      });

      const json = await res.json();
      if (!res.ok) throw new Error(json.error || "Generation failed");

      setSvgUrl(json.svgUrl);
      setPredictionId(json.predictionId);
      setStatus("done");
    } catch (e: any) {
      setError(e.message || "Something went wrong");
      setStatus("error");
    }
  }

  async function onDownload() {
    if (!svgUrl) return;
    const resp = await fetch(svgUrl);
    const svgText = await resp.text();

    const blob = new Blob([svgText], { type: "image/svg+xml;charset=utf-8" });
    const url = URL.createObjectURL(blob);

    const a = document.createElement("a");
    a.href = url;
    a.download = makeFileName(prompt);
    a.click();

    URL.revokeObjectURL(url);
  }

  return (
    <div className="w-full max-w-3xl space-y-4">
      {/* Prompt input */}
      <div className="space-y-2">
        <label className="block text-sm font-medium">Prompt</label>
        <textarea
          className="w-full rounded-lg border p-3 leading-relaxed"
          rows={3}
          value={prompt}
          onChange={(e) => setPrompt(e.target.value)}
          placeholder="Describe your logo (e.g., 'minimal coffee bean icon, vector, no text')"
        />
      </div>

      {/* Generate + Download */}
      <div className="flex items-center gap-3">
        <button
          onClick={onGenerate}
          disabled={status === "running" || !prompt.trim()}
          className="rounded-xl px-4 py-2 font-semibold text-white disabled:opacity-60"
          style={{ background: "#05445e" }}
        >
          {status === "running" ? "Generating…" : "Generate SVG"}
        </button>

        {svgUrl && (
          <button
            onClick={onDownload}
            className="rounded-xl px-4 py-2 font-semibold"
            style={{ border: "1px solid #05445e", color: "#05445e" }}
          >
            Download SVG
          </button>
        )}
      </div>

      {/* Prediction ID */}
      {predictionId && (
        <p className="text-xs opacity-70">
          Prediction: <code>{predictionId}</code>
        </p>
      )}

      {/* Error */}
      {error && (
        <div className="rounded-lg border border-red-300 bg-red-50 p-3 text-sm text-red-700">
          {error}
        </div>
      )}

      {/* Preview box */}
      <div className="rounded-2xl border p-4">
        <div className="mb-2 text-sm opacity-70">Preview</div>
        <div
          className="flex items-center justify-center rounded-xl bg-white"
          style={{
            height: 280,
            border: "1px dashed #d0d7de",
          }}
        >
          {status === "idle" && (
            <div className="text-sm opacity-60">No logo generated yet</div>
          )}
          {status === "running" && (
            <div className="text-sm opacity-60">Working…</div>
          )}
          {svgUrl && (
            <img
              src={svgUrl}
              alt="SVG preview"
              style={{
                maxWidth: "100%",
                maxHeight: "100%",
                objectFit: "contain",
                display: "block",
              }}
            />
          )}
        </div>
      </div>
    </div>
  );
}

function makeFileName(prompt: string) {
  const base =
    prompt
      .toLowerCase()
      .replace(/[^a-z0-9]+/g, "-")
      .replace(/(^-|-$)/g, "") || "vector";
  return `${base}.svg`;
}

🔥 Changes I made

prompt now defaults to empty string.

“Generate” button is disabled if prompt is blank.

status starts as "idle", so preview says “No logo generated yet.”

When you click Generate, it clears everything (error, svgUrl, predictionId).