How I Made a Product Demo with... Note

How I Made a Product Demo with Claude Code, Playwright, and FFmpeg

The author created a 56-second product demo for Agent OS, an open-source project, in about 30 minutes using Claude Code, Playwright, and FFmpeg. The goal was a clear, unpolished walkthrough of the real product, avoiding manual recording and complex video editing software. Claude Code inspected the application and identified key product states for the narrative, then used Playwright to navigate and record these states. The demo featured existing run records from the real Pulseboard build, ensuring authenticity. Instead of one long recording, several short clips were recorded, each with its own browser context, to improve stability. FFmpeg was then used to trim clips, add labels, create opening and closing cards, and concatenate everything into a final MP4. This workflow is ideal for open-source demos and internal walkthroughs where authenticity and reproducibility are prioritized over elaborate graphics. The author notes that the browser flow is code, product state is deterministic, and labels/timings are configuration, allowing for easy regeneration of the video. Agent OS is described as a local-first AI Project Operating System that adds memory, execution control, verification, recovery, and delivery to coding models. The demo serves to quickly show users what the system actually does.