Dolby Whisper Sphere

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 "Dolby Whisper Sphere" 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 translates your written spatial positioning commands into Dolby Atmos panning automation; FLock transcribes your real-time mixing notes.
Discipline: Music & Sound Design (spatial audio mixing).
Recipe: FLock Agents (Tool Use) (function calling) as the single creative surface.
Why this kernel: STT lets immersive mixers dictate 3D object placements while listening in the sweet spot without touching a mouse.

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 tool use:
```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 plan = createServerFn({ method: "POST" })
  .inputValidator((d) => z.object({ task: z.string().min(1).max(1000) }).parse(d))
  .handler(async ({ data }) => {
    // Define the typed tools the model can call. Keep them small and concrete
    // for spatial audio mixing. The handler executes each tool the model asks for, then
    // sends the results back so the model can finish its plan.
    const tools = [{
      type: "function",
      function: {
        name: "record_step",
        description: `Record one concrete step in the plan for spatial audio mixing.`,
        parameters: {
          type: "object",
          properties: {
            step: { type: "integer" },
            title: { type: "string" },
            detail: { type: "string" },
          },
          required: ["step", "title", "detail"],
        },
      },
    }];

    const messages: any[] = [
      { role: "system", content:
          `You are a planning agent for spatial audio mixing. Call record_step for each ` +
          `concrete step, then reply with a one-sentence summary. Never invent facts.` },
      { role: "user", content: data.task },
    ];

    const steps: Array<{step:number;title:string;detail:string}> = [];
    for (let hop = 0; hop < 4; hop++) {
      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: "deepseek-v4-pro",  // tools-capable
          messages,
          tools,
          tool_choice: "auto",
        }),
      });
      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 agents failed: ${r.status}`);
      const j = await r.json();
      const msg = j.choices[0].message;
      messages.push(msg);

      const calls = msg.tool_calls ?? [];
      if (!calls.length) return { summary: msg.content as string, steps };

      for (const c of calls) {
        const args = JSON.parse(c.function.arguments);
        steps.push(args);
        messages.push({
          role: "tool",
          tool_call_id: c.id,
          content: JSON.stringify({ ok: true }),
        });
      }
    }
    return { summary: "Planning stopped after 4 hops.", steps };
  });
```

CLIENT: task input + "Plan it" button. Render the numbered `steps` as a list
and the `summary` under it. Show the tool calls as they resolve if you can —
that visible reasoning is the whole point of the agents kernel.

Tools-capable FLock models: `deepseek-v4-pro`, `deepseek-v4-flash`, `kimi-k2.6`,
`gemini-3-flash-preview`. Swap by changing one string.

USER FLOW (the entire app — nothing else exists)
1. Land on the page; the headline previews what the demo does for spatial audio mixing.
2. The primary action (a task box that returns a structured answer or plan the user can follow, with visible tool calls) 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.