ai-demo-recorder（AI 演示录音机）

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:

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

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

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

Key Options

Examples

Simple — record a public page:

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:

# 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:

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

Presets

Example

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:

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:

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

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

References

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