How to Use the Percy MCP in Windsurf
Stop guessing if your UI broke. Let Windsurf and this MCP Server handle visual regressions automatically.
Works with every AI agent you already use
…and any MCP-compatible client
Connect Percy MCP to Windsurf
Create your Vinkius account to connect Percy to Windsurf — we handle the hosting, security, and runtime updates so you don't have to. No server setup required.
Gemini
Key Capabilities
Automate snapshot approvals in Windsurf
Cascade can now handle the grunt work of reviewing UI changes. Instead of manually clicking through the dashboard, you use `approve_build` or `approve_snapshot` to clear the queue once you verify the diffs. Your agent inspects the state of your UI directly from the source. It flags regressions in real-time, letting you ship code without worrying about hidden styling bugs.
Cross-browser analysis for Windsurf
Use `list_browsers` to see exactly which environments your tests cover. If a specific component looks off on mobile or different browsers, Cascade pulls the `list_comparisons` data to show you the exact pixel delta. You get a clear view of your visual footprint without leaving the editor. No more tab-switching to check if your latest commit broke the navigation bar.
Monitor build health inside Windsurf
Keep your project status front and center. By querying `get_build_details` and `list_builds`, Windsurf tracks your CI progress from the moment your pipeline triggers. This MCP Server provides the raw data needed to keep your team moving. If a build fails, you know the exact commit and snapshot count immediately.
Set up Percy MCP in Windsurf
Prerequisites
- Windsurf IDE installed (macOS, Windows, or Linux)
- Active Vinkius subscription with a valid endpoint token
- 1
Open MCP configuration
Click the Cascade assistant icon in the sidebar, then click the hammer icon (🔨) at the top of the panel. Select "Configure" to open
~/.codeium/windsurf/mcp_config.json. - 2
Add the Percy MCP
Paste the JSON snippet shown on the right into the
mcpServersobject. Replace[YOUR_TOKEN_HERE]with your endpoint token from cloud.vinkius.com. - 3
Refresh MCPs
Go back to the hammer icon (🔨) in Cascade and click "Refresh". Windsurf will detect the new server. No full restart is needed — the connection is hot-reloaded.
- 4
Verify in Cascade
Start a new Cascade conversation and ask something like "Show my Percy payment history." If connected, Cascade will call the Percy tools directly. You will see a green dot next to the server name in the MCP panel.
{
"mcpServers": {
"percy-mcp": {
"url": "https://edge.vinkius.com/[YOUR_TOKEN_HERE]/mcp"
}
}
}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.
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 Windsurf
Use it with your favorite AI tools
Connect this server to Cursor, Claude, VS Code, and more.
Start using the Percy MCP today
We host it, we monitor it, we maintain it. You just paste one token.