Yes, Visualdiff is free to use.

How do I install Visualdiff?

Visualdiff is a local plugin. Install it using npm package: @reneturcios/visualdiff and add the generated configuration snippet to your AI app's MCP config file. Then restart your AI app.

Is Visualdiff safe to use?

Visualdiff scored 6.1/10 (moderate risk) in MCP Marketplace's automated security scan. It has 2 high or critical findings to review. It's listed, but review the security report on this page before installing.

What credentials does Visualdiff need?

Visualdiff requires the following credentials or environment variables: SNAPDIFF_API_KEY. You can find setup instructions on the server detail page.

What AI apps work with Visualdiff?

Visualdiff uses the Model Context Protocol (MCP) and works with any MCP-compatible AI app, including Claude, ChatGPT / Codex, Gemini, Copilot, Cursor, and more.

Back to Browse

Visualdiff MCP Server

by CloudCorpRecords

Developer ToolsModerate6.1MCP RegistryLocal

Free

Server data from the Official MCP Registry

SnapDiff visual diffs: verify UI changes, compare pages, screenshots, HTML to image.

About

SnapDiff visual diffs: verify UI changes, compare pages, screenshots, HTML to image.

Security Report

6.1

Moderate6.1Moderate Risk

visualdiff is a well-structured client for the SnapDiff visual-testing API: it requires SNAPDIFF_API_KEY, validates inputs with zod, sends the key only as a Bearer token to the configured base URL, and has no shell execution, eval, or hardcoded secrets. Its network access and handling of user-supplied URLs and HTML are proportionate to a visual-testing tool, with the main caveats being that page content and URLs are sent to a third-party service and that SNAPDIFF_API_URL can redirect the bearer key to any host. Supply chain analysis found 3 known vulnerabilities in dependencies (0 critical, 2 high severity). Package verification found 1 issue.

8 files analyzed · 8 issues found

Security scores are indicators to help you make informed decisions, not guarantees. Always review permissions before connecting any MCP server.

Permissions Required

This plugin requests these system permissions. Most are normal for its category.

HTTP Network Access

Connects to external APIs or services over the internet.

env_vars

Check that this permission is expected for this type of plugin.

What You'll Need

Set these up before or after installing:

SNAPDIFF_API_KEYRequired

How to Install

Add this to your MCP configuration file:

{
  "mcpServers": {
    "io-github-cloudcorprecords-visualdiff": {
      "env": {
        "SNAPDIFF_API_KEY": "your-snapdiff-api-key-here"
      },
      "args": [
        "-y",
        "@reneturcios/visualdiff"
      ],
      "command": "npx"
    }
  }
}

Documentation

View on GitHub

From the project's GitHub README.

visualdiff

visualdiff wraps the SnapDiff visual-testing API: verify that a UI change matches what you meant to do, diff two pages (or a page against a stored baseline), capture a screenshot of any URL, and render raw HTML/CSS straight to an image. One binary serves a command-line interface and a stdio MCP server.

An API key is required. Set SNAPDIFF_API_KEY to a key from the SnapDiff dashboard; calls fail before any request is made when it is missing. The API base URL can be overridden with SNAPDIFF_API_URL; when it is not set, calls go to https://api.snapdiff.ai/v1.

Install

npx @reneturcios/visualdiff screenshot https://example.com

Or run the container image:

docker run -i -e SNAPDIFF_API_KEY=sk_live_... ghcr.io/cloudcorprecords/visualdiff

The container defaults to the MCP server (see below). Pass CLI arguments to use it as a CLI instead.

CLI

export SNAPDIFF_API_KEY=sk_live_...

visualdiff verify myproj pricing https://staging.example.com/pricing "added a yearly billing toggle"
visualdiff compare https://staging.example.com --before https://www.example.com
visualdiff compare http://localhost:3000 --project myproj --page-name homepage
visualdiff screenshot https://example.com --width 800 --full-page
visualdiff html-to-image "<h1>Hello</h1>" --css "h1 { color: navy; }" --width 1200 --height 630

visualdiff --version

Commands print the upstream JSON payload. Exit codes: 0 on success, 1 when a call fails (including a missing API key or an upstream API error), 2 for usage errors.

MCP server

One bin serves both faces. The mcp subcommand starts a stdio MCP server:

npx -y @reneturcios/visualdiff mcp

MCP client configuration:

{
  "mcpServers": {
    "visualdiff": {
      "command": "npx",
      "args": ["-y", "@reneturcios/visualdiff", "mcp"],
      "env": { "SNAPDIFF_API_KEY": "sk_live_..." }
    }
  }
}

Tools

Tool	Input	What it returns
`snapdiff_verify_ui_change`	`project`, `page_name`, `after`, `intent` (all required); optional `intent_regions`, `branch`, `threshold`, `match_tolerance_percent`, `ignore_selectors`, `full_page`	A verdict (`pass`, `expected_change_detected`, `unexpected_regression`, `no_change_detected`, or `needs_human_review`), a `next_action`, and a `review_url`. Requires a project with a stored page baseline.
`snapdiff_compare_pages`	`after` (required); plus `before`, or `project` + `page_name` for baseline mode; optional `branch`, `threshold`, `ignore_selectors`, `full_page`	A diff percentage plus a highlighted diff image.
`snapdiff_capture_screenshot`	`url` (required); optional `full_page`, `dark_mode`, `selector`, `width`	A screenshot of the page.
`snapdiff_html_to_image`	`html` (required); optional `css`, `width`, `height`	The rendered image (OG cards, social images, email headers).

Each tool is sent as a POST to a per-tool endpoint under the base URL with the API key as a Bearer token. Optional arguments that are not supplied are omitted from the request body entirely.

Development

npm install
npm run build   # tsc -> dist/
npm test        # node test runner over test/*.test.ts, no network (fake fetch fixtures)
npm run dev     # run the CLI from source via tsx

License

MIT — see LICENSE.

Reviews

No reviews yet

Be the first to review this server!

4.8

Local

MCP Marketplace

Free

by mcp-marketplace · Developer Tools

Search and install MCP servers from inside your AI client.