Crossfade Narrator

Required key.

Add this in your Lovable project under Settings → Secrets before pasting the prompt below.

Paste into a fresh Lovable project. Make sure the key above is set first. read the build strategy →

Build "Crossfade Narrator" as a ONE-SHOT Lovable build. The participant has only
5 credits — this single message must produce a working demo with no follow-ups.
Single-page TanStack Start app. Cut scope ruthlessly.

CONCEPT
Lovable AI writes transition scripts so DJs engage crowds smoothly; AIsa broadcasts them.
Discipline: Music & Sound Design (live electronic performance).
Recipe: AIsa Chat (LLM Router) (frontier reasoning) as the single creative surface.
Why this kernel: AIsa's LLM router is the brain for live electronic performance in Music & Sound Design — one endpoint, any frontier model, so the answer is grounded, fast, and on brand.

LOVABLE BUDGET (HARD CAP: ONE-SHOT, ~5 CREDITS TOTAL):
The participant has FIVE Lovable credits for the whole build. This prompt MUST
ship a working demo on the FIRST message with zero follow-ups. Engineer for that.
- ONE TanStack Start app, ONE route (`src/routes/index.tsx`). No extra pages, no auth, no nav.
- ONE TanStack server function in `src/lib/aisa.functions.ts` that proxies the AIsa call.
- ONE client surface (a textarea + button, or chat box, or prompt-to-canvas) wired to it.
- NO database, NO Lovable Cloud, NO auth, NO file uploads, NO extra integrations.
- NO tests, NO docs pages, NO settings screens, NO theming toggles.
- Libraries: template defaults + `zod`. Nothing else.
- Keep the diff small enough to land in one build pass. If a feature is not on
  screen in the user flow below, do not build it. Cut scope before adding scope.

STACK
- TanStack Start app, the index route only.
- AIsa is the only AI dependency. All API calls live inside a `createServerFn`
  handler so `AISA_API_KEY` stays on the server.
- Client surface fits the kernel: a prompt box that returns the result.
- Tailwind + shadcn. Editorial look: gold accent on a dark or warm-cream
  background, generous type, one strong headline, one primary action.
- Footer renders: "Built during the AIsa Creative Hackathon organised by StreetKode Fam during Indian Krump Festival 14".

SERVER FUNCTION (src/lib/aisa.functions.ts) — AIsa chat completions:
```ts
import { createServerFn } from "@tanstack/react-start";
import { z } from "zod";

/** Built during the AIsa Creative Hackathon organised by StreetKode Fam during Indian Krump Festival 14 */
export const ask = createServerFn({ method: "POST" })
  .inputValidator((d) => z.object({ topic: z.string().min(1).max(2000) }).parse(d))
  .handler(async ({ data }) => {
    const r = await fetch("https://api.aisa.one/v1/chat/completions", {
      method: "POST",
      headers: {
        "Authorization": `Bearer ${process.env.AISA_API_KEY!}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        model: "gpt-4o-mini",
        messages: [
          { role: "system", content: `You are an expert helper for live electronic performance. ` +
              `Reply in friendly markdown, under 180 words, with concrete next steps.` },
          { role: "user", content: data.topic },
        ],
        temperature: 0.7,
      }),
    });
    if (r.status === 402) throw new Error("AIsa balance exhausted — top up at console.aisa.one.");
    if (r.status === 429) throw new Error("AIsa rate limited — try again in a moment.");
    if (!r.ok) throw new Error(`AIsa chat failed: ${r.status}`);
    const j = await r.json();
    return { reply: j.choices[0].message.content as string };
  });
```

CLIENT (in `src/routes/index.tsx`):
```tsx
import { useServerFn } from "@tanstack/react-start";
import { useState } from "react";
import ReactMarkdown from "react-markdown";
import { ask } from "@/lib/aisa.functions";

const run = useServerFn(ask);
const [topic, setTopic] = useState("");
const [reply, setReply] = useState<string | null>(null);
const [busy, setBusy] = useState(false);

const onAsk = async () => {
  setBusy(true); setReply(null);
  try { const { reply } = await run({ data: { topic } }); setReply(reply); }
  finally { setBusy(false); }
};
```

Use BARE model ids (e.g. `gpt-4o-mini`, `claude-3-5-sonnet`, `gemini-2.5-flash`,
`qwen2.5-72b`) — NO `openai/`, `anthropic/`, or `google/` prefix. Browse the live
list at https://aisa.one/models.

USER FLOW (the entire app — nothing else exists)
1. Land on the page; the headline previews what the demo does for live electronic performance.
2. The primary action (a prompt box or chat surface that returns markdown the user can read, copy, or act on) is one tap away; the rest of the layout supports it.
3. AIsa runs the kernel server-side, the result lands on screen, the user can retry or copy.

KEY — only ONE secret is required:
1. `AISA_API_KEY`. Sign up at https://console.aisa.one, copy the key into
   Project Settings -> Secrets. Read it only on the server via
   `process.env.AISA_API_KEY`. Never prefix with `VITE_`, never expose
   to the client. A single key unlocks chat, image, video and skills.

CREDIT (must appear in UI footer AND as JSDoc on the server function):
Built during the AIsa Creative Hackathon organised by StreetKode Fam during Indian Krump Festival 14

Market sizing.

Indicative figures for hackathon pitches — refine with your own research before raising.