How to record product demo videos with Claude Code

TL;DR: Install the screencli skill in Claude Code, describe what you want to demo, and get a polished video with a shareable link. No screen recording app, no video editor, no retakes. The whole thing takes under two minutes.

The problem with recording demos manually

Creating a product demo typically takes 90–120 minutes: open a screen recorder, rehearse the flow, re-record when you click the wrong thing, trim the dead air, export, upload, share. According to Walnut’s 2026 demo report, even teams with templates spend 30–40 minutes per demo after initial setup.

For developers, it’s worse. You’re not a video editor. You don’t want to be. You want to ship the feature, show it works, and move on. (For the full landscape of how AI agents create demo videos, we covered this in a previous post.)

What if your AI agent recorded the demo for you

Claude Code already navigates codebases, runs tests, and executes commands. With the screencli skill installed, it can also open a browser, follow your instructions, and record the entire session as a polished video.

Here’s what the workflow looks like:

1. You describe the demo in plain English
2. Claude Code launches a browser and follows your prompt
3. screencli records the session with auto-zoom, click highlights, and cursor trails
4. The video uploads automatically and you get a shareable link

No screen recording app running in the background. No manual editing. No retakes.

Step 1: Install the screencli skill

In your terminal, run:

npx skills add usefulagents/screencli-skill

This adds the screencli skill to your project. Claude Code will automatically discover it when you ask it to record a demo.

Step 2: Record a public page

The simplest case — record a walkthrough of a public URL:

npx screencli record https://your-app.com -p "Navigate to the pricing page, compare the Free and Pro plans, then click Sign Up"

The AI agent opens the page, follows your instructions step by step, and records everything. When it finishes, you get:

✓ Video composed — recordings/a3f2c8e1/composed.mp4
✓ https://screencli.sh/v/a3f2c8e1
  1 credit used · 9 remaining

A composed MP4 with gradient background, auto-zoom on each action, click highlights, and a cursor trail. Plus a hosted link you can drop into a PR, Slack, or README.

Step 3: Record behind a login wall

Most product demos need authentication. Use --login to log in manually first, then hand off to the agent:

npx screencli record https://app.example.com -p "Show the dashboard metrics and export the monthly report" --login --auth myapp

The browser opens for you to log in. Once done, the AI takes over. Your login is never recorded. The --auth myapp flag saves the session so next time you can skip the manual login:

npx screencli record https://app.example.com -p "Walk through the settings page" --auth myapp

Step 4: Choose a background and export

screencli applies a gradient background automatically. Override it if you want a specific look:

npx screencli record https://your-app.com -p "Demo the checkout flow" --background sunset

Six gradients available: midnight, ember, forest, nebula, slate, copper.

Need a specific platform format? Export after recording:

npx screencli export ./recordings/a3f2c8e1 --preset twitter
npx screencli export ./recordings/a3f2c8e1 --preset gif

When to use this

PR reviews. Drop a 15-second GIF showing the UI change instead of describing it in text. --preset gif gives you a README-ready file.

Changelog posts. Record each new feature as you ship it. Takes one command, not a 30-minute recording session.

Onboarding docs. Record the setup flow once with --auth and the session is reusable for re-recordings when the UI changes.

Bug reports. Record the reproduction steps: npx screencli record https://staging.app.com -p "Click the export button three times rapidly". Attach the link to the ticket.

How it compares

Loom and Screen Studio require you to drive the browser manually. Remotion generates programmatic video from code — great for branded content, but overkill for a quick product walkthrough. screencli sits in the middle: real browser recording, automatic post-production, zero editing. For a comparison of the underlying browser automation frameworks, see our breakdown of browser-use, Stagehand, Playwright, and Skyvern.

FAQ

Do I need an Anthropic API key? No. screencli provides the AI through its cloud. Sign in with GitHub on first run and you get 15 free credits per month.

Can Claude Code trigger screencli automatically? Yes. With the skill installed, ask Claude Code: “Record a demo of the signup flow on staging.” It runs the command for you.

What if the agent does something wrong during recording? Refine your prompt and re-record. It takes under a minute. No editing — just re-run with a better description.

Does it work with apps behind auth? Yes. Use --login --auth <name> on the first run to log in manually. The agent takes over after login and reuses the saved session on future recordings.

What does the output look like? A polished MP4 with gradient background, rounded corners, drop shadow, auto-zoom to each action, click highlights, and smooth cursor trails. Plus a hosted shareable link at screencli.sh.

Run it yourself → npx screencli record https://your-app.com -p "your demo prompt"