AI agents are asked to "look at this page" more and more: check a deploy, describe a layout, compare a design with the live site, attach a screenshot to a pull request. Over the Model Context Protocol, two quite different kinds of tools answer that request. One runs a browser next to the agent and hands the model the picture; the other captures the page in the cloud and hands back a file. This page shows what each returns, what an image costs the model, and which to use for which job.
How we tested. On 2026-11-08 we started Playwright MCP 0.0.84 locally over stdio (headless, 1280×800) and called its tools on python.org, and called the take_screenshot tool of our own MCP server on our development stack. Token costs are computed from Anthropic's published formula, not measured on a bill.
Two kinds of screenshot tools
| Browser MCP (Playwright MCP, Chrome DevTools MCP) | Screenshot API MCP (ours) | |
|---|---|---|
| Where the browser runs | On your machine, started by the MCP server | In the cloud |
| What the model gets | The image itself, in the tool result | JSON with a link to the image |
| Interaction | Click, type, log in, navigate, then capture | Capture a public URL; clicks before the capture only |
| Pages behind a login, localhost | Yes | No: public pages only |
| Result outlives the session | A local file | A hosted URL you can paste anywhere |
| Cookie banners, devices, scroll video | Up to you | Options of the tool |
What Playwright MCP returned
Playwright MCP describes itself as working "through structured accessibility snapshots, bypassing the need for screenshots or visually-tuned models": its default way of reading a page is text. It also has browser_take_screenshot, whose README says "Use browser_snapshot for actions by default".
Our calls, in order:
| Call | Time | What came back |
|---|---|---|
browser_navigate to python.org |
1.71 s | Text: page state |
browser_take_screenshot |
0.11 s | A text line with the saved file's path, and the PNG inline: 1280×800, 165 KB as base64 |
browser_take_screenshot with fullPage: true |
0.32 s | The same, 1280×2758, 679 KB as base64 |
browser_snapshot |
0.07 s | The accessibility tree as text, 27,872 characters |
So the model sees the screenshot directly. Chrome DevTools MCP's take_screenshot works the same way: its filePath parameter saves the image "instead of attaching it to the response", so without it the image is attached.
What our take_screenshot returns
{"id": "img_01m6…", "status": "completed", "kind": "screenshot",
"format": "png", "url": "https://shareglint.com/storage/renders/img_….png", "duration_ms": 7254}
The capture of python.org with cookie banners removed took 7.9 s through MCP, most of it the page's own loading in our cloud browser. The result is a link, not pixels. That is deliberate for what the tool is for: a file you keep. The agent can paste the URL into a pull request, an issue, a doc page or a chat, and it stays there for 30 days on the Free plan and at least 365 days on paid plans. Agents that can open image files — Claude Code reads a PNG from disk, for example — can download the link and look at it when they need to.
Our server's tools are render_image, get_image, list_templates, get_template, create_signed_url, get_usage, generate_template, take_screenshot, auto_og_url, create_batch, get_batch; the screenshot options are the same as the API's: device, full_page, dark_mode, block_cookie_banners, hide_selectors, click_selector, scroll_video (MCP server).
What an image costs the model
Anthropic's vision docs: "Each patch is a 28×28-pixel block of the image, referred to as a visual token. An image, therefore, costs ⌈width / 28⌉ × ⌈height / 28⌉ visual tokens", and images above a model's limit are downscaled first (Claude vision):
| Resolution tier (per Anthropic) | Models | Max long edge | Max visual tokens |
|---|---|---|---|
| High-resolution | Claude 4.7 and later | 2,576 px | 4,784 |
| Standard | All other models | 1,568 px | 1,568 |
Applied to our captures:
- 1280×800 viewport: 46 × 29 = 1,334 visual tokens, under both limits, not resized.
- 1280×2758 full page: too tall for either tier, so it is scaled down: to about 1196×2576 on high-resolution models (about 3,950 tokens) and to about 728×1568 on standard ones (about 1,460 tokens, with small text then much harder to read).
The accessibility snapshot avoids the image cost altogether but describes structure, not appearance: colours, overlaps, broken layouts and images are invisible in it. For "does this look right?", the agent needs pixels; for "click the login button", the snapshot is cheaper and more reliable.
Which tool for which job
- The agent must see the page to decide something — debug a layout, verify a fix, fill a form, test a logged-in flow: a browser MCP. It runs where your session and localhost are, and the image goes straight to the model.
- The output is a screenshot someone else will look at — a before/after in a pull request, a thumbnail for a directory, a social image, a page in a client report, a phone-sized capture: a screenshot API's MCP. No browser to install or keep running, cookie banners removed, device presets, a link that lasts.
- Both in one session is fine: the agent inspects with a browser MCP, then asks the screenshot tool for the clean, shareable capture.
Setup for our server in each client: Claude Code, Cursor, Claude. What MCP is in the first place: what is an MCP server.
Limits
- Public pages only for our tool: no localhost, no intranet, no logged-in pages.
- Not instant. A cloud capture waits for the page to load and settle, several seconds on a heavy page; a local browser that already has the page open answers in a fraction of a second.
- Each capture costs quota: 1 render for a viewport, 2 for a full page, 5 for a scroll video; the same options again within 24 hours are free (pricing).
