Full-resolution vision for LLMs by tiling images and web pages.
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.
Quick Start
Claude Code
claude mcp add image-tiler -- npx -y image-tiler-mcp-server
image-tileris a local alias. You can name it anything you like.image-tiler-mcp-serveris the npm package that gets downloaded and run.
See Claude Code MCP docs for more info.
Codex CLI
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"]
VS Code (Cline / Continue)
Add to your VS Code MCP settings:
{
"image-tiler": {
"command": "npx",
"args": ["-y", "image-tiler-mcp-server"]
}
}
Cursor
Add to ~/.cursor/mcp.json:
{
"mcpServers": {
"image-tiler": {
"command": "npx",
"args": ["-y", "image-tiler-mcp-server"]
}
}
}
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
{
"mcpServers": {
"image-tiler": {
"command": "npx",
"args": ["-y", "image-tiler-mcp-server"]
}
}
}
Restart Claude Desktop after editing.
Global Install (faster startup)
npm install -g image-tiler-mcp-server
Then use the simpler config in any client:
{
"command": "image-tiler-mcp-server"
}
From Source
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"]
}
Docker
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"
]
}
`
Tools (2)
capture_urlCaptures a full-page screenshot of a URL, tiles it, and provides an interactive preview for analysis.tile_imageProcesses a local image file into tiles for high-resolution analysis by the LLM.Environment Variables
TILER_ALLOWED_DIRSDirectories allowed for image access when running in Docker.CHROME_NO_SANDBOXControls Chrome sandbox behavior in Docker containers.Configuration
{
"mcpServers": {
"image-tiler": {
"command": "npx",
"args": ["-y", "image-tiler-mcp-server"]
}
}
}