You can now automate your browser from inside Cursor or Windsurf....
Prajwal Tomar@PrajwalTomar_
59 views
Apr 15, 2025
~3 min read
Advertisement
1
You can now automate your browser from inside Cursor or Windsurf.
No more copy-pasting logs or screenshots.
I recorded a full video showing how to set up Browser MCP and use it to debug like a pro.
Watch it here ↓
No more copy-pasting logs or screenshots.
I recorded a full video showing how to set up Browser MCP and use it to debug like a pro.
Watch it here ↓
0:44
2
📺 Watch the full step-by-step video here:
youtube.com/watch?v=fNLdaL…
youtube.com/watch?v=fNLdaL…
3
1/ The old way of debugging was painful
You run your dev server.
You test a new feature.
You open the browser…
White screen. Nothing works.
So you:
- Screenshot the bug
- Copy console logs
- Paste all of it inside Cursor or Windsurf
- Ask AI to help
It works, but it’s slow and manual.
You run your dev server.
You test a new feature.
You open the browser…
White screen. Nothing works.
So you:
- Screenshot the bug
- Copy console logs
- Paste all of it inside Cursor or Windsurf
- Ask AI to help
It works, but it’s slow and manual.
4
2/ Browser MCP fixes this
Browser MCP is a new agent that lets Cursor or Windsurf:
- Interact with your live browser
- Grab screenshots and logs automatically
- Help you debug without switching tabs
It’s like giving AI eyes inside your app.
Browser MCP is a new agent that lets Cursor or Windsurf:
- Interact with your live browser
- Grab screenshots and logs automatically
- Help you debug without switching tabs
It’s like giving AI eyes inside your app.
5
3/ How to set it up inside Windsurf (takes 2 minutes)
Step 1: Install the extension
Go to the Chrome Web Store and search for Browser MCP
Or just click this link ↓
chromewebstore.google.com/detail/browser…
Add it to Chrome.
Step 1: Install the extension
Go to the Chrome Web Store and search for Browser MCP
Or just click this link ↓
chromewebstore.google.com/detail/browser…
Add it to Chrome.
6
Step 2: Configure MCP in Windsurf
- Open the Browser MCP documentation
- Find the Windsurf setup section
- Copy the JSON config
- In your project folder, open a file called mcp.json
- Paste the config there and save
- Open the Browser MCP documentation
- Find the Windsurf setup section
- Copy the JSON config
- In your project folder, open a file called mcp.json
- Paste the config there and save
7
Step 3: Start and enable MCP
- Run your local dev server (npm run dev, etc.)
- Click the Browser MCP extension icon in Chrome
- Toggle it ON
That’s it. Windsurf is now connected to your browser.
You can start using prompts like:
“Use browser MCP to grab the current screen and debug errors”
- Run your local dev server (npm run dev, etc.)
- Click the Browser MCP extension icon in Chrome
- Toggle it ON
That’s it. Windsurf is now connected to your browser.
You can start using prompts like:
“Use browser MCP to grab the current screen and debug errors”
8
4/ Use case #1: Debug broken screens
Instead of copy-pasting logs, you just say:
“Use browser MCP to screenshot the current page and collect all logs. Help debug the issue.”
Windsurf (or Cursor) will:
- Open your browser
- Grab the logs
- Take a screenshot
- Start debugging instantly
No friction. No wasted prompts. Full context.
Instead of copy-pasting logs, you just say:
“Use browser MCP to screenshot the current page and collect all logs. Help debug the issue.”
Windsurf (or Cursor) will:
- Open your browser
- Grab the logs
- Take a screenshot
- Start debugging instantly
No friction. No wasted prompts. Full context.
9
5/ Use case #2: Login automation
You can even automate login flows.
Example prompt:
“Use Browser MCP to open the app and log in using test credentials”
Cursor will input, click, and navigate just like a user.
Perfect for testing user flows and onboarding UX.
You can even automate login flows.
Example prompt:
“Use Browser MCP to open the app and log in using test credentials”
Cursor will input, click, and navigate just like a user.
Perfect for testing user flows and onboarding UX.
10
6/ Why this matters
For vibe coders or non-technical users, debugging is often the most overwhelming part.
Browser MCP solves that:
- No need to open DevTools
- No need to understand console output
- Just tell Windsurf what’s wrong, it handles the rest
For vibe coders or non-technical users, debugging is often the most overwhelming part.
Browser MCP solves that:
- No need to open DevTools
- No need to understand console output
- Just tell Windsurf what’s wrong, it handles the rest
11
7/ Save money on AI prompts
Many developers waste $ on prompting AI with no context.
Instead of vague prompts like “FIX THIS,”
Use Browser MCP to give Cursor the full environment.
Better context → Faster fixes → Fewer retries
Many developers waste $ on prompting AI with no context.
Instead of vague prompts like “FIX THIS,”
Use Browser MCP to give Cursor the full environment.
Better context → Faster fixes → Fewer retries
12
8/ Wrap-up: What you need to get started
- Cursor or Windsurf
- Browser MCP extension
- mcp.json with your server config
Once connected, you can:
- Navigate your app
- Gather errors
- Debug in seconds
- Cursor or Windsurf
- Browser MCP extension
- mcp.json with your server config
Once connected, you can:
- Navigate your app
- Gather errors
- Debug in seconds
13
9/ Final takeaway
Vibe coding isn’t just about code generation.
It’s about removing every blocker between “something’s broken” and “it’s fixed.”
Browser MCP helps you:
- Debug better
- Ship faster
- Save mental energy
Bookmark this and try it next time.
Vibe coding isn’t just about code generation.
It’s about removing every blocker between “something’s broken” and “it’s fixed.”
Browser MCP helps you:
- Debug better
- Ship faster
- Save mental energy
Bookmark this and try it next time.