How AI Agents Can Screenshot and Analyze Web Pages

An AI agent that only reads HTML is working from a blueprint, not the building. Cookie banners, canvas-rendered charts, broken CSS, a modal stuck open, none of that shows up in raw markup. If you want an agent to actually judge how a page looks, it needs a screenshot and a vision model, not another string to parse.

This guide builds that loop end to end: capture a page as a base64 image with Rendex, hand it to Claude's vision API, and use the response to decide what the agent checks next. Every snippet below is working Python you can run as-is.

Prerequisites

A Rendex API key. Get one free (100 calls/month, no credit card).
An Anthropic API key with access to a Claude model that accepts image input.
Python 3.10+ with rendex and anthropic installed (pip install rendex anthropic).

Step 1: Capture the page as base64 JSON

Vision APIs want image bytes, not a file path, so skip the binary endpoint and call screenshot_json instead. It returns the same render as a JSON body with the image already base64-encoded.

capture.py

# pip install rendex
from rendex import Rendex

rendex = Rendex("YOUR_API_KEY")

def capture(url: str, **options) -> dict:
    result = rendex.screenshot_json(
        url,
        full_page=True,
        wait_for_selector=options.pop("wait_for_selector", None),
        **options,
    )
    return result["data"]  # {"image": "<base64>", "contentType": "image/png", ...}

full_page captures the whole scroll height, not just the first viewport, which matters for an agent judging layout further down the page. wait_for_selectoris worth setting for any client-rendered app so the agent doesn't analyze a loading skeleton. The full parameter list, including PDF output and cookie injection for authenticated pages, is in the API reference.

Here is what that loop looks like end to end: the agent calls rendex_screenshot on a URL, gets the rendered page back, and turns it into the structured read a downstream step can act on.

An AI agent calls rendex_screenshot on a pricing page, gets the captured page back in a browser frame, and returns a structured analysis: page type, tiers, highlighted plan, and primary CTA — The agent captures the page with rendex_screenshot, then reads it into structured fields a next step can act on

Step 2: Feed the image to a vision model

Claude's Messages API accepts an image content block alongside text in the same user turn. Pass the base64 string and content type straight from the Rendex response, no re-encoding needed.

analyze.py

import anthropic

client = anthropic.Anthropic()

def analyze(image_data: dict, question: str) -> str:
    message = client.messages.create(
        model="claude-sonnet-5",
        max_tokens=1024,
        messages=[
            {
                "role": "user",
                "content": [
                    {
                        "type": "image",
                        "source": {
                            "type": "base64",
                            "media_type": image_data["contentType"],
                            "data": image_data["image"],
                        },
                    },
                    {"type": "text", "text": question},
                ],
            }
        ],
    )
    return message.content[0].text

This is the whole visual-analysis step: one capture, one Claude call. Ask a specific question rather than a vague "describe this page" and the response is a lot more actionable.

Step 3: Let the agent decide the next capture

The useful part of an AI agent web screenshot workflow is the loop, not a single snapshot. Capture, read the analysis, and let it decide whether another capture is worth taking, for example checking the same page on a phone-sized viewport after the desktop pass flags a layout concern.

loop.py

def review_page(url: str) -> list[str]:
    findings = []

    desktop = capture(url, wait_for_selector="body")
    verdict = analyze(
        desktop,
        "Check the pricing cards and primary CTA button. "
        "Reply with any layout or contrast problems you see, "
        "and say MOBILE_CHECK if this needs a phone-sized re-check.",
    )
    findings.append(f"desktop: {verdict}")

    if "MOBILE_CHECK" in verdict:
        mobile = capture(url, device="iphone_15", wait_for_selector="body")
        mobile_verdict = analyze(
            mobile, "Check the same pricing cards on this phone-sized capture."
        )
        findings.append(f"mobile: {mobile_verdict}")

    return findings

for line in review_page("https://example.com/pricing"):
    print(line)

device swaps in a phone-sized viewport and user agent in one parameter, so the second capture needs no extra configuration beyond the preset name. Rendex renders and returns the image; the agent decides what that image means and whether to look again. Wire the same pair of calls into a larger agent framework and review_page becomes one tool the planner can call whenever it needs to see something instead of guess.

Troubleshooting

The vision model says the page looks empty or half-loaded. Set wait_for_selector to an element that only exists once the app has rendered, or add a fixed delay in milliseconds for pages that finish JS work after the network goes idle.

Requests get slow or expensive at scale. Retina output defaults to a deviceScaleFactor of 2, which doubles image dimensions and therefore the tokens a vision model spends reading it. Drop to 1, or set resizeWidth to downscale the capture, when pixel-level detail is not the point.

Full-page captures come back huge. Combine selector with a specific element (a pricing card, a header) instead of the whole page when the agent only needs to judge one region. It is a smaller image and a more focused question for the model.

Next steps

This same pattern works for anything an agent needs to see rather than read: confirming a deploy looks right, spotting a broken OG image, or reviewing a competitor's page for an ai visual analysis pass before a report goes out. If the agent already talks over MCP instead of raw API calls, the MCP rendering guide covers wiring an agent screenshot tool into Claude Desktop and Cursor directly, so the model can call captures on its own without you writing the loop above by hand.

For llm web browsing screenshot workflows that need every option this API exposes, viewport sizing, dark mode, ad blocking, PDF output, the free screenshot tool lets you try a capture with no code, and a free API key gets the loop above running against your own pages in a couple of minutes.