MCP Server Claude Vision 1072x1072 Tiled Screenshots

Overview

This MCP server captures high-quality, tiled screenshots sized for Claude Vision’s preferred image dimensions (1072×1072). It’s built to break long or large pages into a grid of tiles, each 1072×1072 pixels (configurable), and return them in a format suitable for downstream processing by Claude Vision or other image-aware models. The server exposes a simple HTTP/MCP-style API so tools and agents can request screenshots with flexible viewport and waiting strategies.

This is useful when you need consistent, model-friendly image inputs (for OCR, visual reasoning, or multimodal analysis) or when full-page images exceed memory or size limits. Instead of a single oversized PNG, the server returns smaller tiles, metadata (position, scale), and optional stitched results. The approach improves reliability across varied content and integrates with automated workflows and model pipelines.

Features

• Capture tiled screenshots at 1072×1072 (default) with configurable tile size and overlap
• Configurable viewport width/height, device scale factor, and user agent
• Multiple wait strategies: timeout, wait-for-selector, networkidle
• Returns TIFF/PNG tiles as base64 or file URLs; optional stitched output
• Designed to produce inputs that match Claude Vision expectations
• Simple HTTP/MCP API for integration with agents and developer tools
• Docker-ready and configurable via environment variables
• Concurrent capture support and basic retry/error metadata

Installation / Configuration

Prerequisites:

• Node.js 18+ (or use Docker)
• Chromium installed (or let Puppeteer download)

Clone and install:

git clone https://github.com/just-every/mcp-screenshot-website-fast.git
cd mcp-screenshot-website-fast
npm install

Environment variables (example .env):

PORT=3000
CLAUDE_API_KEY=sk-...
DEFAULT_TILE_SIZE=1072
DEFAULT_OVERLAP=0
PUPPETEER_HEADLESS=true
CAPTURE_CONCURRENCY=2

Start the server:

# development
npm start

# or with Docker
docker build -t mcp-screenshot-fast .
docker run -p 3000:3000 --env-file .env mcp-screenshot-fast

Available Resources

Endoints (example)

• POST /capture — request a tiled screenshot
• GET /status — basic server health
• GET /capture/:id — fetch capture metadata or download results if available

Node.js example (minimal):

import fetch from 'node-fetch';

const res = await fetch('http://localhost:3000/capture', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    url: 'https://example.com',
    viewport: { width: 1200, height: 800, deviceScaleFactor: 1 },
    tileSize: 1072,
    overlap: 0,
    waitStrategy: { type: 'waitForSelector', selector: '.main' }
  })
});
const json = await res.json();
console.log(json);

cURL example:

curl -X POST http://localhost:3000/capture \
  -H "Content-Type: application/json" \
  -d '{
    "url":"https://example.com",
    "viewport":{"width":1200,"height":800},
    "tileSize":1072,
    "waitStrategy":{"type":"timeout","ms":2000}
  }'

Response format (summary)

• id: capture id
• tiles: array of { x, y, width, height, base64, filename }
• meta: { pageWidth, pageHeight, scale, tileSize, overlap }
• status: success | error
• error: optional error message

Table: Common request fields

Use Cases

1. Preparing inputs for Claude Vision multimodal analysis

   • Capture a long article as 1072×1072 tiles, then pass each tile to Claude Vision for page understanding, summarization, or Q&A. Consistent tile dimensions avoid resizing artifacts and match model expectations.

2. Visual regression and QA testing

   • Snapshot pages in tiled chunks to detect layout regressions across long pages that do not fit into a single viewport.

3. Archival and compliance

   • Store tiled PNGs for records, with metadata to reconstruct full-page layout if necessary. Smaller tiles simplify storage/transmission compared to oversized images.

4. Accessibility scanning and automated audits

   • Use waitForSelector or networkidle strategies to ensure dynamic content loads, then feed tiles into automated scanners or model-based checks.

Tips and Best Practices

• Prefer tileSize=1072 when targeting Claude Vision for consistent input dimensions.
• Use waitStrategy.waitForSelector for SPA pages with dynamic rendering; fallback to timeout or networkidle when selectors are unreliable.
• Set overlap > 0 if you need contextual continuity between tiles for OCR or stitching.
• Limit concurrency when running many captures to avoid high memory/CPU usage on the host.

Links and Support

• Source code and issues: https://github.com/just-every/mcp-screenshot-website-fast
• For integration questions, open an issue on the repo and include capture id and server logs for troubleshooting.