Replit Agent — Fix Style Packs (Frontend + Backend + QA)

Goal: Style Packs work end-to-end on the Brand Kit page without breaking the base generator. Balanced = 1 geometric + 1 monogram + 1 badge. Monogram/Badge packs = 3 focused variants. Frontend calls the AI route and displays results.

A) Frontend

BrandKit page — locate the actual file in this project (it appears to be client/src/pages/BrandKit.tsx). Do not remove the existing template generator (generateBrandKit). We use it for palettes/fonts, then we call AI to replace kit.logos.

Add state: const [stylePack, setStylePack] = useState<"balanced"|"monogram"|"badge">("balanced");

Add a <select> labeled Style Pack with options:

balanced → label “Balanced (Geometric + Monogram + Badge)”

monogram → label “Monogram-focused (3x)”

badge → label “Badge-focused (3x)”

Find the “Generate AI Logos” button handler. When calling generateAiLogos(...), include stylePack in the payload. After the call, set kit.logos = variants.

AI service — create or update client/src/services/ai/logos.ts:

export type StylePack = "balanced" | "monogram" | "badge";
export async function generateAiLogos(payload: {
  businessName: string;
  personality: "Modern" | "Natural" | "Luxury" | "Friendly";
  palette?: { primary: string; secondary: string; accent: string };
  keywords?: string[];
  stylePack?: StylePack;
  variantType?: "geometric" | "monogram" | "badge"; // for single reroll (future)
}) {
  const res = await fetch("/api/logos/generate", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(payload),
  });
  if (!res.ok) throw new Error("AI logo generation failed");
  const data = await res.json() as { variants: { filename: string; svg: string }[] };
  return data.variants;
}


Ensure imports in BrandKit.tsx use this helper.

B) Backend

Route file — use a single route file, e.g. server/ai-logos.ts. If your file is server/routes/ai-logos.ts, keep that path but be consistent.

Ensure Express JSON body parsing is enabled: app.use(express.json());

Mount order: app.use("/api/logos", aiLogos) before any static/SPA fallback middleware so /api/* doesn’t return HTML.

Prompt logic — read stylePack from req.body and inject bias text:

balanced: return one of each; filenames: logo-geometric.svg, logo-monogram.svg, logo-badge.svg.

monogram: three monograms; filenames: logo-monogram-a.svg, logo-monogram-b.svg, logo-monogram-c.svg.

badge: three badges; filenames: logo-badge-a.svg, logo-badge-b.svg, logo-badge-c.svg.

Keep constraints: self-contained SVG, include width/height/viewBox, no <script>/events/<image>/<foreignObject>, 8px grid alignment, even strokes, WCAG AA contrast, 32px–1024px legibility, no trademark resemblance.

Responses API call — use the OpenAI Responses API (not chat). Example:

const resp = await openai.responses.create({
  model: process.env.OPENAI_MODEL || "gpt-4.1-mini",
  input: prompt,
  temperature: 0.2,
  max_output_tokens: 1500
  // If you previously set `seed` and it threw an error, remove it.
});
// Extract text safely:
const text = (resp.output_text ?? resp.output?.[0]?.content?.[0]?.text ?? "").trim();
const cleaned = text.replace(/^```json\s*/i, "").replace(/^```\s*/i, "").replace(/```$/i, "").trim();
const data = JSON.parse(cleaned);
// Normalize to array shape:
const variants = Array.isArray(data?.variants) ? data.variants
               : Array.isArray(data) ? data
               : (data?.filename && data?.svg) ? [data] : [];
res.json({ variants });


C) Dev proxy / port

If the client runs on Vite and the server on another port, set Vite proxy in vite.config.ts:

server: { proxy: { "/api": "http://localhost:5000" } }


Otherwise, ensure both client and API share the same origin so /api/logos/generate does not hit SPA HTML fallback.

D) QA (must pass)

Balanced pack:

curl -X POST http://localhost:5000/api/logos/generate \
-H "Content-Type: application/json" \
-d '{"businessName":"IBrandBiz","personality":"Modern","stylePack":"balanced"}'


Expect: { "variants":[ {"filename":"logo-geometric.svg",...}, {"filename":"logo-monogram.svg",...}, {"filename":"logo-badge.svg",...} ] }

Monogram pack:
Expect filenames logo-monogram-a.svg, -b.svg, -c.svg.

Badge pack:
Expect filenames logo-badge-a.svg, -b.svg, -c.svg.

Frontend: On Brand Kit page, choose a Style Pack → Generate AI Logos → three cards render; ZIP export still works.

Commit message: Style Packs: balanced/monogram/badge end-to-end; route mount order + Responses API extraction fixed.

If she still gets HTML instead of JSON, tell her to:

Move app.use("/api/logos", aiLogos) above any static app.use(express.static(...)) or SPA fallback.

Confirm the client is calling /api/logos/generate (not a full URL to the Vite dev server without proxy).