Inspiration
Building a product is only part of shipping it. Developers still have to decide what to show, write a clear story, record stable browser interactions, prepare narration, synchronize audio and video, and export a demo. During a hackathon, that last mile can determine whether anyone understands the project at all.
DemoCue started with one question: what if a codebase could help produce its own demo?
What it does
DemoCue is a local-first developer tool that turns a trusted local Node.js web application into a narrated product demo.
It inspects a bounded, security-filtered snapshot of the repository. GPT-5.6 identifies the product story and returns a schema-constrained scene plan containing browser-action intent, English narration, and voice direction. DemoCue launches the target application on loopback, executes typed Playwright actions, records each scene, and first exports a silent approval cut. Only after the user approves the visuals does it generate one fixed English AI voice, measure the real audio, and use FFmpeg to assemble the final video.
Each run exports a final MP4, an English script, and structured scene-plan JSON.
How we built it
The controller is a React and Vite interface backed by a local Fastify and TypeScript runner. The controller and target application run as separate loopback-only processes.
The Codex SDK uses the user's active ChatGPT/Codex subscription sign-in for GPT-5.6 planning; it does not require an OpenAI Platform API key. The Speech API is a separate, explicit finalization step. Its project key is entered through a hidden PowerShell prompt and remains only in process memory for that run. DemoCue does not load .env files or expose the key to browser code, target applications, or Codex.
Playwright and Chromium execute and record the planned browser interactions. ffprobe measures media duration, and FFmpeg pads, muxes, and concatenates approved scenes. The visual-first workflow avoids paying for narration while browser scenes are still being revised. It also preserves paid audio rather than silently regenerating or truncating it when timing needs review.
How we used Codex and GPT-5.6
Codex with GPT-5.6 was used throughout the majority of the project: converting the product goal into an acceptance-tested specification, making architecture and security decisions, implementing the vertical slice, diagnosing Windows process and media-timing failures, reviewing the self-demo recursion boundary, and preparing the submission.
Inside the product, GPT-5.6 acts as the director. It receives a deliberately bounded repository snapshot, identifies the audience and product narrative, and produces structured scenes with interaction intent, narration, and voice direction. Deterministic code then validates and executes that plan. This separation lets GPT-5.6 handle software understanding and storytelling while Playwright and FFmpeg handle reproducible execution and media composition.
Challenges we ran into
The hardest problem was not screen recording; it was turning software understanding into a stable visual story. Browser scenes need robust locators, useful movement, readable framing, deterministic state, and timing that still works after narration is generated.
Self-demo mode created another unusual constraint: DemoCue had to show itself producing a demo without recursively launching more runs or spending more model and Speech calls. We solved this with a visibly disclosed deterministic pipeline replay that exercises the same UI stages without making a nested run.
Media timing also required careful handling. DemoCue measures each paid narration file and can extend only the final approved frame for a sub-half-second overrun. Larger mismatches stop for manual review without discarding or regenerating the audio.
Accomplishments that we're proud of
- A complete vertical slice that generated DemoCue's own final narrated submission video.
- A silent-first approval flow that keeps paid Speech usage out of visual iteration.
- Full-HD browser recording with visible cursor movement, smooth scrolling, and deterministic scene state.
- A local-first security boundary that excludes secrets, dependencies, Git state, generated artifacts, media, and binaries from model analysis.
- A bundled deterministic sample and automated smoke path that judges can run without Codex or Speech API usage.
What we learned
Automatic demo generation is primarily a software-understanding and orchestration problem, not a video-editing problem. GPT-5.6 is most useful as a constrained director: it decides what matters and expresses intent in structured data, while deterministic tools retain control of execution, security, and media handling.
We also learned that separating visual approval from paid narration makes the workflow both cheaper and easier to debug.
What's next
The hackathon version deliberately supports trusted local Node.js web applications and one fixed English AI voice. Future work could add an editable scene timeline, subtitles, multilingual narration, additional frameworks, more portable credential launchers, and isolated execution for less-trusted projects.
Log in or sign up for Devpost to join the conversation.