# Percy MCP for AI Agents AI Agent Connect > Percy MCP lets you handle visual regression testing through your AI client. It lets you check snapshots, approve builds, and monitor UI diffs across different browsers without leaving your chat interface. It connects directly to your Percy project to manage the heavy lifting of visual QA. ## Overview - **Category:** ship-it - **Price:** Free - **Endpoint:** https://edge.vinkius.com/vk_preview_6LH0zsvN8J0nY7uPYJ5ybHRW80VU7JdDwEgote5I/ai-agent-connect - **Tags:** visual-regression, ui-testing, automated-testing, quality-assurance, snapshot-testing, ci-cd-integration ## Description Percy lets you handle visual regression testing through your AI client. Instead of clicking through the BrowserStack dashboard to see why a button shifted three pixels to the left, you can just ask your AI client to find the latest failed visual tests. This Connector puts your Percy project data right in front of your agent. It removes the friction of jumping between your IDE and a separate testing dashboard. You can have it pull build statuses, identify which snapshots are still unreviewed, and even push through approvals for entire test suites. It's about making visual QA a conversation rather than a chore. When you find a legitimate UI change, you can tell your agent to mark it as the new baseline. If a build fails, the agent can grab the specific diff percentages and tell you exactly which browser configuration is acting up. It's a lot easier to manage high-volume deployments when your agent handles the repetitive task of checking build limits and snapshot states. By using this through the Vinkius catalog, you get a direct line to your visual testing pipeline without needing to manually manage complex API requests or navigate dense UI tables. ## Tools ### list_snapshots The list_snapshots tool shows snapshots within a specific Percy build. It returns names, review states, and diff percentages. ### list_projects The list_projects tool lists all projects on Percy. It provides the names, slugs, and browser configurations for your projects. ### get_project_details Use get_project_details to see the specific details of a Percy project. This includes the default branch and auto-approve settings. ### list_builds Use list_builds to see all builds for a Percy project. It shows you the IDs, states, branch names, and how many snapshots are in each run. ### get_build_details Use get_build_details to see the full status of a specific Percy build. You get info on approved snapshots, branch names, and timestamps. ### approve_build The approve_build tool marks an entire Percy build as visually approved. This moves your test suite to green for deployment. ### get_snapshot_details Use get_snapshot_details to see the full details of a single Percy snapshot. This includes the fingerprint, widths, and comparison counts. ### approve_snapshot The approve_snapshot tool marks a single Percy snapshot as visually correct. It updates the baseline for future comparisons. ### list_comparisons The list_comparisons tool shows visual diffs for a Percy snapshot. It returns the differences between the baseline and the head. ### list_browsers The list_browsers tool lists all supported browser families on Percy. This helps you check available browser and OS combinations. ## Prompt Examples **Prompt:** ``` Show me the status of the latest builds for my 'marketing-site' project. ``` **Response:** ``` Here are the recent builds for the **marketing-site** project: | Build ID | State | Branch | Snapshots | | :--- | :--- | :--- | :--- | | 9091x | Unreviewed | main | 42 | | 8842z | Finished | feature/header | 12 | | 8733a | Failed | main | 5 | The latest build (**9091x**) is currently waiting for review. ``` **Prompt:** ``` Which snapshots in the last build have the highest visual differences? ``` **Response:** ``` I've checked the latest build and found the following snapshots with significant visual regressions: * **Header_Mobile**: 8.4% diff * **Footer_Desktop**: 5.2% diff * **Login_Button**: 3.1% diff The **Header_Mobile** snapshot shows the largest discrepancy. Would you like me to pull more details on that one? ``` **Prompt:** ``` Approve all the snapshots in build 8910 so we can deploy. ``` **Response:** ``` I have successfully updated the status for **Build 8910**. * **Action**: Approved all unreviewed snapshots. * **Status**: The build is now marked as visually approved. * **Result**: Your test suite is ready for deployment. Let me know if you need anything else! ``` ## Capabilities ### Pull build statuses Get a list of recent builds with their current processing state and branch names. ### Approve visual baselines Mark entire builds or specific snapshots as approved to update your test baseline. ### Inspect snapshot diffs View specific rendering differences and diff percentages for page components. ### Manage Percy projects List and retrieve details for different projects, including browser configurations. ### Monitor browser support See which browser families and OS combinations are available for your tests. ## Use Cases ### Finding a mobile header bug A frontend dev pushed a change that broke the header on mobile. They ask the agent to list snapshots for the latest build and find the one with the highest diff percentage. ### Checking nightly build status A QA lead needs to know the status of the nightly build. They ask the agent to get the build details for the main branch to see how many snapshots are still unreviewed. ### Updating the production baseline A team just finished a UI overhaul and needs to set a new baseline. The dev tells the agent to approve the build for the production project to update the visual standards. ### Auditing browser coverage A DevOps person needs to audit browser coverage. They ask the agent to list the supported browsers to confirm which OS combinations are active. ## Benefits - Stop manual dashboard digging by using list_builds to quickly see which tests failed. - Speed up deployment cycles by using approve_build to mark entire suites as correct. - Get precise data on UI bugs by using list_comparisons to see exact diff percentages. - Keep your project organized by using list_projects to see all your active QA targets. - Save time on repetitive tasks by using approve_snapshot to update baselines via chat. ## How It Works The bottom line is you can manage your entire visual regression pipeline through simple text commands. 1. Add your Percy Project Token to your environment variables or local configuration. 2. Connect the Connector to your preferred AI client like Claude or Cursor. 3. Ask your agent to list builds, check snapshot statuses, or approve visual changes. ## Frequently Asked Questions **How does Percy MCP help with UI testing?** Percy MCP connects your visual regression testing to your AI client. It lets you query build statuses and snapshot diffs using plain text, so you can identify UI bugs without leaving your chat interface. **Can I use Percy MCP to approve snapshots quickly?** Yes. You can ask your agent to approve an entire build or specific snapshots. This updates your visual baseline instantly and helps you clear your test queue faster. **Does Percy MCP work with my existing CI pipeline?** Percy MCP works alongside your existing pipeline by interacting with the Percy API. It allows your agent to check the results of the tests your CI just finished running. **How do I see the diff percentages for my web app?** You can ask your agent to list comparisons for a specific snapshot. It will return the exact diff percentages and details for different browser configurations. **Can Percy MCP manage multiple projects at once?** Yes. You can use it to list and retrieve details for all projects on Percy. This makes it easy to monitor multiple web apps or products in one conversation. **What happens when I approve a build in Percy MCP?** When you approve a build, the Connector updates the visual baseline in Percy. This marks the current UI as correct, so future tests will compare against this new version. **How can Percy MCP help me find UI bugs faster?** It helps you skip the manual work of looking at every screenshot. Your agent can filter for the highest diff percentages, so you only spend time on the most significant regressions. **Can the AI automatically approve an entire Percy build limit safely via constraints natively?** Absolutely strictly explicitly natively. The integration encapsulates the `approve_build` action dynamically structurally executing the final endpoint verification marking bounds explicitly matching visual approvals effortlessly saving limits. **How explicitly strict are the parameter bounds when extracting image comparisons logistically?** Invoking Explicit bounding via `list_comparisons` tracks native image differences safely cleanly bounding metrics returning explicit difference percentages mapping base width loops directly over testing node grids explicitly gracefully natively. **Where structurally globally do I find my Explicit Percy integration token accurately gracefully?** Navigate explicit bounds inside your native Percy workspace parameters explicitly mapping 'Project Settings > Integrations/Tokens'. Globally limit testing node arrays explicitly generating Token strings seamlessly securely correctly internally securely elegantly here.