Build This Now
Build This Now
Keyboard ShortcutsStatus Line Guide
CLAUDE.md, Skills, Subagents, Hooks: When to Use WhichClaude Code Subagents: The 3 to 5 Agent Sweet SpotCLAUDE.md Best Practices: The File That Makes Claude Code ReliableHow to Fix Claude Code Running Out of Context
speedy_devvkoen_salo
Blog/Toolkit/MCP/Browser Automation MCP for Claude Code

Browser Automation MCP for Claude Code

Wire Playwright or Puppeteer into Claude Code over MCP and drive real browsers with plain-language prompts for scraping, QA, regression clicks, zero selectors.

Stop configuring. Start building.

SaaS builder templates with AI orchestration.

See what we build for companies →
speedy_devvWritten by speedy_devvPublished Jan 17, 2026Toolkit hubMCP index

Problem: Running regression clicks, scraping pages, and babysitting QA flows by hand burns a chunk of every workday. An MCP browser server hands all of that to Claude.

Quick Win: Drop the Puppeteer MCP server into your Claude Code config and your first automation is minutes away. Paste this into your settings file:

{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-puppeteer"]
    }
  }
}

Then say to Claude: "Open a browser, navigate to example.com, and take a screenshot". The browser, the navigation, and the screenshot all happen without another keystroke from you.

Old-school browser work means selector plumbing, state juggling, and fifty lines of code to fill one form. An MCP browser server flips that. You describe the outcome in words and Claude drives.

Instead of writing fifty lines of Puppeteer, say: "Fill out this contact form with test data and submit it." That's the whole script.

Installing the Browser MCP Server

Puppeteer MCP Server Configuration

The Puppeteer config lives in your MCP file. Use ~/.claude.json on the CLI or claude_desktop_config.json for Desktop:

{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-puppeteer"]
    }
  }
}

Save, restart Claude Code, and the server registers. To check, ask Claude to launch a browser and open any URL.

Playwright MCP Server Setup

Playwright gives you Chrome, Firefox, and Safari in one package, which is why teams pick it for real test suites. First install @modelcontextprotocol/server-playwright:

npm install -g @modelcontextprotocol/server-playwright

Then register it in your MCP config:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-playwright"]
    }
  }
}

Alternative Playwright MCP: A community build at @executeautomation/playwright-mcp-server offers the same basic surface:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@executeautomation/playwright-mcp-server"]
    }
  }
}

Cross-browser coverage is the reason most full test suites end up on Playwright MCP for serious automation with Claude Code.

What You Can Ask It To Do

Web Scraping Made Simple

Ask for scraped data in plain English. A request like "Open example.com, find all product listings, and extract the titles and prices into a CSV file" gets the full pipeline: browser launch, element lookup, data pull, CSV write.

Form Testing Automation

Try this one: "Open my local development site at localhost:3000, fill out the signup form with test data, submit it, and verify the success message appears". One sentence replaces the whole manual QA loop. Claude visits the URL, invents plausible inputs, fills every field, and checks the success state.

Visual Regression Testing

A snapshot run across three breakpoints sounds like: "Take screenshots of my homepage at different screen sizes (mobile, tablet, desktop) and save them to ./screenshots/".

Multi-Step User Journeys

Bigger flows work too. Try: "Simulate a complete e-commerce purchase flow: browse products, add to cart, go through checkout with test details, and verify the order confirmation page".

Authentication Flows

Login states are a one-liner: "Log into my staging environment, navigate to the admin dashboard, and verify all navigation links work correctly".

Performance Monitoring

Ask for timing too: "Open my app, measure page load times for the dashboard, and report any pages that take longer than 3 seconds to load".

Troubleshooting Browser Automation

Browser launch fails: Chrome or Chromium has to exist on the box. On Linux:

sudo apt-get install -y chromium-browser

Elements not found: Dynamic pages need a wait. Ask Claude: "Wait for the login button to be visible before clicking it."

Timeouts: Slow pages need more patience. Say: "Navigate to the page and wait up to 30 seconds for it to fully load."

Integration With Your Workflow

Browser automation slots straight into the rest of your dev loop:

  • Testing: Regression runs during the build
  • Debugging: Screenshots that prove the bug
  • Monitoring: Quiet polling of production pages
  • Development: Feature checks across every browser

Context Optimization with MCP Tool Search

These servers pair well with MCP Tool Search. Tool Search only pulls Playwright or Puppeteer definitions into context when the job actually needs a browser, which leaves your window free for everything else.

Work up from small pieces. Start with a screenshot request. Move to a form. Then build your way to full end-to-end user journeys as the natural-language flow starts to feel normal.

Continue in MCP

  • 50+ MCP Servers for Claude Code
    50+ Claude Code MCP servers, editor integrations, usage monitors, orchestrators, database connectors, browser drivers, and starter kits worth wiring in today.
  • How to Build an MCP Server for Claude Code
    A step-by-step tutorial: build a minimal MCP server in Node and TypeScript, expose one tool over stdio, and register it with Claude Code via claude mcp add and a project .mcp.json.
  • Claude for Creative Work Connectors
    Nine official Anthropic integrations now wire Claude into Blender, Adobe Creative Cloud, Autodesk Fusion, Ableton, Splice, Affinity, SketchUp, and Resolume.
  • Context7 MCP
    Add Context7 MCP to Claude Code so prompts fetch current library docs at query time, killing stale training-data guesses, invented APIs, and renamed functions.
  • Cursor MCP Servers
    Configure MCP servers in Cursor IDE. Where .cursor/mcp.json lives, the JSON format Cursor expects, and the first servers to add for search, git, and browser.
  • Build Your Own MCP Server for Claude Code
    Build a custom Claude Code MCP server in Node.js. Tool definitions, request handlers, REST and Postgres patterns, plus the config Claude Code needs to load it.

More from Toolkit

  • CLAUDE.md, Skills, Subagents, Hooks: When to Use Which
    Claude Code skills vs subagents vs hooks vs CLAUDE.md: a plain mental model for picking the right primitive, with token costs and examples.
  • Claude Code Subagents: The 3 to 5 Agent Sweet Spot
    Claude code subagents work best at 3-5 concurrent agents. Here is why that ceiling exists, how to set them up, and what to use past it.
  • CLAUDE.md Best Practices: The File That Makes Claude Code Reliable
    CLAUDE.md best practices: keep it under 200 lines, write it by hand, and use hooks when you need real enforcement, not advice.
  • How to Fix Claude Code Running Out of Context
    Claude Code running out of context is a session design problem. Fix it with /compact, lean CLAUDE.md, skills, and subagents, not a bigger window.

Stop configuring. Start building.

SaaS builder templates with AI orchestration.

See what we build for companies →

On this page

Installing the Browser MCP Server
Puppeteer MCP Server Configuration
Playwright MCP Server Setup
What You Can Ask It To Do
Web Scraping Made Simple
Form Testing Automation
Visual Regression Testing
Multi-Step User Journeys
Authentication Flows
Performance Monitoring
Troubleshooting Browser Automation
Integration With Your Workflow
Context Optimization with MCP Tool Search

Stop configuring. Start building.

SaaS builder templates with AI orchestration.

See what we build for companies →