Building an Agentic Product Pipeline with OpenClaw & Remotion

Our openclaw builds features and records its OWN DEMO video using remotion.

One prompt and then spec written, code built, PR raised, CI fixed, preview live, 90-second walkthrough video using Remotion delivered to your chat.

You watch the feature work. Click merge.

That's it. That's the feature is shipped.

This is probably how every software developer is reviewing code in 12 months.

Check out the video here from openclaw shipping one of our features and recording its own demo video.

Here's exactly how we built it.

The code isn't the hard part anymore. Its's the review process that takes time.

You prompt something, then spend 20 minutes bouncing between the diff, the preview URL, and the live site trying to figure out what actually changed.

Line diffs don't tell you if the UX makes sense. A PR description doesn't tell you if the button looks wrong on mobile.

So we fixed review, not code.

Instead of reading diffs, you watch a video. The agent opens the deployed preview in Playwright, walks every user journey from the PRD, and uses Remotion to compile it into a walkthrough. For smaller changes, just the screenshots are enough.

It's like having a developer who does the work and gives you a personal demo before you sign off.

1. Product spec

The agent writes the full PRD first - user stories, acceptance criteria, estimated hours, technical approach - and posts it in Telegram. Nothing happens until you give it a 👍.

For the cross-platform feature: 7 user stories, 12 hours estimated, Supabase query plan included.

Never let the agent start coding without an approved spec. A bad spec means bad code means wasted time.


2. Code - expensive models think, cheap models type

Claude Opus reasons through the task. Then it spawns a Codex sub-agent to write the actual code.

A feature that costs $3-5 in Opus tokens costs $0.10-0.30 with Codex. Over dozens of features a month, that's real money.

When the sub-agent gets stuck, Opus steps in, unblocks it, and steps away. Senior engineer and junior - except both are AI.


3. PR + CI

The agent creates a branch, commits, opens a PR, and watches CI: lint, TypeScript, Next.js build, tests. If CI fails, it reads the logs and fixes them - sometimes 3-4 cycles - without touching a human.


4. Vercel preview

Every PR auto-deploys to a unique preview URL. The agent sends one Telegram message: PR link, preview link, one-line summary. You click. You see it live.


5. Demo video

This is where it gets interesting.

A PR Demo Agent opens the preview in headless Playwright, walks every user journey, captures desktop (1280×720) and mobile (390×844), then passes everything to Remotion - which generates an actual video.

Your reviewer doesn't read diffs. They watch the feature work.

You catch the layout bug. You notice the empty state is wrong. You see what was actually built.


6. Review & merge

By the time you see the PR: approved PRD, passing CI, live preview, demo video.

Review becomes: "Does this match what we agreed to build?" - not "What is this PR even doing?"