Screenshots

Agents check their work by looking at it. TakeScreenshot renders layers inside an execute call and attaches the images to the result.

Taking a screenshot

There is no separate screenshot tool. An agent calls TakeScreenshot inside an execute snippet, with a list of layer ids. The PNGs come back with that call's result as MCP image content, which the agent can see.

TakeScreenshot([headerId])
TakeScreenshot([screenId], {scale: 0.5})
TakeScreenshot(["document"], {scale: 0.25})

• A layer id captures that layer.
• "document" captures every top-level layer of the current page on one canvas.
• A page id captures that page.

A screenshot shows the state after the statements before it in the same snippet. A failed snippet returns no screenshots.

What the image shows

Potlot renders with headless Chrome, the same engine that measures text for layout. The pixels in a screenshot match the layout bounds Get reports and what the app shows.

• Layers are drawn at real size, the pixels a person sees at 100% zoom. A layer wider than 1920 pixels is drawn 1920 wide.
• scale goes from 0.0625 to 1 (the default). It only shrinks the image.
• An image taller than 1440 pixels arrives in parts of 1440, top to bottom. Only the first 6 parts are attached; screenshot a section by its id to see the rest.
• Transparent areas show what is behind the layer: the nearest fill, otherwise the page's background, otherwise the editor's dark #0A0A0C. Give a screen or component a fill when its content is dark.

Verify as you go

The Potlot skill asks agents to check each section as soon as it is done, not at the end. End the call that completes a section with a screenshot of it, then review it:

• Layout is not collapsed, stretched or broken.
• Nothing is clipped or spills outside its frame.
• Text, objects and backgrounds have enough contrast.
• Objects are aligned and spacing is consistent.
• What you see matches what you meant to build.

Fix problems by updating the existing layers rather than deleting a section and rebuilding it.

Keep the cost down

Screenshots cost tokens. Take one per finished section, not one per call. Check a section's detail at scale 1 and a whole page as an overview at {scale: 0.5}. For structural checks such as sizes, clipping and overlap, use a Get visitor instead (see Reading the document).

Without Chrome

Screenshots need Chrome or Chromium on the machine. get_app_state reports renderer.available. When no renderer is available, TakeScreenshot adds a warning to the result instead of an image.

Something unclear, missing or broken? Write to feedback@anaknegeri.dev.