Lip Sync Prompter

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 "Lip Sync Prompter" 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 rewrites mismatched lines so actors match flaps; FLock feeds it.
Discipline: Videography & Film (dialogue replacement).
Recipe: FLock Chat (Text Models) (frontier reasoning) as the single creative surface.
Why this kernel: Actors can converse with the agent to warm up and practice emotional delivery before stepping to the mic.

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/flock.functions.ts` that proxies the FLock 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.
- FLock.io is the only AI dependency. All API calls live inside a `createServerFn`
  handler so `FLOCK_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 FLock.io Creative Hackathon organised by StreetKode Fam during Indian Krump Festival 14".

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

/** Built during the FLock.io 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.flock.io/v1/chat/completions", {
      method: "POST",
      headers: {
        "x-litellm-api-key": process.env.FLOCK_API_KEY!,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        model: "qwen3-30b-a3b-instruct-2507",
        messages: [
          { role: "system", content: `You are an expert helper for dialogue replacement. ` +
              `Reply in friendly markdown, under 180 words, with concrete next steps.` },
          { role: "user", content: data.topic },
        ],
        temperature: 0.7,
      }),
    });
    if (r.status === 401) throw new Error("FLock rejected the API key — check FLOCK_API_KEY.");
    if (r.status === 402) throw new Error("FLock balance exhausted — top up at platform.flock.io.");
    if (r.status === 429) throw new Error("FLock rate limited — try again in a moment.");
    if (!r.ok) throw new Error(`FLock 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/flock.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); }
};
```

FLock model ids are bare (LiteLLM style) — e.g. `qwen3-30b-a3b-instruct-2507`,
`deepseek-v4-flash`, `deepseek-v4-pro`, `gemini-3.5-flash`, `kimi-k2.6`. Browse
the live marketplace at https://platform.flock.io/models. Swap by changing one
string — same endpoint, same key.

USER FLOW (the entire app — nothing else exists)
1. Land on the page; the headline previews what the demo does for dialogue replacement.
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. FLock runs the kernel server-side, the result lands on screen, the user can retry or copy.

KEY — only ONE secret is required:
1. `FLOCK_API_KEY`. Sign up at https://platform.flock.io, create a team,
   generate an API key (starts with `sk-...`). Add it to Project Settings ->
   Secrets. Read it only on the server via `process.env.FLOCK_API_KEY`.
   Never prefix with `VITE_`, never expose to the client. One key unlocks
   the entire FLock model marketplace — text, image, video, tools.

CREDIT (must appear in UI footer AND as JSDoc on the server function):
Built during the FLock.io 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.