AI Demo Recorder

What It Does#

screencli records an AI-driven browser session and produces a polished MP4 with gradient backgrounds, auto-zoom, click highlights, and cursor trails. The AI agent navigates the target URL following your prompt instructions, then the recording is composed with effects and auto-uploaded to screencli.sh with a shareable link. No video editing needed.

When to Use This Skill#

Use this skill when the user asks to:

• Record a demo or walkthrough of a web app, feature, or workflow
• Create a screencast or video showing how something works in a browser
• Generate a shareable link to a screen recording
• Make a GIF or video for a README, PR, docs, or social media
• Record a before/after to show a UI change or bug fix
• Demo a deploy or staging environment visually

Do not use this skill for:

• Screenshots (use a screenshot tool instead)
• Non-browser tasks (terminal recordings, desktop apps)
• Editing existing videos

Quick Start#

Record a demo and get a shareable link:

text

npx screencli record https://example.com -p "Click the Sign Up button, fill in the form with test data, and submit"

On first run, the CLI opens a browser for GitHub login automatically. After that, it records the session, applies effects, uploads, and prints a shareable URL.

Recording#

Command#

text

npx screencli record [url] -p "<prompt>" [options]

The URL and prompt are required. If omitted, the CLI prompts interactively.

Key Options#

FlagDefaultDescription-p, --prompt <text>_(required)_Instructions for the AI agent--background <name>autoOverride gradient: midnight, ember, forest, nebula, slate, copper``--viewport <WxH>``1920x1080Browser viewport dimensions--loginoffOpen browser for manual login before AI takes over--auth <name>—Save/load auth state by name--localoffSkip cloud upload--unlistedoffUpload as unlisted (not on public profile)--max-steps <n>``50Maximum agent iterations--padding <percent>``8Background padding (0-50%)--corner-radius <px>``12Video corner radius--no-shadowoffDisable drop shadow-m, --model <model>``claude-sonnet-4-20250514Claude model to use--slow-mo <ms>``0Extra delay between actions-o, --output <dir>``./recordingsOutput directory-v, --verboseoffDebug logging

Examples#

Simple — record a public page:

text

npx screencli record https://myapp.com -p "Navigate to the pricing page and compare the Free and Pro plans"

With auth — login to a private app first:

text

# First run: human logs in, auth state saved
npx screencli record https://app.internal.com -p "Show the dashboard metrics" --login --auth myapp

# Next runs: reuses saved session
npx screencli record https://app.internal.com -p "Export the monthly report" --auth myapp

Exporting#

Export a recording with platform-specific presets:

text

npx screencli export <recording-dir> --preset <name>

Presets#

PresetResolutionAspectFormatMax Durationyoutube1920x108016:9mp4—twitter1280x72016:9mp4140sinstagram1080x19209:16mp490stiktok1080x19209:16mp4—linkedin1080x10801:1mp4—github-gif800x45016:9gif12s

Example#

text

npx screencli export ./recordings/abc123 --preset twitter

Export also accepts --background, --padding, --corner-radius, --no-shadow, --no-zoom, --no-highlight, and --no-cursor.

Auth for Private Apps#

To record behind a login wall, use --login and --auth together on the first run:

text

npx screencli record https://app.example.com -p "..." --login --auth myapp

The browser opens for you to log in manually. Once done, the AI agent takes over and auth state is saved to ~/.screencli/auth/myapp.json.

On subsequent runs, pass just --auth:

text

npx screencli record https://app.example.com -p "..." --auth myapp

If a session expires, re-run with --login --auth <name> to refresh it.

Cloud#

Recordings auto-upload to screencli.sh by default. Skip with --local.

Commands#

CommandDescriptionnpx screencli loginSign in to screencli cloudnpx screencli logoutSign outnpx screencli whoamiShow current user, plan, and creditsnpx screencli recordingsList your recordings with linksnpx screencli upload <dir>Upload a local recording to the cloudnpx screencli delete <id>Delete a cloud recordingnpx screencli render <id>Re-render on the cloud with different background/preset

Credits#

1 credit = 10 agent steps. Free tier includes 15 credits/month.

After a recording uploads, the CLI shows credits used and remaining.

Effects#

All recordings get automatic post-processing:

• Gradient background — automatically selected (override with --background <name>)
• Auto-trim — removes idle time between actions
• Auto-zoom — zooms into the active area during interactions
• Click highlights — visual pulse on each click
• Cursor trail — smooth cursor movement overlay

Toggle individual effects off with --no-zoom, --no-highlight, --no-cursor.

See references/effects.md for gradient colors and the full effects pipeline.

Troubleshooting#

ProblemFixNot logged inRun npx screencli record — login is triggered automaticallyFFmpeg missingbrew install ffmpeg (macOS) or see ffmpeg.orgAuth expiredRe-run with --login --auth <name>Agent stuck or loopingRefine prompt, lower --max-stepsRecording too longUse --max-steps to limit, or be more specific in promptUpload failedCheck npx screencli whoami for credits, retry with npx screencli upload <dir>

References#

• CLI Reference — all commands and flags
• Effects Reference — gradients, backgrounds, effects pipeline