mcp · corralimited — Claude Code MCP server: what it does, how to install
Catches visual UI drift, captures screenshots, and converts HTML with CSS into images using the SnapDiff API.
claude mcp add --env SNAPDIFF_API_KEY=<SNAPDIFF_API_KEY> --env SNAPDIFF_API_URL=<SNAPDIFF_API_URL> --transport stdio corralimited-mcp -- npx -y @corralimited/snapdiff-mcpWhat mcp does
The package equips coding assistants with four UI inspection tools. It handles regression verification against baselines, compares pairs of pages, captures full screenshots, and exports HTML snippets to graphic files. Verification calls return concrete verdicts such as unexpected regressions or confirmed changes.
Everything communicates over stdio on your machine. The editor launches the utility as a subprocess, while Playwright handles local tasks. Without a valid SNAPDIFF_API_KEY, requests will fail immediately, so grab a token from your SnapDiff account first.
What it helps with
- catch visual UI regressions after automated code edits
- calculate diff percentages between two page layouts
- capture clean screenshots from target URLs
- render HTML and CSS blocks into standalone images
Example prompts for the agent
- Capture a screenshot of the page and check for visual drift.
- Compare this URL against our stored project baseline using
snapdiff_compare_pages. - Generate a social card image from this HTML and CSS snippet with
snapdiff_html_to_image.
How to install mcp
Platform CLI
claude mcp add --env SNAPDIFF_API_KEY=<SNAPDIFF_API_KEY> --env SNAPDIFF_API_URL=<SNAPDIFF_API_URL> --transport stdio corralimited-mcp -- npx -y @corralimited/snapdiff-mcpReplace <…> with your own values
Platform CLI
codex mcp add corralimited-mcp --env SNAPDIFF_API_KEY=<SNAPDIFF_API_KEY> --env SNAPDIFF_API_URL=<SNAPDIFF_API_URL> -- npx -y @corralimited/snapdiff-mcpReplace <…> with your own values
Config file
{
"mcpServers": {
"corralimited-mcp": {
"command": "npx",
"args": [
"-y",
"@corralimited/snapdiff-mcp"
],
"env": {
"SNAPDIFF_API_KEY": "<SNAPDIFF_API_KEY>",
"SNAPDIFF_API_URL": "<SNAPDIFF_API_URL>"
}
}
}
}Replace <…> with your own values
Config file
{
"servers": {
"corralimited-mcp": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@corralimited/snapdiff-mcp"
],
"env": {
"SNAPDIFF_API_KEY": "<SNAPDIFF_API_KEY>",
"SNAPDIFF_API_URL": "<SNAPDIFF_API_URL>"
}
}
}
}Replace <…> with your own values
Platform CLI
gemini mcp add -e SNAPDIFF_API_KEY=<SNAPDIFF_API_KEY> -e SNAPDIFF_API_URL=<SNAPDIFF_API_URL> corralimited-mcp npx -y @corralimited/snapdiff-mcpReplace <…> with your own values
Step by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about mcp
How to install mcp in Claude Code?
Run this command in your terminal: claude mcp add mcp -e SNAPDIFF_API_KEY=<SNAPDIFF_API_KEY> -- npx -y @corralimited/snapdiff-mcp. Replace the placeholder with your personal token.
What does the mcp server do?
It connects coding agents to SnapDiff tools to evaluate visual layout differences, take screenshots, and transform HTML into images.
Does this server listen on a network port?
No, it operates solely via stdio as an editor subprocess. The package makes outbound calls to the SnapDiff API instead of opening local ports.
Similar MCP servers
All MCP servers for Frontend and UI →mcp by other authors comes first.
