Coding agents are confident about layouts they have never seen. I'd ask Claude Code to fix a cramped mobile header, it would edit the CSS, tell me it was done, and the header would still wrap on an iPhone. It had read the code. It hadn't looked at the page.
I already had a tool for looking: Responsive Point Check, a Chrome extension that puts a site in a row of device frames. But an agent can't click a toolbar button. So over two days I built rpc-agent, a CLI and an MCP server that hand the same check to Claude Code, Codex and Cursor. This is how it works and the three problems that took the most thought.
What it does
You give it a URL and some devices, and it writes PNGs. Each device gets a fresh Chromium context with the right viewport, pixel ratio and, for phones and tablets, a mobile user agent and touch. Add --bezels and you also get a copy framed in the device. The catalog of 49 devices and the bezel artwork come from the extension.
npx rpc-agent install
npx rpc-agent shot localhost:3000 -d iphone-15,ipad,desktop-1440 --bezelsFor an agent, it's one line of setup:
claude mcp add --scope user rpc -- npx -y rpc-agent mcpAfter that the agent has a screenshot tool and can check its own work before it tells me it's finished.
One capture function, two ways in
The CLI and the MCP server both call the same capture() function, so a bug fixed for one is fixed for both. The bigger split was output. In a terminal, rpc draws a banner, spinners and a results table with @clack/prompts. When stdout is a pipe, when CI is set, or with --json, it prints the same plain ok and x lines as before the terminal UI existed. Agents and scripts that parse those lines never see the decoration, and rpc mcp prints nothing but MCP messages.
Pages taller than Chromium will draw
Chromium won't produce a screenshot taller than 16,384 device pixels. A long marketing page on an iPhone at 3x passes that quickly. The extension handled length by scrolling and stitching, which repeated the sticky header in every segment.
rpc takes clipped full-page captures instead. Each segment renders as if the viewport were the whole document, so sticky and fixed elements appear once, at the top. Segments are about 8,192 device pixels, and I stitch them in Node with a small PNG decoder on node:zlib, so there's no native dependency to install. Segment heights are picked so each seam lands on a whole pixel row even at a 2.625 pixel ratio. The e2e test captures a 21,656 px page at 3x, which comes to 64,968 rows, and checks every row against the known layout.
Slices instead of one tall image
I didn't want to hand a model a 65,000 pixel PNG. So with fullPage, the MCP tool returns the page as viewport-tall JPEG slices, each labelled like iphone-15 · slice 2/7 · y=852–1704 css px. Ten come back inline by default. If there are more, the rest go to disk and the text tells the agent which range it skipped and where the files are, so it can read them itself.
Signed-in pages without leaking the token
Most of what I want checked sits behind a login, so v0.4.0 added auth. rpc login opens a real browser, you sign in, and rpc saves the storage state for that origin with file mode 0600. Later captures use it automatically.
Headers were the subtle part. Playwright's page.route can add an Authorization header, but its header overrides follow redirects. A 302 to another host would carry your token there. So rpc injects headers through the CDP Fetch domain, which pauses on each redirect hop separately and lets me check the origin every time. Values never appear in output, and a page that redirects to /login fails with AUTH_REQUIRED rather than handing the agent a screenshot of a sign-in form.
What it doesn't do
It's Chromium only and portrait only. Every MCP call launches a fresh browser, which costs about a second. Scroll-driven animations get captured in their scroll-top state, and login detection reads the URL path, so an app that shows a sign-in form without redirecting gets captured as is. I'd rather list those than have someone find them mid-review.
Where it leaves me
Now when an agent says the mobile header is fixed, it can show me the iPhone screenshot. rpc-agent is on npm and on GitHub under MIT. If your team runs coding agents and wants them checking their own UI work, this is the kind of tooling I build.
