MCP server that prevents LLM vision downscaling, tiles large images & screenshots so Claude, GPT-4o, and Gemini see every detail
image-tiler-mcp-server
以下摘录自该仓库的 README(片段) · 在 GitHub 读完整 README →
MCP server that gives LLMs full-resolution vision by tiling large images and capturing full web pages before details are lost to automatic downscaling.
The server generates an interactive HTML preview for every image, showing per-model tile grids and token estimates
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.
Quick Start
Claude Code
> 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 CLI
Or add to ~/.codex/config.toml:
VS Code (Cline / Continue)
Add to your VS Code MCP settings:
Cursor
Add to ~/.cursor/mcp.json:
Claude Desktop
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
Restart Claude Desktop after editing.
Global Install (faster startup)
Then use the simpler config in any client:
From Source
Then point your MCP config to the built file:
Docker
Build the image:
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.
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):
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
| What | Example prompt |
|------|---------------|
| Target a specific model | "Tile hero.png for OpenAI" |
| Keep full resolution | "Tile banner.png at full resolution, no downscaling" |
| PNG output | "Tile diagram.png as lossless PNG" |