Thanks to visit codestin.com
Credit goes to vos.so

Your agent records the take.

Point it at a URL with a flow script. It records the real product, auto-zooms from the cursor, cuts as data you can edit, and delivers the demo, the store listing and the social cuts to spec. Deterministic, free up to 4K, and no account needed locally.

@vosjs/cli on npm →

One CLI, one package, MIT: the engine verbs, the take pipeline and the vos.so verbs. Everything that runs on your machine is open source.

recorded by this CLI · recipe in step 01

The loop.

  1. 01Write the flow

    Seven verbs: wait, hover, click, type, scroll, move, drag. This is the real recipe behind the clip above. Hovers become the zooms, waits become the pacing, and every input carries exact coordinates and element rects. Verified the feature in agent-browser already? vos actions from-agent-browser turns that walk into the script.

    {
      "url": "https://vos.so/engine",
      "viewport": { "width": 1280, "height": 720 },
      "steps": [
        { "do": "wait", "ms": 1600 },
        { "do": "scroll", "dy": 620 },
        { "do": "wait", "ms": 2200 },
        { "do": "hover", "selector": "button[aria-label='color emerald']", "ms": 900 },
        { "do": "click", "selector": "button[aria-label='color emerald']" },
        { "do": "wait", "ms": 1300 },
        { "do": "click", "selector": "button[aria-label='color blue']" },
        { "do": "wait", "ms": 1300 },
        { "do": "click", "selector": "label:has-text('rings') input[type='range']" },
        { "do": "wait", "ms": 1600 }
      ]
    }
  2. 02Record a take

    vos record --actions actions.json --out take --strict produces a take directory: footage plus every layer of data, nothing baked in. --strict fails loudly instead of shipping a video with a hole in the story.

    take/
      recording.webm   encoded footage (CFR WebM)
      cursor.json      synthesized CursorTrack (exact coords, element rects)
      meta.json        RecordingMeta (producer: "cli")
      actions.json     the script that produced it, the replay recipe
      doc.json         ProjectDoc, the agent-editable surface
  3. 03Edit data, not code

    doc.json is the whole edit surface: zooms, trims, speed, music, frames, all plain JSON. Your agent patches it and re-renders; the browser never re-runs. Spot-check a change with render --range 4..8 --draft.

    // take/doc.json — the agent-editable surface. Retime a zoom:
      "zoom": [
    -   { "id": "z1", "in": 2.1, "out": 4.0, "level": 2.2,
    +   { "id": "z1", "in": 2.1, "out": 5.5, "level": 1.8,
          "cx": 0.5, "cy": 0.44, "source": "manual" }
      ]
    // cx/cy are normalized [0..1] frame coords (0.5, 0.5 = center)
    // then: vos render take out.webm — nothing re-runs the browser.
  4. 04Look, then render

    Stills in seconds, then the same pixels the studio shows: same engine, same document. Built for scripts: logs on stderr, results on stdout, --json streams NDJSON, exit codes 0/1/2/3. Or open the take in the studio and a human can still drag every zoom span.

    vos frames take --at-zooms          # stills of the composed result, ~2s
    vos render take out.webm            # the finished video
    vos open take                       # hand it to a human, edits intact

Setting up an agent to make product videos end-to-end? The agent door has the full stack: CLI, llms.txt, and copy-paste rules for CLAUDE.md.

vos.so/agents