@mikhail.angelov/take5

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

Installation

npm install -g @mikhail.angelov/take5

Or install locally in your project:

npm install @mikhail.angelov/take5

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

First, install Playwright Chromium:

npx playwright install chromium

Then create a .env file in your working directory with your API key:

echo "DEEPSEEK_API_KEY=sk-..." > .env

Or copy from the example:

cp .env.example .env

Then edit .env to add your API key.

DEEPSEEK_API_KEY=sk-...

Run

If installed globally:

take5

If installed locally or developing:

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 (local development):

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"