Stop-Motion Frame Log

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 "Stop-Motion Frame Log" 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 maintains production logs from your dictation so stop-motion animators keep hands free; ElevenLabs captures it.
Discipline: Filmmaking & Animation (stop-motion production).
Recipe: Lovable AI brain + Realtime Speech-to-Text (live transcription) as the voice surface.
Why this voice surface: Stop-motion requires completely hands-free operation, relying on instant STT to log frames while manipulating puppets.

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.
- TWO TanStack server functions max: one for the Lovable AI call (the brain),
  one for the ElevenLabs call (the voice). Fold them into one if the voice
  primitive does not need server-side text generation.
- ONE client surface (a button, a mic, or a prompt box) wired to those server fns.
- 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 + `ai` + `@ai-sdk/openai-compatible` + `zod`,
  plus (only if the voice kernel needs it) `@elevenlabs/react`. 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.
- Lovable AI Gateway (the brain) + ElevenLabs (the voice). All calls live
  inside `createServerFn` handlers so both keys stay on the server.
- Client surface fits the kernel: a prompt box for TTS / music / SFX, a mic
  for agents, a live caption strip for scribe. Render markdown from the brain
  with `react-markdown` if you show the text on screen.
- 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 Creative AI & Quantum Hackathon organised by StreetKode Fam during Indian Krump Festival 14".

BRAIN — Lovable AI Gateway (free for participants, no key prompt needed):
```ts
// src/lib/ai-gateway.server.ts
import { createOpenAICompatible } from "@ai-sdk/openai-compatible";
export function gateway() {
  return createOpenAICompatible({
    name: "lovable",
    baseURL: "https://ai.gateway.lovable.dev/v1",
    headers: {
      "Lovable-API-Key": process.env.LOVABLE_API_KEY!,
      "X-Lovable-AIG-SDK": "vercel-ai-sdk",
    },
  });
}
```
Default model: `google/gemini-3-flash-preview`. Use `generateText` (or
`streamText` for long output) from `ai`. Keep prompts and model calls inside
the server function — never call the gateway from client code.

SERVER FUNCTION (src/lib/scribe.functions.ts) — mint a scribe token:
```ts
import { createServerFn } from "@tanstack/react-start";

/** Built during the Creative AI & Quantum Hackathon organised by StreetKode Fam during Indian Krump Festival 14 */
export const mintScribeToken = createServerFn({ method: "POST" }).handler(async () => {
  const r = await fetch(
    "https://api.elevenlabs.io/v1/single-use-token/realtime_scribe",
    { method: "POST", headers: { "xi-api-key": process.env.ELEVENLABS_API_KEY! } },
  );
  const { token } = await r.json();
  return { token };
});
```

OPTIONAL BRAIN PASS (src/lib/refine.functions.ts) — Lovable AI shapes the
raw transcript into something useful for stop-motion production:
```ts
import { createServerFn } from "@tanstack/react-start";
import { generateText } from "ai";
import { z } from "zod";
import { gateway } from "./ai-gateway.server";

/** Built during the Creative AI & Quantum Hackathon organised by StreetKode Fam during Indian Krump Festival 14 */
export const refine = createServerFn({ method: "POST" })
  .inputValidator((d) => z.object({ transcript: z.string().min(1) }).parse(d))
  .handler(async ({ data }) => {
    const { text } = await generateText({
      model: gateway()("google/gemini-3-flash-preview"),
      system: `Turn the user's spoken stop-motion production notes into a clean, actionable result.`,
      prompt: data.transcript,
    });
    return { text };
  });
```

CLIENT (`bun add @elevenlabs/react` first):
```tsx
import { useScribe } from "@elevenlabs/react";
const scribe = useScribe({ modelId: "scribe_v2_realtime", commitStrategy: "vad" });
// connect with the minted token, render scribe.partialTranscript live, then
// call refine() with the joined committed transcripts when the user stops.
```

TRANSLATION — skip:
This kernel is non-linguistic (audio in or audio out), so do not add a
language selector or a translation pass. Keep the brain-to-voice path direct.

USER FLOW (the entire app — nothing else exists)
1. Land on the page; the headline previews what the demo does for stop-motion production.
2. The primary action (a live caption strip that types itself as the user speaks, with finalized lines saved as the user pauses) is one tap away; the rest of the layout supports it.
3. Lovable AI does the thinking, ElevenLabs handles the voice surface, and the
   result (audio + any text) stays on screen so the user can retry or share.

KEYS — both already provided to participants for free:
1. `LOVABLE_API_KEY` (the AI brain). Auto-injected in every Lovable project.
   Read it only on the server via `process.env.LOVABLE_API_KEY`. Never prefix
   with `VITE_` and never expose to the client.
2. `ELEVENLABS_API_KEY` (the voice). Best path: ask Lovable to connect the
   ElevenLabs standard connector — it syncs the key automatically and rotates
   from the dashboard. Fallback: paste a key from
   https://elevenlabs.io/app/settings/api-keys into Project Settings -> Secrets.
   Read it only on the server, header `xi-api-key`, never prefix with `VITE_`.

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

Market sizing.

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