Website screenshots for AI agents.

Give AI systems visual access to the web.

Most agents read the web as text: they fetch a page’s HTML, strip the markup and pass what is left to a language model. That works for an article. It misses everything that exists only once a browser has drawn the page.

• Content rendered by scripts

  A single-page app’s HTML is often an empty shell until its JavaScript runs. A plain HTTP fetch sees the shell; a browser sees the app.

• What is actually visible

  Text in the HTML may be collapsed, hidden or covered by a dialog. A screenshot shows what a person on the page can read.

• Charts

  A chart drawn on a canvas keeps its numbers as pixels, not text. A vision model can read the axes and the trend.

• Layout and hierarchy

  Which button is the primary action, what sits above the fold, what a visitor’s eye lands on first.

• Visual errors

  Overlapping text, a broken image, a page whose stylesheet failed to load. The HTML looks fine; the page does not.

urlshot.io renders each page in Chromium with its JavaScript, web fonts and lazy-loaded content. There is no GPU, so a chart drawn with WebGL shows its fallback; 2D canvas and SVG charts render. The rendering environment lists the rest.

An example agent workflow.

1. Your codeAgent needs a lookA question only the rendered page answers
2. urlshot.ioCaptureOne screen, as a JPEG
3. Your codeVision modelThe screenshot and the question
4. Your codeStructured answerJSON the agent can branch on
5. Your codeNext stepReport, retry, alert or carry on

Capture a page and ask a model about it

The screenshot is one 1280 × 800 screen as a JPEG: a small file, and still readable at the size the model sees it. This example sends it to Claude with the Anthropic SDK; any model that accepts an image works the same way. It asks for a JSON answer, so the agent’s next step can check a field instead of interpreting a paragraph.

// npm install @anthropic-ai/sdk
import Anthropic from '@anthropic-ai/sdk';

const question =
  'Does anything on this page look broken: overlapping text, missing images, unstyled content? ' +
  'Reply with JSON only: {"broken": true or false, "evidence": "one sentence"}';

// 1. Take a screenshot: one screen of the page, small enough for the model to read in full.
const params = new URLSearchParams({
  url: 'https://example.com',
  viewport_width: '1280',
  viewport_height: '800',
  format: 'jpeg',
  quality: '80',
  block_cookie_banners: 'true',
});

const capture = await fetch(`https://api.urlshot.io/v1/screenshot?${params}`, {
  headers: { Authorization: `Bearer ${process.env.URLSHOT_API_KEY}` },
});

if (!capture.ok) {
  const { error } = await capture.json();
  throw new Error(`${error.code}: ${error.message} (request ${error.requestId})`);
}

const screenshot = Buffer.from(await capture.arrayBuffer()).toString('base64');

// 2. Send the screenshot and the question to the model.
const client = new Anthropic(); // reads ANTHROPIC_API_KEY
const message = await client.beta.messages.create({
  model: 'claude-opus-5-5',
  max_tokens: 16000,
  // If this model declines to answer, the API asks a fallback model in the same call.
  betas: ['server-side-fallback-2026-07-01'],
  fallbacks: 'default',
  messages: [
    {
      role: 'user',
      content: [
        { type: 'image', source: { type: 'base64', media_type: 'image/jpeg', data: screenshot } },
        { type: 'text', text: question },
      ],
    },
  ],
});

// 3. Read the answer.
if (message.stop_reason === 'refusal') throw new Error('The model declined to answer.');
const answer = message.content.find((block) => block.type === 'text')?.text;
console.log(answer); // {"broken": false, "evidence": "..."}

Screenshots for AI agents: questions.