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 ↓

📺 Watch the full step-by-step video here:

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.

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.

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 ↓ Add it to Chrome.

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

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”

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.

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.

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

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

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

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.

Um playwright mcp?

Would it work with chrome extensions?

@threadreaderapp unroll

Looking interesting… will check for sure

I was using Browser Tools MCP but this takes that concept to another level. Adding the ability to fill forms and click through is definitely a step up

Bro this is dope!

💯

@threadreaderapp unroll

thats great.

Amazing. Three months ago, I built a frontend with React. It would be much easier with this now. 😅

Nice one. Was looking forward to this!

amazing, thanks a lot! it works - will test extensively!

@threadreaderapp unroll

Stop wasting time reading 50 page documents. This AI tool is like ChatGPT for reading faster. Just upload any PDF and ask a question. It will give you an answer with page citations in seconds. Try it for free.