---
title: "Documentation – Pixel Not Perfect | Pixel Not Perfect"
description: "Getting started, configuration settings, and MCP prompts for Pixel Not Perfect visual reviews with your coding agent."
canonical_url: "https://pixelnotperfect.dev/docs"
meta:
  "og:description": "Getting started, configuration settings, and MCP prompts for Pixel Not Perfect visual reviews with your coding agent."
  "og:image": "https://pixelnotperfect.dev/og-banner.png"
  "og:title": "Documentation – Pixel Not Perfect"
---

> Index of every page on this site: [llms.txt](https://pixelnotperfect.dev/llms.txt)

# Docs

## Getting started

Set up Pixel Not Perfect in three steps.

Step 1

### Add the server to your MCP client

Any agent or editor that speaks MCP can use it. Needs Node.js 20 or later and Chrome or Chromium. Run this command, then choose which agents to add it to.

```
npx add-mcp @codeandfunction/pixelnotperfect --env "PIXELNOTPERFECT_ALLOWED_ROOTS=~/Designs" -g
```

Set **PIXELNOTPERFECT\_ALLOWED\_ROOTS** to the folders that hold your reference images and PDFs. To set it up by hand instead, add this to your MCP client's configuration:

```
{
  "mcpServers": {
    "pixelnotperfect": {
      "command": "npx",
      "args": ["-y", "@codeandfunction/pixelnotperfect"],
      "env": {
        "PIXELNOTPERFECT_ALLOWED_ROOTS": "~/Designs"
      }
    }
  }
}
```

Step 2

### Ask your agent to compare

The agent renders, compares, fixes and repeats until the page is within threshold.

> Compare http://localhost:3000/login with \~/Designs/login.png and fix the differences.

Step 3

### Review with the extension

Ask for a visual review, open the page, and click **Review this tab**. The extension asks for access to that one site only. Needs Chrome 130 or later. Reviews work on HTTPS sites and on local HTTP sites (localhost, 127.0.0.1 and \[::1]). If it can't find your agent, run:

```
npx @codeandfunction/pixelnotperfect install-native-host
```

[Add to Chrome](https://chromewebstore.google.com/detail/gjbnnagcebaiafccfelfomjnnigjedjd)

## Configuration

Set these in the `env` block of the server's entry in your MCP client. All are optional.

<dl>

<dt>PIXELNOTPERFECT_ALLOWED_ROOTS</dt>
<dd>

Extra folders the agent can read reference images and PDFs from, separated by commas. The agent can read every folder you list, so keep it narrow.

Default: Working and temporary folders

</dd>

<dt>PIXELNOTPERFECT_CHROME_PATH</dt>
<dd>

Path to the Chrome or Chromium program used to render pages.

Default: Detected

</dd>

<dt>PIXELNOTPERFECT_DATA_DIR</dt>
<dd>

Where reviews and comparison images are kept.

Default: A .pixelnotperfect folder in the system temporary folder

</dd>

<dt>PIXELNOTPERFECT_REVIEW_PORT</dt>
<dd>

Port of the local review server the extension talks to, from 0 to 65535.

Default: Any free port

</dd>

<dt>PIXELNOTPERFECT_HOST_REGISTRATION</dt>
<dd>

Set to off to stop the server connecting itself to the extension when it starts.

Default: On

</dd>

</dl>

## Prompts

The server ships ready-made MCP prompts. Clients that support prompts list them, often as slash commands. The reference can be an image, a PDF or a URL.

### `visual_diff`

Compares the page with the reference and reports what differs, without changing any code.

targetUrl / reference / selector / misMatchThreshold / pdfPage

### `self_healing_ui`

Compares, proposes a fix plan for you to approve, applies it and compares again, until the page is within the threshold or the iterations run out.

targetUrl / reference / maxIterations / misMatchThreshold / selector / pdfPage

### `visual_review`

Starts a visual review of the page and waits for the feedback you pin with the extension.

targetUrl

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://pixelnotperfect.dev/#website","@type":"WebSite","description":"Check your coding agent's work against the design, down to the pixel. In-browser visual review for AI agents via MCP.","name":"Pixel Not Perfect","url":"https://pixelnotperfect.dev/"},{"@id":"https://pixelnotperfect.dev/docs#webpage","@type":"WebPage","description":"Getting started, configuration settings, and MCP prompts for Pixel Not Perfect visual reviews with your coding agent.","name":"Documentation – Pixel Not Perfect","url":"https://pixelnotperfect.dev/docs","isPartOf":{"@id":"https://pixelnotperfect.dev/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://pixelnotperfect.dev/docs"]}]}]}
```

## Sitemap

See the full [sitemap](https://pixelnotperfect.dev/sitemap.md) for all pages.