🎥 Videography & Film · craft services planning

Set Menu Minder

Lovable AI designs allergy-safe meals so the crafty team feeds the crew; ElevenLabs reads it.

ElevenLabs Text-to-Speech· streaming voice
Section · Voice

The primitive.

full primer →

Craft services planning gets its own broadcast voice: a server function streams ElevenLabs text-to-speech back to the page, and videographers hear lifelike narration without leaving the app.

Why this primitiveRadio broadcasts ensure the entire crew hears dietary warnings over the noise.

Kernel
an /audio/speech call to ElevenLabs (model eleven_turbo_v2_5 for streaming, eleven_multilingual_v2 for quality) that returns MP3 / PCM and plays it as the user reads or interacts
Drives the UI as
a 'play' button (or auto-play) that streams lifelike narration of any text the app generates
Appendix · Secrets

Required key.

ELEVENLABS_API_KEY
Single key for TTS, voice agents, scribe, music and SFX. Free tier covers a hackathon weekend.
open ↗

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

Appendix · Mega-prompt

The build prompt.

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

Build "Set Menu Minder" 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 designs allergy-safe meals so the crafty team feeds the crew; ElevenLabs reads it.
Discipline: Videography & Film (craft services planning).
Recipe: Lovable AI brain + ElevenLabs Text-to-Speech (streaming voice) as the voice surface.
Why this voice surface: Radio broadcasts ensure the entire crew hears dietary warnings over the noise.

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/coach.functions.ts) — brain + voice in one call:
```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 speakAdvice = createServerFn({ method: "POST" })
  .inputValidator((d) => z.object({
    topic: z.string().min(1).max(500),
    language: z.string().default("English"),
  }).parse(d))
  .handler(async ({ data }) => {
    // 1. BRAIN — Lovable AI writes the answer for the craft services planning use case.
    const { text } = await generateText({
      model: gateway()("google/gemini-3-flash-preview"),
      system: `You are an expert helper for craft services planning. Answer in ${data.language}. ` +
              `Keep it warm, specific, under 120 words. Markdown is fine but no headings.`,
      prompt: data.topic,
    });

    // 2. VOICE — ElevenLabs reads it back in the chosen language.
    const isEn = data.language === "English";
    const r = await fetch(
      "https://api.elevenlabs.io/v1/text-to-speech/JBFqnCBsd6RMkjVDRZzb/stream" +
        "?output_format=mp3_44100_128",
      {
        method: "POST",
        headers: { "xi-api-key": process.env.ELEVENLABS_API_KEY!, "Content-Type": "application/json" },
        body: JSON.stringify({
          text,
          model_id: isEn ? "eleven_turbo_v2_5" : "eleven_multilingual_v2",
        }),
      },
    );
    if (!r.ok) throw new Error(`TTS failed: ${r.status}`);
    const buf = await r.arrayBuffer();
    return { text, audio: Buffer.from(buf).toString("base64") };
  });
```

CLIENT (in the page component):
```tsx
import { useServerFn } from "@tanstack/react-start";
import { speakAdvice } from "@/lib/coach.functions";

const ask = useServerFn(speakAdvice);
const onSubmit = async (topic: string, language: string) => {
  const { text, audio } = await ask({ data: { topic, language } });
  // render `text` on screen with react-markdown, then:
  await new Audio(`data:audio/mpeg;base64,${audio}`).play();
};
```

Voice: George (`JBFqnCBsd6RMkjVDRZzb`). Swap from https://elevenlabs.io/voice-library.

TRANSLATION — included by default:
Add a language `<Select>` to the UI (English, Español, Français, Deutsch,
Português, हिंदी, 日本語). Before sending the AI output to ElevenLabs,
ask the gateway to translate it into the chosen language in the same server
function. Then pass the translated text to ElevenLabs with
`model_id: "eleven_multilingual_v2"` so the voice speaks naturally in that
language. Default the select to English so the demo works without a click.

USER FLOW (the entire app — nothing else exists)
1. Land on the page; the headline previews what the demo does for craft services planning.
2. The primary action (a 'play' button (or auto-play) that streams lifelike narration of any text the app generates) 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
Appendix · Market

Market sizing.

TAM
$1.1B
global film production logistics and catering market
SAM
$150M
professional set management and craft services tools
SOM
$20M
unit production managers and craft service captains

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

See also

Adjacent entries.