IDE INTEGRATION · MCP WORKFLOWS
Cursor & Windsurf Browser Automation with Chrome MCP
Enable Cursor, Windsurf, Gemini, Qwen, and DeepSeek coding assistants to control your real signed-in Google Chrome browser with zero cloud credentials.
Quick Answer (TL;DR)
To connect Cursor or Windsurf to your live Chrome sessions, pair your profile via
npm i -g agent-webbridge && awb setup "Work", then add the stdio command npx -y agent-webbridge mcp to your IDE's MCP settings (.cursor/mcp.json). Cursor will immediately gain 13 browser tools to navigate, snapshot accessibility trees, click buttons, and inspect authenticated dev servers.
1. Configuring MCP in Cursor
Add the following block to your project's .cursor/mcp.json or your global Cursor MCP configuration:
{
"mcpServers": {
"chrome": {
"command": "npx",
"args": ["-y", "agent-webbridge", "mcp"]
}
}
}
Once saved, Cursor's Composer and Chat agents automatically list the 13 browser_* tools under active tools.
2. Configuring MCP in Windsurf (Cascade)
In Windsurf, open Cascade Settings → MCP Servers (or edit ~/.codeium/windsurf/mcp_config.json) and paste:
{
"mcpServers": {
"chrome": {
"command": "npx",
"args": ["-y", "agent-webbridge", "mcp"]
}
}
}
3. Recommended .cursorrules for Browser Tasks
To ensure Cursor uses browser tools efficiently without wasting tokens on raw HTML or heavy screenshots, add these rules to .cursorrules:
# Browser Automation Rules (WebBridge)
- When reading or inspecting web pages, ALWAYS use `browser_snapshot` first to get the semantic accessibility tree with @e element references.
- DO NOT request raw HTML via `browser_evaluate` unless specifically inspecting head tags or shadow DOM.
- When taking screenshots, ALWAYS provide a file path to `browser_screenshot` (e.g. `/tmp/preview.png`) to keep base64 images out of the context window.
- When automating multiple tabs, pass `tabId` to run operations in parallel.
4. Real-World AI IDE Workflows
- Live Localhost Debugging: Ask Cursor: "Open localhost:3000, trigger the error state in the checkout flow, snapshot the DOM, and fix the React component in our workspace."
- API Documentation Verification: Ask Windsurf: "Open the Stripe API docs in Chrome, verify the parameter types for idempotency keys, and update our TypeScript definition."
- Authenticated Cloud Console Inspection: Ask Claude or Qwen: "Open my Vercel deployments page, check the build logs for the latest preview branch, and summarize the build error."
Frequently Asked Questions
In Cursor, open Settings → Features → MCP Servers (or edit
.cursor/mcp.json in your workspace root) and add an stdio server named 'chrome' with command 'npx' and args ["-y", "agent-webbridge", "mcp"].
Yes. Because WebBridge runs inside your real Chrome browser, Cursor can inspect localhost dev servers (localhost:3000, localhost:5173), read console errors via evaluate, and interact with authenticated SaaS dashboards without re-authenticating.
Yes. Any AI agent supporting the Model Context Protocol (MCP) or capable of making local HTTP REST calls to
127.0.0.1:10086/command can control WebBridge across Claude, Gemini, Qwen, DeepSeek, and OpenAI models.
Add a rule to your
.cursorrules file: "When browsing web pages, use browser_snapshot to extract the accessibility tree with @e refs rather than capturing raw HTML or screenshots." This minimizes context usage while providing stable element selectors.