How to Use the Percy MCP in VS Code Copilot

Q: How do I list active Percy projects inside VS Code Copilot?

Ask VS Code Copilot to run listprojects to view all your visual testing suites. This gives your team instant access to project slugs and configurations.

Q: Can my team approve a Percy build from VS Code Copilot?

Yes. Your team can issue a command to run approvebuild within the Copilot chat, which marks the entire run as visually approved.

Q: How does VS Code Copilot retrieve Percy snapshot details?

Copilot calls getsnapshotdetails to extract the review state, widths, and comparison counts. This helps you identify which specific screen sizes failed.

Q: What tool shows the browser configurations for my tests?

The agent runs the listbrowsers MCP tool to display all supported browser families and OS versions. This helps you verify cross-browser layout consistency.

Track visual diffs and approve Percy builds directly inside VS Code Copilot to keep your team's CI pipeline green.

See Vinkius in Action

Works with every AI agent you already use

…and any MCP-compatible client

MCP Servers — Included with Plan

Connect Percy MCP to VS Code Copilot

Create your Vinkius account to connect Percy to VS Code Copilot — we handle the hosting, security, and runtime updates so you don't have to. No server setup required.

GDPR Included with Plan

Setup Percy with VS Code Copilot

Ask AI about this MCP

ChatGPT

Claude

Perplexity Vinkius runs on Gemini

Gemini

Grok

Run visual regression checks in VS Code Copilot

The `list_projects` tool fetches your BrowserStack project configurations directly into the Copilot chat panel. Your team can inspect project slugs and browser targets without switching windows. Copilot uses `get_project_details` to verify if auto-approve is active for your main branch. This ensures your team-wide configuration matches your deployment rules.

Debug visual regressions using this MCP Server

This Percy MCP Server lets VS Code Copilot run `get_build_details` to inspect the exact count of unreviewed snapshots in a broken CI run. You get instant feedback on which commit SHA triggered the visual failures. The agent calls `list_snapshots` to isolate the specific pages that failed the visual regression checks. This lets your team collaborate on UI fixes directly within the shared workspace.

Approve visual changes directly within VS Code Copilot

Accepting specific layout updates is straightforward with the `approve_snapshot` tool directly from the Copilot interface using this MCP tool. This updates the baseline for future visual regression runs instantly. When a major release modifies multiple UI components, `approve_build` marks the entire suite as green. This unblocks the deployment queue for the whole engineering team.

Setup guide

Set up Percy MCP in VS Code Copilot

Prerequisites

VS Code 1.99 or later with GitHub Copilot extension
Active Vinkius subscription with a valid endpoint token

1

Open MCP configuration

Open the Command Palette (Cmd+Shift+P / Ctrl+Shift+P) and run "MCP: Add Server". Select HTTP (Streamable) as the server type. VS Code will create .vscode/mcp.json in your workspace.
2

Add the Percy MCP

Paste the JSON snippet shown on the right into your .vscode/mcp.json. Replace [YOUR_TOKEN_HERE] with your endpoint token from cloud.vinkius.com.
3

Switch to Agent mode

Open Copilot Chat (Cmd+Shift+I / Ctrl+Shift+I) and switch to Agent mode using the dropdown. MCP tools are only available in Agent mode — they do not appear in Edit or Ask modes.
4

Verify the connection

In the Copilot Chat input, type # to list available tools. You should see the Percy tools listed. Try asking: "List my recent Percy transactions" and Copilot will invoke them automatically.

.vscode/mcp.json

{
  "mcpServers": {
    "percy-mcp": {
      "url": "https://edge.vinkius.com/[YOUR_TOKEN_HERE]/mcp"
    }
  }
}

Get your connection token →

Independent Platform Disclaimer: Vinkius is an independent platform and is not affiliated with, endorsed by, sponsored by, verified by, or otherwise authorized by Percy. All third-party trademarks, logos, and brand names are the property of their respective owners. Their use on this website is strictly for informational purposes to identify service compatibility and interoperability.

Why Choose Vinkius

Vinkius connects your tools to AI with real-time monitoring and automatic cost savings — all from one dashboard.

Connect Percy now

Real-time monitoring

Live

visibility into every interaction

Connect your favorite tools to your AI and see exactly what's happening — every request, every response, in real time.

Built-in savings

60%

lower AI costs

Vinkius compresses data between your apps and your AI automatically. Lower bills every month — no configuration required.

Single dashboard

One

place for every integration

Every tool your AI connects to, managed from a single screen. One account, complete control.

Common questions about Percy MCP in VS Code Copilot

Ask VS Code Copilot to run `list_projects` to view all your visual testing suites. This gives your team instant access to project slugs and configurations.

Yes. Your team can issue a command to run `approve_build` within the Copilot chat, which marks the entire run as visually approved.

Copilot calls `get_snapshot_details` to extract the review state, widths, and comparison counts. This helps you identify which specific screen sizes failed.

The agent runs the `list_browsers` MCP tool to display all supported browser families and OS versions. This helps you verify cross-browser layout consistency.

Vinkius isolates all requests inside an ephemeral, zero-trust MCP sandbox using a single token. Your build states and snapshot metadata are never stored or exposed to external networks.

Use it with your favorite AI tools

Connect this server to Cursor, Claude, VS Code, and more.

OpenAI Agents SDK sdk-python

Google ADK sdk-python

Pydantic AI sdk-python

Vercel AI SDK sdk-typescript