Cypher Beat Drafter

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 "Cypher Beat Drafter" 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 structures hip-hop sets so crews practice; AIsa generates heavy bass studio tracks to fuel energy.
Discipline: Dance & Choreography (hip-hop choreography).
Recipe: AIsa Video Generation (motion generation) as the single creative surface.
Why this kernel: Music generation creates full, high-energy studio tracks tailored to the specific BPM and mood of street dance.

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 video gen (Wan / Seed):
```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 animate = createServerFn({ method: "POST" })
  .inputValidator((d) => z.object({ brief: z.string().min(1).max(800) }).parse(d))
  .handler(async ({ data }) => {
    // 1. Submit the video task to AIsa Media Gen (async).
    const submit = await fetch("https://api.aisa.one/v1/skills/mediagen", {
      method: "POST",
      headers: {
        "Authorization": `Bearer ${process.env.AISA_API_KEY!}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        model: "seedance-pro",
        type: "video",
        prompt: `hip-hop choreography reel: ${data.brief}. 6 seconds, cinematic.`,
        duration: 6,
      }),
    });
    if (!submit.ok) throw new Error(`AIsa submit failed: ${submit.status}`);
    const { task_id } = await submit.json();

    // 2. Poll until the MP4 URL is ready (AIsa returns ~20-40s).
    for (let i = 0; i < 30; i++) {
      await new Promise((r) => setTimeout(r, 2000));
      const p = await fetch(`https://api.aisa.one/v1/skills/mediagen/${task_id}`, {
        headers: { "Authorization": `Bearer ${process.env.AISA_API_KEY!}` },
      });
      const j = await p.json();
      if (j.status === "succeeded" && j.video_url) return { url: j.video_url as string };
      if (j.status === "failed") throw new Error(`Video failed: ${j.error ?? "unknown"}`);
    }
    throw new Error("Video render timed out.");
  });
```

CLIENT: textarea + "Render reel". While the server fn awaits, show a soft
"Rendering ~30s" pulse. On success, render `<video src={url} controls autoPlay loop />`.

Wan / Seed are async — surface progress; one render at a time keeps it within
the 5-credit budget. See https://aisa.one/docs/agent-skills/mediagen.md.

USER FLOW (the entire app — nothing else exists)
1. Land on the page; the headline previews what the demo does for hip-hop choreography.
2. The primary action (a prompt → progress bar → playable MP4 surface for short motion sketches, loops, or scene reels) 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.