take5

Take5 is a local CLI that uses an LLM-driven browser agent to explore a web app and record a polished demo video.

You give it:

• a URL
• a scenario

It opens a real Chromium browser, navigates the app, performs the flow, highlights what it is about to click, records the session, and exports a video.

What It Does

• explores the live app through Playwright snapshots
• uses an LLM to decide what to click, type, select, and scroll
• highlights click targets before interacting with them
• scrolls off-screen click targets into view before highlighting and clicking
• records the browser session to video
• converts .webm to .mp4 when ffmpeg is available
• can cut idle delays between meaningful actions

How It Works

1. Start the CLI.
2. Enter an app URL and a scenario, or provide a scenario file.
3. Take5 launches Chromium with video recording enabled.
4. The agent navigates, snapshots the page, and executes tool calls against the live UI.
5. Before clicks, Take5 temporarily highlights the target so the recording is easier to follow.
6. The recording is saved to take5-output.
7. If ffmpeg is installed, the output is converted to .mp4. Otherwise the raw .webm is kept.

Requirements

• Node.js 20.6+
• DEEPSEEK_API_KEY
• Playwright Chromium browser
• ffmpeg optional, for .mp4 conversion

Setup

npm install
npx playwright install chromium
cp .env.example .env

Then set your API key in .env:

DEEPSEEK_API_KEY=sk-...

Run

Interactive mode:

npm start

The CLI will ask:

App URL: https://your-app.com
Scenario: Show how a user creates a project and invites a teammate

Scenario-file mode with delay cutting:

npm run dev

That runs the app with the local test.md file and enables delay cutting.

Direct Node usage:

node --env-file=.env src/cli.js
node --env-file=.env src/cli.js --cut-delays -f test.md

Output

Output files are written to:

./take5-output

The filename is generated by Playwright, for example:

29d69e7e39a34972aa1ef5c32aeee209.mp4

If ffmpeg is not available, the .webm recording is kept instead.

CLI Notes

• npm start loads .env and runs interactively
• npm run dev loads .env, uses test.md, and enables --cut-delays
• --cut-delays trims idle time between meaningful actions in post-processing
• DEBUG=1 prints stack traces on failures

Testing

Run the native Node.js test suite with:

npm test

Current tests cover core browser behavior including:

• ref-based filling for normal textboxes
• honoring requested waits
• automatic click highlighting
• annotation target resolution from snapshot refs
• scrolling selector targets into view before clicking

Current Architecture

take5/
├── src/
│   ├── cli.js
│   ├── agent.js
│   ├── browser.js
│   ├── browser.test.js
│   ├── annotator.js
│   ├── converter.js
│   └── prompt.js
└── docs/
    └── prd.md

Main Modules

• src/cli.js: CLI entry point, argument parsing, interactive input, and orchestration
• src/agent.js: LLM loop and tool-call execution
• src/browser.js: Playwright integration and browser tool implementation
• src/annotator.js: temporary in-page highlight and end-state overlays
• src/converter.js: .webm to .mp4 conversion and delay cutting
• src/prompt.js: system prompt for the agent
• src/browser.test.js: native Node.js tests for core browser behavior

Limitations

• behavior depends on the live state of the target app
• authentication flows may require credentials in the scenario
• runs are not fully deterministic
• .mp4 export requires ffmpeg
• the browser snapshot path relies on Playwright internals and may need maintenance across Playwright upgrades

Tips

• be specific in the scenario
• describe credentials or setup constraints if login is required
• keep flows focused and demo-oriented
• use --cut-delays when you want a tighter final video
• if you need to add a bit music ffmpeg -i "take5-output/record.mp4" \ -stream_loop -1 -i "music.mp3" \ -filter_complex "[1:a]volume=0.15[a]" \ -map 0:v:0 -map "[a]" \ -c:v copy -c:a aac -shortest \ "take5-output/output-with-music.mp4"