Have your agent report video demos of its work with shot-scraper video
thirtieth June 2026
shot-scraper video is a brand new command launched in as we speak’s shot-scraper 1.10 launch which accepts a storyboard.yml file defining a routine to run in opposition to an online software and makes use of Playwright to report a video of that routine. I’ve written earlier than concerning the significance of getting coding brokers produce demos of their work; that is my newest try at enabling them to do this.
Right here’s an instance video created utilizing shot-scraper video, exercising a nonetheless in growth characteristic including the power to create new tables in Datasette from pasted CSV, TSV or JSON information:
That video was created by operating this command:
–auth datasette-demo-auth.json –mp4
(That –auth JSON file accommodates a cookie, as described right here within the documentation.)
Right here’s the datasette-bulk-insert-storyboard.yml file:
server:
– uv
– –directory
– /Customers/simon/Dropbox/dev/datasette
– run
– datasette
– -p
– 6419
– –root
– –secret
– “1“
– /tmp/demo.db
url: http://127.0.0.1:6419/demo/duties
viewport:
width: 1280
peak: 720
cursor: true
wait_for: ‘button[data-table-action=”insert-row”]‘
javascript: |
(() => {
let clipboardText = “”;
Object.defineProperty(navigator, “clipboard”, {
configurable: true,
get: () => ({
writeText: async (textual content) => {
clipboardText = String(textual content);
},
readText: async () => clipboardText,
}),
});
})();
scenes:
– title: Bulk insert current desk rows
do:
– pause: 0.8
– click on: ‘button[data-table-action=”insert-row”]‘
– wait_for: “#row-edit-dialog[open]“
– pause: 0.5
– click on: “.row-edit-bulk-insert“
– wait_for: “.row-edit-bulk-textarea“
– pause: 0.5
– click on: “.row-edit-copy-template“
– wait_for: “textual content=Copied“
– pause: 0.8
– fill:
into: “.row-edit-bulk-textarea“
textual content: |
title,proprietor,standing,precedence,notes
Put together launch video,Ana,doing,1,Recorded with shot-scraper
Examine pasted CSV import,Ben,evaluation,3,Previewed earlier than inserting
Share the department demo,Chen,queued,2,Bulk insert creates three rows
– pause: 0.8
– click on: “.row-edit-save“
– wait_for: “textual content=Previewing 3 rows.“
– pause: 1.2
– click on: “.row-edit-save“
– wait_for: “textual content=3 rows inserted.“
– pause: 1.0
– click on: “.row-edit-cancel“
– wait_for: “textual content=Put together launch video“
– pause: 1.0
– title: Create a desk from pasted CSV
open: http://127.0.0.1:6419/demo
wait_for: ‘particulars.actions-menu-links abstract‘
do:
– pause: 0.8
– click on: ‘particulars.actions-menu-links abstract‘
– click on: ‘button[data-database-action=”create-table”]‘
– wait_for: “#table-create-dialog[open]“
– pause: 0.5
– fill:
into: “.table-create-table-name“
textual content: “launch_metrics“
– click on: “.table-create-from-data“
– wait_for: “.table-create-data-textarea“
– pause: 0.5
– fill:
into: “.table-create-data-textarea“
textual content: |
metric_id,title,rating,recorded_on
m001,Activation fee,87.5,2026-06-29
m002,Retention test,72.25,2026-06-30
m003,CSV import well being,95,2026-07-01
– pause: 0.8
– click on: “.table-create-save“
– wait_for: “textual content=Previewing 3 rows.“
– pause: 1.2
– click on: “.table-create-save“
– wait_for_url: “**/demo/launch_metrics“
– wait_for: “textual content=Activation fee“
– pause: 1.2
The video command documentation consists of less complicated examples, however for the aim of this publish I believed I’d go along with one thing extra complete.
That demo YAML storyboard was constructed fully by GPT-5.5 xhigh operating in Codex Desktop, utilizing the next immediate run inside my ~/dev/datasette checkout of this department:
Assessment the modifications on this department.
cd to ~/dev/shot-scraper and run the command “uv run shot-scraper video –help”
Now use that new video command to report a video demo of the brand new options from this department, together with operating a “uv run datasette -p 6419 –root –secret 1 /tmp/demo.db” growth server so you’ll be able to report the video in opposition to a demo DB that you simply first create.
Now that I’ve launched the characteristic the immediate might say “run uvx shot-scraper video –help” as a substitute and it ought to obtain the identical end result.
I actually like this sample the place the –help output for a command supplies sufficient element {that a} coding agent can use it—it really works sort of like bundling a SKILL.md file instantly contained in the instrument. I used the identical sample for showboat and rodney.
How I constructed this
shot-scraper video began as an experimental prototype. shot-scraper is constructed on prime of Playwright, and the important thing characteristic it wanted was for Playwright to have the ability to report video of browser periods with sufficient management to create the specified demo.
I first tried this just a few years in the past and located that the Playwright-produced movies included further chrome that was helpful for debugging a take a look at failure however undesirable for a product demo.
They fastened that some time in the past, however there have been nonetheless some minor blockers. Specifically I used to be getting just a few white frames firstly of the movies, for the reason that recording mechanism kicked in earlier than the primary URL was loaded by the browser.
Playwright 1.59 added a brand new screencast mechanism offering way more finely grained management over video recording. This was very practically what I wanted, however the ensuing movies have been fastened at 800px huge.
I discovered a landed PR fixing that but it surely wasn’t but in a launch. Then yesterday they shipped it in playwright-python 1.61.0 and I used to be lastly unblocked to complete implementing the characteristic!
The code itself was all written by GPT-5.5 xhigh in Codex Desktop. I had it write the documentation as properly which gave me a really helpful body for reviewing the design—a lot of the iteration on the characteristic got here from reviewing that documentation, recognizing issues that have been redundant, inconsistent or complicated, and requesting (or dictating) a greater design.
The YAML format itself was largely outlined by the coding agent. I had it use Pydantic to each outline and validate the format, partly to make the design simpler to evaluation.
It is a nice instance of the sort of characteristic that I virtually actually wouldn’t have taken on with out coding agent help. I filed the unique challenge in February 2024, and had issue discovering the mandatory time to resolve this in amongst all of my different tasks.
