• ANALYSIS
  • TRIAGE
  • DECISION
  • HISTORY

How to investigate UI regression diffs with your AI

Connect Percy to your agent to turn visual snapshots into actionable data. Once connected, your AI handles the heavy lifting of comparing pixels and identifying regressions.

Ask AI about this page

Short answer

How can I use AI to find UI regressions?

Your agent uses Percy to pull specific pixel diff percentages and comparison details for any given snapshot. It identifies exactly which components shifted so you can decide if a change is a bug or intended. You get a clear breakdown of visual changes.

Visual outcomes.

Where your findings land.

The AI organizes visual data into these specific outcomes.

ANALYSIS

Visual change reports

The agent calculates the exact percentage of pixel differences. You get a clear summary of how much a component moved or changed.

TRIAGE

Regression identification

The AI flags specific snapshots that failed visual tests. It highlights the exact delta between the baseline and the new version.

DECISION

Human review required

The agent presents the most significant diffs for you to inspect. You make the final call on whether to approve or reject the change.

HISTORY

Snapshot audit

The AI looks back through previous visual states. You can track how a specific UI element has evolved over multiple builds.

The workflow

What your AI does when a regression is detected.

The agent automates the data gathering so you can focus on the fix.

  1. Locate snapshots

    The agent finds the relevant visual states in your Percy project to begin the investigation.

    list_snapshots

  2. Fetch comparison data

    The agent pulls the specific pixel diffs and visual delta information between two snapshots.

    list_comparisons

  3. Inspect visual details

    The agent digs into the specific properties of a snapshot to understand the nature of the change.

    get_snapshot_details

  4. Summarize findings

    The agent compiles the diff percentages and component changes into a concise report for you.

    get_snapshot_details

Try it

Copy these to start.

Use these prompts to kick off an investigation.

Starting points

Swap out the project names and snapshot IDs with your actual Percy data.

Percy Connector

You're all set. Choose your MCP client and follow the setup instructions.

Connector linkhttps://edge.vinkius.com/vk_preview_6LH0zsvN8J0nY7uPYJ5ybHRW80VU7JdDwEgote5I/mcp

Claude Desktop

Follow the steps below to connect in seconds.

  1. 1In Claude Desktop, open Settings → Connectors.
  2. 2Click “Add custom connector” and paste the connector link above as the remote MCP server URL.
  3. 3Click Add and start a new chat — Percy capabilities are ready to use.
Configuration · claude_desktop_config.jsonCopy
{
  "mcpServers": {
    "percy-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_6LH0zsvN8J0nY7uPYJ5ybHRW80VU7JdDwEgote5I/mcp"
    }
  }
}
Copy into chat04

  • List the most recent snapshots for the 'Dashboard' project in Percy.

  • Show me the comparison data for the last failed snapshot in the 'Mobile-Web' project.

  • What is the pixel diff percentage for the comparison between snapshot ID 123 and 124?

  • Get the details for the snapshot in the 'Checkout-Flow' project to see why it failed.

  • Claude
  • ChatGPT
  • Cursor
  • VS Code
  • Windsurf
  • Claude Code
  • JetBrains
  • Cline

Start here

Connect Percy once, then ask.

Just link your Percy account via the Vinkius dashboard. Your credentials stay encrypted, and you can immediately start asking your agent about your UI snapshots.

Connect Percy to your AI

FAQ

How this task behaves.

  • 01

    Can the AI fix the CSS code for me?

    No. The AI can only read and report on the visual differences it finds in Percy. You must manually apply the code fixes in your IDE.

  • 02

    Can the AI approve snapshots in Percy?

    No. The agent can only retrieve data and comparison details. The decision to approve or reject a snapshot remains with you.

  • 03

    How does the AI know which pixels changed?

    The agent uses the comparison data provided by Percy to identify the exact percentage and location of the visual delta.

  • 04

    Does the AI see my entire codebase?

    No. The AI only sees the visual snapshot data and comparison information that Percy provides through the MCP.

  • 05

    Can I ask about snapshots from a different project?

    Yes, as long as you specify the correct project name so the agent can find the right snapshots.

  • More questions about Percy? See everything the Percy Connector can do

Connect Percy to Claude, Cursor, ChatGPT & more