Luminary Board Scribe
Lovable AI converts aesthetic descriptions so designers program consoles; ElevenLabs captures spoken lighting ideas.
Realtime Speech-to-Text· live transcription
Section · Voice
full primer →The primitive.
Directors speak; the ElevenLabs scribe model streams live captions back as they go, finalizing each line during the natural pauses in lighting design.
Why this primitiveDesigners can dictate complex color and intensity changes while keeping hands on the lighting board.
Kernel
the @elevenlabs/react useScribe hook on scribe_v2_realtime — server mints a single-use scribe token, client streams microphone audio and receives partial + committed transcripts with word timestamps
Drives the UI as
a live caption strip that types itself as the user speaks, with finalized lines saved as the user pauses
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.
budget · 1 message
Paste into a fresh Lovable project. Make sure the key above is set first. read the build strategy →
Build "Luminary Board Scribe" 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 converts aesthetic descriptions so designers program consoles; ElevenLabs captures spoken lighting ideas.
Discipline: Theater & Live Performance (lighting design).
Recipe: Lovable AI brain + Realtime Speech-to-Text (live transcription) as the voice surface.
Why this voice surface: Designers can dictate complex color and intensity changes while keeping hands on the lighting board.
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 lighting design:
```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 lighting design 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 lighting design.
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.
TAM
$30B
global live performance and theater market
SAM
$2.2B
stage lighting and design software
SOM
$110M
AI lighting programming tools
Indicative figures for hackathon pitches — refine with your own research before raising.
Adjacent entries.
lighting design
Lumen Mood Weaver
Lovable AI brainstorms color palettes so designers match beats; ElevenLabs speaks it.
playwriting dictationDialogue Pacer
Lovable AI formats dictated monologues so playwrights act freely; ElevenLabs captures the spoken lines.
stage management loggingCue Caller Scribe
Lovable AI organizes rehearsal notes so stage managers stay focused; ElevenLabs transcribes whispered observations.
improv archivingSpontaneous Scene Catcher
Lovable AI extracts comedic beats so improvisers refine sets; ElevenLabs transcribes live stage banter.