{"_id":"@ahmedshaikh/image-diff-mcp","name":"@ahmedshaikh/image-diff-mcp","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@ahmedshaikh/image-diff-mcp","version":"0.1.0","type":"module","description":"Compare two PNG screenshots as an MCP server — pixel-diff count, ratio, dimension check, and an optional highlighted diff image. For UI-verification loops: did my change alter the rendering?","bin":{"agent-imgdiff":"dist/cli.js"},"engines":{"node":">=18"},"scripts":{"serve":"tsx src/server.ts","imgdiff":"tsx src/cli.ts","build":"tsc","test":"node --import tsx --test --test-force-exit test/*.test.ts","prepublishOnly":"npm run build"},"dependencies":{"@modelcontextprotocol/sdk":"^1.0.0","pixelmatch":"^6.0.0","pngjs":"^7.0.0","zod":"^3.23.8"},"devDependencies":{"@types/node":"^20.11.0","@types/pngjs":"^6.0.5","tsx":"^4.7.0","typescript":"^5.4.0"},"license":"MIT","author":{"name":"ahmedshaikh"},"keywords":["mcp","model-context-protocol","claude","agent","ai","image-diff","pixelmatch","screenshot","visual-regression"],"repository":{"type":"git","url":"git+https://github.com/RaziStuff/image-diff-mcp.git"},"homepage":"https://github.com/RaziStuff/image-diff-mcp#readme","bugs":{"url":"https://github.com/RaziStuff/image-diff-mcp/issues"},"publishConfig":{"access":"public"},"gitHead":"7c48d94b6ff1c5e1a6c5af30d07b6d447a830aa4","_id":"@ahmedshaikh/image-diff-mcp@0.1.0","_nodeVersion":"24.18.0","_npmVersion":"11.16.0","dist":{"integrity":"sha512-xoqjqdiOfo4Iiy91q2+jPPVkEioXAOyV0Olo5yndLBUz6270VMsrMQx/qx0KrOnslwK7BaWlfASIk0m+G3oDqw==","shasum":"2f6d8f92bb5abdb29e94329b41af4b33e11dfb70","tarball":"https://registry.npmjs.org/@ahmedshaikh/image-diff-mcp/-/image-diff-mcp-0.1.0.tgz","fileCount":6,"unpackedSize":7377,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCICcPA0DGZdKaqbBX4oYH8Zn83UtMMWLwmk9v4VWf1jfGAiA7Ma+xHc+p7tV9oqzAs6Zby0ZmC7SM7P3Il4ITVMKmjw=="}]},"_npmUser":{"name":"ahmedshaikh","email":"ahmed@shaikh1.com"},"directories":{},"maintainers":[{"name":"ahmedshaikh","email":"ahmed@shaikh1.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/image-diff-mcp_0.1.0_1782701045136_0.5208028376967333"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-29T02:44:05.000Z","0.1.0":"2026-06-29T02:44:05.256Z","modified":"2026-06-29T02:44:05.424Z"},"maintainers":[{"name":"ahmedshaikh","email":"ahmed@shaikh1.com"}],"description":"Compare two PNG screenshots as an MCP server — pixel-diff count, ratio, dimension check, and an optional highlighted diff image. For UI-verification loops: did my change alter the rendering?","homepage":"https://github.com/RaziStuff/image-diff-mcp#readme","keywords":["mcp","model-context-protocol","claude","agent","ai","image-diff","pixelmatch","screenshot","visual-regression"],"repository":{"type":"git","url":"git+https://github.com/RaziStuff/image-diff-mcp.git"},"author":{"name":"ahmedshaikh"},"bugs":{"url":"https://github.com/RaziStuff/image-diff-mcp/issues"},"license":"MIT","readme":"# image-diff\n\nCompare two **PNG screenshots** and find out how much changed — pixel-diff count,\nratio, a dimension check, and an optional **highlighted diff image**. For\nUI-verification loops: screenshot before, make a change, screenshot after, compare.\n\n```\ncompare({ path_a: \"before.png\", path_b: \"after.png\", output: \"diff.png\" })\n→ { dimensions_match: true, total_pixels: 786432, diff_pixels: 1842,\n    diff_ratio: 0.0023, identical: false, output: \"diff.png\" }\n```\n\n## The tool\n\n**`compare(path_a, path_b, output?, threshold?)`** — returns:\n- `dimensions_match` — if false, you get `a_size`/`b_size` (can't pixel-compare different sizes)\n- `diff_pixels` / `total_pixels` / `diff_ratio` and `identical`\n- writes a highlighted **diff PNG** to `output` when provided\n- `threshold` (0–1, default 0.1) — per-pixel color tolerance; raise it to ignore\n  anti-aliasing / minor noise\n\nBuilt on [pngjs](https://github.com/pngjs/pngjs) + [pixelmatch](https://github.com/mapbox/pixelmatch) — pure JS, no native build.\n\n## Setup\n\n```bash\nnpm install\nnpm test\n```\n\n```bash\nclaude mcp add image-diff -- node /abs/path/image-diff/dist/server.js\n# CLI: agent-imgdiff before.png after.png --out diff.png   (exit 0 if identical)\n```\n\n## Honest limits\n\n- **PNG only** (what pngjs decodes). Convert JP/WebP first if needed.\n- Pixel comparison, not perceptual/semantic — a 1px layout shift lights up lots of\n  pixels. Use `threshold` and `diff_ratio` to set a sensible tolerance.\n- Images must share dimensions to be compared (otherwise it just reports the sizes).\n","readmeFilename":"README.md","_rev":"1-6659f5d0aa5f89fa2cc858a1ba9a7224"}