npm package: @mikhail.angelov/take5
Description: AI agent that explores your web app and records a polished demo video
Author: Mikhail Angelov
Latest version: 1.0.0

# 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

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

Then set your API key in `.env`:

```bash
DEEPSEEK_API_KEY=sk-...
```

## Run

Interactive mode:

```bash
npm start
```

The CLI will ask:

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

Scenario-file mode with delay cutting:

```bash
npm run dev
```

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

Direct Node usage:

```bash
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:

```text
./take5-output
```

The filename is generated by Playwright, for example:

```text
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:

```bash
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

```text
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"`