# Screenshots for AI agents over MCP: when the agent should see the page, and when it needs a file

> Give an AI agent screenshots over MCP: what Playwright MCP returns, what a screenshot API's MCP returns, what each image costs in tokens, and which fits.

Published 2026-11-08 · https://shareglint.com/en/guides/screenshots-for-ai-agents-mcp

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](https://github.com/microsoft/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](https://github.com/ChromeDevTools/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

```json
{"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](https://shareglint.com/en/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](https://docs.claude.com/en/docs/build-with-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](https://shareglint.com/en/mcp/claude-code), [Cursor](https://shareglint.com/en/mcp/cursor), [Claude](https://shareglint.com/en/mcp/claude). What MCP is in the first place: [what is an MCP server](https://shareglint.com/en/guides/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](https://shareglint.com/en/pricing)).

## FAQ

### How can an AI agent take a screenshot of a web page?

Through an MCP server that has a screenshot tool. Browser MCP servers such as Playwright MCP and Chrome DevTools MCP run a browser next to the agent and return the image to the model; a screenshot API's MCP server, like ours, captures the page in the cloud and returns a link to the file.

### Can the agent see the screenshot my MCP tool returns?

Only if the tool returns the image itself. Playwright MCP 0.0.84 returned the PNG inline (plus a saved file), so the model saw it at once. Our take_screenshot returns JSON with the image URL; the model sees the link, not the pixels, unless the client downloads and opens the file.

### How many tokens does a screenshot cost the agent?

Claude counts images in 28×28-pixel patches: ⌈width/28⌉ × ⌈height/28⌉. A 1280×800 screenshot is 46 × 29 = 1,334 visual tokens on any current model. A tall full-page capture is downscaled first, to fit 1,568 tokens on standard-tier models or 4,784 on high-resolution ones.