image-tiler-mcp-server

MCP server that gives LLMs full-resolution vision by tiling large images and capturing full web pages before details are lost to automatic downscaling.

What You Can Do

• Visual QA for web pages. Capture a URL, tile it, and let the LLM spot misaligned elements, wrong colors, and broken layouts at full resolution. Fix the code, re-capture, and verify the fix visually.

• Mobile responsive testing. Capture at any viewport width with mobile emulation, retina scaling, and a real mobile user agent. The LLM reviews the full mobile layout tile by tile, catching responsive breakpoint issues that only appear on small screens.

• Full-resolution image analysis. Diagrams, infographics, and design mockups lose critical details when LLMs downscale them. A 3,600 x 20,220px full-page capture that Claude would crush to ~279 x 1,568 becomes 76 analyzable tiles, each at native resolution.

• Token-efficient tile inspection. Each tile gets entropy-based content classification: blank, low-detail, mixed, or high-detail. The LLM skips blank tiles entirely and focuses tokens on what matters.

• Iterative visual workflow. Capture, analyze, fix, re-capture. Versioned output directories (_v1, _v2, ...) preserve each iteration so you can compare before and after without overwriting previous results.

Related MCP server: mcp-eyes

Quick Start

Claude Code

claude mcp add image-tiler -- npx -y image-tiler-mcp-server

image-tiler is a local alias. You can name it anything you like. image-tiler-mcp-server is the npm package that gets downloaded and run.

See Claude Code MCP docs for more info.

codex mcp add image-tiler -- npx -y image-tiler-mcp-server

Or add to ~/.codex/config.toml:

[mcp_servers.image-tiler]
command = "npx"
args = ["-y", "image-tiler-mcp-server"]

Add to your VS Code MCP settings:

{
  "image-tiler": {
    "command": "npx",
    "args": ["-y", "image-tiler-mcp-server"]
  }
}

Add to ~/.cursor/mcp.json:

{
  "mcpServers": {
    "image-tiler": {
      "command": "npx",
      "args": ["-y", "image-tiler-mcp-server"]
    }
  }
}

Add to your Claude Desktop config file:

• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

• Windows: %APPDATA%\Claude\claude_desktop_config.json

• Linux: ~/.config/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "image-tiler": {
      "command": "npx",
      "args": ["-y", "image-tiler-mcp-server"]
    }
  }
}

Restart Claude Desktop after editing.

npm install -g image-tiler-mcp-server

Then use the simpler config in any client:

{
  "command": "image-tiler-mcp-server"
}

git clone https://github.com/keiver/image-tiler-mcp-server.git
cd image-tiler-mcp-server
npm install
npm run build

Then point your MCP config to the built file:

{
  "command": "node",
  "args": ["/absolute/path/to/image-tiler-mcp-server/dist/index.js"]
}

Build the image:

git clone https://github.com/keiver/image-tiler-mcp-server.git
cd image-tiler-mcp-server
docker build -t image-tiler-mcp-server .

The image includes Chromium for URL capture. Chrome's --no-sandbox flag is enabled by default in the image because Docker containers don't provide the user namespaces that Chrome's sandbox requires. The container itself provides process isolation. To re-enable the sandbox (e.g. with --privileged or user-namespace support), pass -e CHROME_NO_SANDBOX=0.

{
  "command": "docker",
  "args": [
    "run", "--rm", "-i",
    "-v", "/path/to/your/images:/data",
    "-e", "TILER_ALLOWED_DIRS=/data",
    "image-tiler-mcp-server"
  ]
}

The -i flag is required (stdio transport). Mount a volume for any directories the server needs to read from or write to, and set TILER_ALLOWED_DIRS to restrict file access to those mounts.

To disable URL capture entirely (no Chrome, no network access):

{
  "command": "docker",
  "args": [
    "run", "--rm", "-i",
    "-e", "TILER_DISABLE_URL_CAPTURE=1",
    "-v", "/path/to/your/images:/data",
    "-e", "TILER_ALLOWED_DIRS=/data",
    "image-tiler-mcp-server"
  ]
}

Usage

Tile an image

tile ~/source.png and analyze content

The server reads image dimensions and generates an interactive HTML preview with per-model tabs showing grid overlays, tile counts, and token estimates. Pick the model that matches your use case, and the server tiles and returns batches for analysis.

Capture a web page

capture full page screenshot of https://tomotv.app

The server launches headless Chrome, scrolls through the page to trigger lazy-loaded images (loading="lazy"), then captures a full-page screenshot (scroll-stitching pages over 16,384px). Your assistant receives each section at full resolution and can identify layout issues, misaligned elements, or broken styling that downscaling would hide.

To get only the screenshot without tiling, just ask for a screenshot and stop after the comparison step.

Test a mobile layout

capture https://tomotv.app in mobile view

This is responsive QA, not just a different viewport. The server captures with mobile: true, which sets a 390px viewport, 2x retina scale, and a mobile Safari user agent. Sites that check for mobile UA or touch capability serve their mobile layout, so the LLM reviews exactly what a real phone user sees.

Customize tiling

Presets

OpenAI note: The openai config targets the GPT-4o / o-series vision pipeline (512px tile patches). GPT-4.1 uses a fundamentally different pipeline (32x32 pixel patches) and is not currently supported. It would require a separate model config with a different calculation approach.

Gemini 3 note: Gemini 3 uses a fixed token budget per image (1,120 tokens regardless of dimensions). Tiling increases total token cost but preserves fine detail. For cases where detail isn't critical, consider sending a single image instead.

Why Tile?

You screenshot a full page, paste it into Claude, and Claude crushes it to a thumbnail. Any image with a long edge over 1,568 pixels gets auto-downscaled to fit within ~1.15 megapixels. A 3,600 x 20,220px full-page capture becomes ~279 x 1,568, losing over 99% of its pixels before the model even sees it.

GPT-4o is more forgiving but still destructive: it scales your image to fit within 2,048px, then scales the shortest side down to 768px, then tiles internally. An 8,192px-wide NASA panorama becomes ~1,456 x 768 before GPT-4o's own tiling even begins.

Gemini 1.5/2.0 handles large images natively at 768px tiles without downscaling. Gemini 3, however, caps each image at a fixed token budget (1,120 tokens) regardless of size. Tiling gives each piece its own budget.

Each tile stays within the model's sweet spot, so the LLM processes it at full resolution.

What Happens Without Tiling

Using assets/portrait.png (3,600 x 20,220, a full-page National Geographic capture) as an example:

Gemini 1.5/2.0 tiles large images natively at 768px without downscaling. For Gemini 3, tiling multiplies the total token budget by sending each tile as a separate image.

With Tiling

Using assets/landscape.png (8,192 x 4,320, NASA image gallery):

Based on published model vision documentation as of Feb 2026: Claude vision limits · OpenAI vision guide · Gemini image understanding · Gemini media resolution

How It Works

This MCP server:

1. Reads the image dimensions and the target model's vision config

2. Generates an interactive HTML preview with per-model tabs showing grid overlays, tile numbering, and token estimates

3. Calculates an optimal grid that keeps every tile within the model's sweet spot

4. Extracts tiles as individual images (WebP default, PNG optional) and saves them to disk

5. Returns a metadata summary (grid layout, file paths, token cost, per-tile content hints)

6. Serves tiles on demand: call with tilesDir + start/end to retrieve batches of up to 5 tiles

Web capture pipeline. For URLs, the server launches headless Chrome, triggers lazy-loaded images by scrolling the page, captures a full-page screenshot (scroll-stitching pages over 16,384px), then feeds the screenshot into the same tiling pipeline.

Auto-downscaling. Images over 10,000px on their longest side are automatically downscaled before tiling (configurable via maxDimension). This keeps tile counts reasonable and improves LLM comprehension by increasing content density per tile. Set maxDimension=0 to disable, or pass a custom value (e.g., maxDimension=5000) for more aggressive downscaling.

tiler

One unified tool that handles all image tiling operations. The mode is auto-detected from the parameters you provide:

• tilesDir present → Tile retrieval mode (read-only pagination)

• url or screenshotPath present → URL capture mode (screenshot + tile)

• filePath, sourceUrl, dataUrl, or imageBase64 present → Tile-image mode

Mode priority: When multiple mode params are present, the tool resolves by priority: tilesDir > url/screenshotPath > filePath/sourceUrl/dataUrl/imageBase64. Avoid passing params from different modes in the same call.

Workflow:

The tool uses a two-step process to let you choose the right model before tiling:

1. Compare - Call with only the image source. Returns a comparison table showing tile counts and token estimates for each supported model, plus an interactive HTML preview.

2. Tile - Call again with the chosen preset + outputDir from step 1, plus:

   • Image sources: re-include your original source param (filePath, sourceUrl, etc.)

   • Captures: use screenshotPath from step 1 (not the original url)

Skip the comparison step: Provide preset and outputDir on the first call to tile immediately.

Interactive model picker: Clients that support MCP elicitation get a dropdown picker instead of the comparison table.

Parameters - Image Source (tile-image mode)

*At least one image source is required for tile-image mode.

Parameters - URL Capture (capture mode)

Supports scroll-stitching for pages taller than 16,384px. Automatically triggers lazy-loaded images (loading="lazy") before capture by scrolling through the page. Pages without lazy images are unaffected.

Parameters - Tile Retrieval (pagination mode)

Parameters - Tiling Config (shared across modes)

Prompts

Guided workflows for clients that support MCP prompts:

Resources

Static references for clients that support MCP resources:

Behaviors

• Source conflict: Multiple image source params → highest-precedence source is used with a warning (filePath > sourceUrl > dataUrl > imageBase64).

• Re-entry: If outputDir already has a preview from the comparison step, the server skips straight to tiling.

• Elicitation cancellation: Cancelling the model picker returns "Tiling cancelled by user." without tiling.

• Versioned output: Repeated tiling of the same source creates _v1, _v2, ..., _vN directories to avoid overwriting.

• Tile naming: tile_ROW_COL.{format} with zero-padded 3-digit indices (e.g., tile_000_003.webp), row-by-row, left-to-right.

Supported Formats

PNG, JPEG, WebP, TIFF, GIF

Troubleshooting

"Command not found" - Make sure Node.js 20+ is installed: node --version

"File not found" - Use absolute paths. Relative paths resolve from the MCP server's working directory.

"MCP tools not available" - Restart your MCP client after config changes. In Claude Code, run /mcp to check server status.

"Chrome not found" - Install Google Chrome or set the CHROME_PATH environment variable to the Chrome executable (must be an absolute path).

Running as root - Chrome's sandbox is automatically disabled when running as root. For non-root containers (e.g. Docker), set CHROME_NO_SANDBOX=1. The official Docker image already sets this.

Security

Transport: stdio only. The server is a single-session local process spawned by the MCP client. It never listens on a network socket.

URL download protection (always-on)

https: sourceUrl downloads use request-filtering-agent, which blocks requests to private IP ranges before they are made:

• RFC 1918 (10.x, 172.16-31.x, 192.168.x)

• Loopback (127.x, ::1)

• Link-local / IMDS (169.254.x, fe80::/10) including IPv4-mapped IPv6 (::ffff:169.254.169.254)

• CGNAT (100.64.x), ULA (fc00::/7)

HTTP redirects are followed up to 5 hops. Each hop re-applies SSRF filtering for https: URLs, so a redirect to a private IP is blocked even if the initial URL was public. https: to http: downgrades are blocked. http: downloads bypass SSRF filtering, intended for local dev servers (localhost, LAN IPs). Use https: for all remote/production URLs.

Limitation: DNS rebinding is mitigated but not fully prevented at the application layer.

Path containment (opt-in via TILER_ALLOWED_DIRS)

Set TILER_ALLOWED_DIRS to a comma-separated list of absolute paths to restrict all file I/O to those directories:

TILER_ALLOWED_DIRS=/app/uploads,/tmp/tiler-work

When set:

• filePath and tilesDir inputs are checked via fs.realpath() (resolves symlinks) before access.

• outputDir writes are checked against the nearest existing ancestor to prevent path traversal through non-existing directories.

• Any path outside the allowed list is rejected with an [TILER_ALLOWED_DIRS] error.

When unset, no path restriction is applied (preserves backward-compatible local behaviour).

Chrome URL capture kill switch

Chrome headless can reach any network address the host can reach. Application-level IP checks cannot reliably constrain it. For cloud deployments without a NetworkPolicy or equivalent, disable URL capture entirely:

TILER_DISABLE_URL_CAPTURE=1

Any call with a url parameter will return an error instead of spawning Chrome.

Docker example:

# CHROME_NO_SANDBOX=1 is set by default in the Docker image
TILER_ALLOWED_DIRS=/app/uploads
TILER_DISABLE_URL_CAPTURE=1   # remove only if Chrome is network-isolated

Requirements

• Node.js 20+

• Compatible MCP client (Claude Code, Codex CLI, VS Code, Cursor, Claude Desktop)

Contributing

See CONTRIBUTING.md for how to report bugs, suggest changes, and submit PRs.

Acknowledgments

Built with the help of Claude Code as an AI assistant for code drafting, testing, and documentation.

License

MIT

Links

• GitHub Repository

• NPM Package

• Report Issues