Prove a fix with a screenshot

Some changes are easier to read in a still image than in a video: a fixed layout, a new label, a corrected number. jam create jam uploads the screenshot as a Jam and draws your marks into it. Boxes and arrows get numbered badges, and redactions cover anything that must not leave the screen.

Install the CLI and run jam skills install first. See Get started.

Ask your agent

Screenshot the fixed checkout page, box what changed, redact any customer data, and file it as a Jam.

The jam-annotate skill teaches the agent to scale coordinates, pick marks, and number the description to match the badges. It returns the Jam link.

Do it yourself

This example uses agent-browser to take the screenshot. Any tool that saves a PNG or JPEG works.

Take a screenshot of the viewport

agent-browser set viewport 1280 760 2
agent-browser open https://example.com/checkout
agent-browser screenshot ./checkout.png

Capture the viewport, not the full page, so element positions and the image line up. The 2 captures at retina scale, so the image is 2560×1520 pixels and stays sharp.

Find where the elements are

agent-browser eval 'JSON.stringify(document.querySelector("#total").getBoundingClientRect())'

Annotation coordinates are pixels of the image file. This returns CSS pixels. At retina scale, multiply every number by two.

Create the Jam with annotations

jam create jam '{
  "url": "https://example.com/checkout",
  "title": "Discount applies and the order confirms",
  "description": "1. The SPRING10 discount and the new total.\n2. The order confirmation that now appears.\nPayment details and email redacted.",
  "screenshotPath": "./checkout.png",
  "screenDimensions": { "width": 1280, "height": 760 },
  "annotations": [
    { "type": "redact", "x": 2058, "y": 38, "width": 332, "height": 58 },
    { "type": "redact", "x": 154, "y": 462, "width": 1348, "height": 92 },
    { "type": "redact", "x": 154, "y": 638, "width": 1348, "height": 92 },
    { "type": "redact", "x": 154, "y": 814, "width": 1348, "height": 92 },
    { "type": "box", "x": 1662, "y": 672, "width": 764, "height": 204, "label": "Discount applied" },
    { "type": "arrow", "from": { "x": 2200, "y": 1290 }, "to": { "x": 2060, "y": 1140 }, "label": "Order confirmed" }
  ]
}'

The receipt prints the Jam’s url. Post it on the pull request.

Make it readable

Use three to five marks. If you need more, record a video instead.
Write one line in the description for each numbered mark. Badges follow payload order, and redactions don’t get numbers.
Use redact for emails, names, tokens, and customer IDs. Large text can stay readable through a blur, so use blur only to hide clutter.

A screenshot Jam carries no console logs or network requests. When the proof depends on them, such as a request that now returns 200, record a video with --cdp instead. See Prove a fix with a video.

For every annotation type, color, and payload field, see Create and update Jams.
When the change is a flow rather than a single state, follow Prove a fix with a video.

SDK

MCP & CLI

Webhooks

Prove a fix with a screenshot

Ask your agent

Do it yourself

Make it readable

Next

​Ask your agent

​Do it yourself

​Make it readable

​Next

Ask your agent

Do it yourself

Make it readable

Next