DEV Community

Eric Mono
Eric Mono

Posted on

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

I recently needed a short product demo for my open-source project called Agent OS.

The goal was modest: create a clear 45–60 second walkthrough of the real product.

I didn't need a polished advertisement. I also didn't want to:

  • manually record a dozen clips
  • learn Premiere or After Effects
  • move every cut and caption on a timeline
  • recreate the product interface with generated animation

So I tried a simpler workflow:

Claude Code + Playwright + FFmpeg

The result was a 56-second silent MP4 created in roughly 30 minutes, using around 50K tokens with Opus 4.8.

What Claude Code handled

Claude Code first inspected the application and identified the existing product states that could form a complete story:

  1. The Agent OS landing page
  2. Main Agent planning and Coding Agent handoff
  3. A real task graph and execution trace
  4. Build, browser, and visual verification
  5. A failed browser run with runtime evidence
  6. A linked bounded-recovery run
  7. A preview-only Git contract
  8. The finished Pulseboard application

It then started the locally served frontend and backend and used Playwright to navigate through those states.

Nothing was recreated or fabricated for the video. The walkthrough used existing persisted run records from the real Pulseboard build.

Why it recorded several short clips

The first instinct was to record one continuous browser session.

That became unreliable when dense modals and long smooth scrolling caused the Playwright video encoder to fall behind.

The practical fix was simple:

  • record one short clip for each narrative beat
  • give each clip its own BrowserContext
  • store the content start and end times
  • close the context after every clip so the recording is finalized

The result was much more stable than one long recording.

What FFmpeg handled

After Playwright produced the raw WebM files, a small Python script used FFmpeg to:

  • trim each clip to its useful content window
  • add short labels
  • create a simple opening card
  • create a GitHub end card
  • concatenate everything
  • export a 1280×720, 30 fps H.264 MP4

There were no complex transitions. The product interface remained the main visual.

Why this workflow was useful

This will not replace professional video editing.

But it seems well suited to:

  • open-source project demos
  • internal product walkthroughs
  • release previews
  • reproducible UI recordings
  • projects where authenticity matters more than elaborate motion graphics

The useful shift was treating the demo as another automated software artifact.

  • The browser flow is code.
  • The selected product state is deterministic.
  • The labels and timings are configuration.
  • The video can be regenerated when the interface changes.

The project shown in the demo

Agent OS is a local-first AI Project Operating System — the harness around coding models that adds persistent memory, controlled execution, real verification, bounded recovery, and approval-gated delivery.

The project is open source here:

https://github.com/earthwalker17/agent-os

The demo doesn't prove that the system is perfect. It simply gives people a much faster way to see what it actually does.

Top comments (0)