🌐
Substack
sylverstudios.substack.com › p › how-claude-code-and-mcp-helped-me
How Claude Code and MCP Helped Me Build a Custom Phoenix 404 Page
July 8, 2025 - Enter Puppeteer. With a Puppeteer MCP, Claude Code can drive the browser. The agent can navigate, interact, and take screenshots without requiring my intervention. What’s significant here is that there's now one fewer step where I am the ...
🌐
Reddit
reddit.com › r/claudeai › setting up mcp servers in claude code: a tech ritual for the quietly desperate
r/ClaudeAI on Reddit: Setting Up MCP Servers in Claude Code: A Tech Ritual for the Quietly Desperate
March 19, 2025 -

After much trial and error I finally got functioning MCP servers in Claude Code albeit with slightly less will to live.

What are MCP Servers?

They're digital prosthetics that give Claude arms and legs to crawl around your computer with. Less poetically: extensions that let it do stuff beyond generating code you'll never actually use.

The Tools (★ = Requires API Key)

  • Sequential Thinking: Helps Claude solve problems step‑by‑step

  • Filesystem: Lets Claude rummage through the folders you allow

  • Playwright: Modern multi‑browser automation

  • Puppeteer: Chrome‑only (deprecated)

  • Web Fetching: Grabs content from websites

  • Browser Tools (Chrome DevTools Integration): Capture and analyze browser data through a Chrome extension

  • ★ Brave Search: Web searching capabilities

  • ★ Firecrawl: Advanced web scraping


🏃‍♂️ One‑Command Installation (The "I Don't Have Time For This" Version)

Copy everything in the block, paste into a macOS/Linux terminal, and hit ↵.

bash <<'EOF'
echo "🔧  Installing Claude MCP servers (latest versions)…"

# Sequential Thinking — Claude's chain‑of‑thought engine
claude mcp add sequential-thinking -s user \
  -- npx -y @modelcontextprotocol/server-sequential-thinking || true

# Filesystem — give Claude access to local folders
claude mcp add filesystem -s user \
  -- npx -y @modelcontextprotocol/server-filesystem \
     ~/Documents ~/Desktop ~/Downloads ~/Projects || true

# Playwright — modern multi‑browser automation
claude mcp add playwright -s user \
  -- npx -y @playwright/mcp-server || true

# Puppeteer — Chrome‑only (deprecated but still works)
claude mcp add puppeteer -s user \
  -- npx -y @modelcontextprotocol/server-puppeteer || true

# Fetch — simple HTTP GET/POST
claude mcp add fetch -s user \
  -- npx -y @kazuph/mcp-fetch || true

# Browser‑Tools — DevTools logs, screenshots, etc.
claude mcp add browser-tools -s user \
  -- npx -y @agentdeskai/browser-tools-mcp || true

echo "--------------------------------------------------"
echo "✅  MCP registration finished."
echo ""
echo "🔴  To enable Browser‑Tools, run this in a *second* terminal and leave it open:"
echo "    npx -y @agentdeskai/browser-tools-server"
echo "--------------------------------------------------"
claude mcp list
EOF

Save this as install-mcp-servers.sh, make it executable (chmod +x install-mcp-servers.sh), and run it while questioning your life choices.

Windows users: you'll need a .bat file instead. Good luck with that!

# Essential MCP Servers (Individual Installation)

Sequential Thinking

claude mcp add sequential-thinking -s user \
  -- npx -y @modelcontextprotocol/server-sequential-thinking

Lets Claude actually think through problems instead of making things up with confidence.

Filesystem Access (update paths as desired)

claude mcp add filesystem -s user \
  -- npx -y @modelcontextprotocol/server-filesystem \
     ~/Documents ~/Desktop ~/Downloads ~/Projects

Give Claude access to your files.

Playwright (multi‑browser automation)

claude mcp add playwright -s user \
  -- npx -y @playwright/mcp

Puppeteer (deprecated but still works)

claude mcp add puppeteer -s user \
  -- npx -y @modelcontextprotocol/server-puppeteer

Watch in existential dread as your browser operates itself.

Web Fetching

claude mcp add fetch -s user \
  -- npx -y @kazuph/mcp-fetch

Grabs content from websites.

Browser Tools

Gives Claude access to your browser's console logs, network traffic, and the ability to run performance/accessibility audits.

Step 1: Install the Chrome extension – download from the releases page and load it via Chrome’s extension manager. Step 2: Start the middleware server (keep this terminal open)

npx -y @agentdeskai/[email protected]

Step 3: Add the MCP server to Claude Code (in a separate terminal)

claude mcp add browser-tools -s user \
  -- npx -y @agentdeskai/[email protected]

Step 4: Open Chrome DevTools (F12) and find the BrowserTools tab.

★ Brave Search (Requires API Key)

# Replace YOUR_API_KEY_HERE with your actual Brave Search API key
claude mcp add brave-search -s user \
  -- env BRAVE_API_KEY=YOUR_API_KEY_HERE \
     npx -y @modelcontextprotocol/server-brave-search

Let Claude search the web and bring back results.

★ Firecrawl (Advanced Web Scraping — Requires API Key)

# Replace fc-YOUR_API_KEY with your actual Firecrawl API key
claude mcp add firecrawl -s user \
  -- env FIRECRAWL_API_KEY=fc-YOUR_API_KEY \
     npx -y firecrawl-mcp

For when you need to scrape websites with industrial‑grade efficiency and minimal respect for robots.txt.


# The -s user vs -s local Thing

  • -s user: Makes these tools available globally

  • -s local: Only works in your current directory

# Troubleshooting

  • Windows issues: prepend cmd /c before npx commands

  • Timeout errors: MCP_TIMEOUT=10000 claude

  • Connection problems: Type /mcp in Claude Code to see which servers are napping

  • Filesystem access: Double‑check your paths

That's it. Save yourself the four hours of my life I'll never get back.

PS – Yes, this was written mostly with the help of Claude.

EDIT: Apparently there were some stupid Reddit formatting issues. It converted the "@" to "u/", I'm such a noob, sorry! I updated the script to include playwright which is a pretty good alternative to puppeteer. Thanks all for pointing out my numerous flaws.

Discussions

Quick tutorial on setting up Claude Desktop with Puppeteer MCP Server for web browsing
Cool, question. Can you use it to login to accounts and interact with Elements? More on reddit.com
🌐 r/ClaudeAI
6
16
December 10, 2024
Claude MCP - filesystem, puppeteer and context7 - full footgun development
What does it do more / better than Roo? More on reddit.com
🌐 r/ClaudeAI
8
14
January 10, 2025
Tell me your workflow to allow Claude Code to view your browser (e.g. localhost:3000). Bonus points if relevant to VSCode running WSL Ubuntu on a PC. I'm losing brain cells by taking screenshots of my UI and prompting Claude Code to look at them...
Just add puppeteer or playwright MCP servers to your Claude config. It’s a few lines of JSON and your problem is sorted I had Claude test both tools and it preferred playwright due to ability to snapshot DOM More on reddit.com
🌐 r/ClaudeAI
23
66
May 18, 2025
🌐
Medium
medium.com › surescale › tutorial-use-claude-desktop-mcp-puppeteer-to-automatically-extract-data-from-the-web-b5692dbdcd6e
Tutorial: Use Claude Desktop, MCP, Puppeteer to Automatically Extract Data From The Web | by Nick Watson | SureScale.ai | Medium
December 10, 2024 - In Claude Desktop, go to settings (In MacOS, Claude > Settings) and under “Developer” click “Edit Config” ... { "mcpServers": { "puppeteer": { "command": "npx", "args": ["-y", "@modelcontextprotocol/server-puppeteer"] } } }
🌐
Anthropic
anthropic.com › engineering › claude-code-best-practices
Claude Code: Best practices for agentic coding
Give Claude a way to take browser screenshots (e.g., with the Puppeteer MCP server, an iOS simulator MCP server, or manually copy / paste screenshots into Claude). Give Claude a visual mock by copying / pasting or drag-dropping an image, or giving Claude the image file path. Ask Claude to implement the design in code, take screenshots of the result, and iterate until its result matches the mock.
🌐
Claude MCP
claudemcp.com › servers › puppeteer
Puppeteer - Claude MCP Servers
Bridging the gap between Figma and MCP clients, enabling rapid design implementation through AI agents for seamless conversion from design to code.
🌐
Playbooks
playbooks.com › mcp › modelcontextprotocol-puppeteer
Puppeteer MCP server for AI agents - Playbooks
Find and install MCP servers for Claude Code, Codex CLI, Cursor, Factory, and other AI agents.
🌐
GitHub
github.com › merajmehrabi › puppeteer-mcp-server
merajmehrabi/puppeteer-mcp-server
{ "mcpServers": { "puppeteer": { "command": "node", "args": ["path/to/puppeteer-mcp-server/dist/index.js"], "env": { "NODE_OPTIONS": "--experimental-modules" } } } } Add the following to your Claude VSCode extension MCP settings file (located at %APPDATA%\Code\User\globalStorage\saoudrizwan.claude-dev\settings\cline_mcp_settings.json on Windows or ~/Library/Application Support/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json on macOS): { "mcpServers": { "puppeteer": { "command": "puppeteer-mcp-server", "args": [], "env": {} } } } { "mcpServers": { "puppeteer": {
Starred by 336 users
Forked by 50 users
Languages   TypeScript 94.7% | Dockerfile 4.6% | JavaScript 0.7%
🌐
YouTube
youtube.com › watch
This MCP Makes Claude Code INSANE - YouTube
Have a SaaS or Web App idea? Get it built today - https://calendar.app.google/9N6RQjjNgyn3BWABAHave a business and Need SEO? Talk to us today - https://calen...
Published   June 3, 2025
Find elsewhere
🌐
Alexop
alexop.dev › posts › how-i-use-claude-code-for-doing-seo-audits
How I Use Claude Code for Doing SEO Audits | alexop.dev
June 26, 2025 - Learn how to leverage Claude Code with Puppeteer MCP to perform comprehensive SEO audits in minutes, complete with automated analysis and actionable reports.
🌐
GitHub
github.com › jaenster › puppeteer-mcp-claude
jaenster/puppeteer-mcp-claude
A Model Context Protocol (MCP) server that provides Claude Code with comprehensive browser automation capabilities through Puppeteer - jaenster/puppeteer-mcp-claude
Author   jaenster
🌐
LobeHub
lobehub.com › mcp › jaenster-puppeteer-mcp-claude
MCP Puppeteer Server | MCP Servers · LobeHub
1 month ago - A Model Context Protocol (MCP) server that provides Claude Code with comprehensive browser automation capabilities through Puppeteer. Requires Node.js 16 or higher and Chrome/Chromium browser (automatically downloaded by Puppeteer).
🌐
ClaudeLog
claudelog.com › home › mcps & add-ons › puppeteer mcp
ClaudeLog - Claude Code Docs, Guides, Tutorials & Best Practices
November 11, 2025 - Puppeteer MCP: Web automation with AI vision for Claude Code through Model Context Protocol. Control Chrome, extract data, and automate web workflows.
🌐
Apidog
apidog.com › blog › top-10-mcp-servers-for-claude-code
Top 10 Essential MCP Servers for Claude Code (2025 Developer Version)
August 14, 2025 - Puppeteer MCP Server: Automate Web InteractionsWhy It’s EssentialSetup ProcessUse Case6. PostgreSQL MCP Server: Query Databases NaturallyWhy It’s EssentialSetup ProcessUse Case7. Notion MCP Server: Boost ProductivityWhy It’s EssentialSetup ProcessUse Case8. Memory Bank MCP Server: Retain ContextWhy It’s EssentialSetup ProcessUse Case9. Figma MCP Server: Design-to-Code WorkflowWhy It’s EssentialSetup ProcessUse Case10.
🌐
MCP World
mcpworld.com › en › detail › 6b6a06a79b1351020f04ae82f5086682
puppeteer-mcp-claude
July 8, 2025 - 收录最全的优质 MCP server 资源,涵盖效率工具、天气地理位置、内容生成等多种分类的 MCP 资源,满足您全方位需求。您可直接输入需求,平台会深度理解并且识别您多维度的意图,精准推荐 MCP 服务
🌐
Medium
medium.com › @alphaneker40 › setting-claude-code-with-puppeteer-mcp-browser-automation-for-ai-driven-development-0081280b7e5e
Setting Claude Code with Puppeteer MCP: Browser Automation for AI-Driven Development | by Alphan EKER | Oct, 2025 | Medium
October 23, 2025 - # Verify Node.js is installed (v18+ recommended) node --version # Verify Claude Code is installed claude --version # Ensure you have npm (comes with Node.js) npm --version · This is the simplest approach. no installation required, always uses latest version: # Add using npx (no pre-installation required) claude mcp add puppeteer -- npx -y @modelcontextprotocol/server-puppeteer
🌐
X
x.com › tylertringas › status › 1937218252545098101
Tyler Tringas on X: "it's literally as easy as asking Claude Code: "install the puppeteer mcp for me" restart Claude "make these changes, use puppeteer to confirm everything works correctly, if not, fix it"" / X
it's literally as easy as asking Claude Code: "install the puppeteer mcp for me" restart Claude "make these changes, use puppeteer to confirm everything works correctly, if not, fix it"
🌐
ClaudeLog
claudelog.com › addons › puppeteer-mcp
Puppeteer MCP - ClaudeLog
June 29, 2025 - Claude Code documentation, tutorials & best practices from real-world usage. Expert insights, optimization techniques, and searchable knowledge base.
🌐
Apidog
apidog.com › blog › puppeteer-mcp-server
How to Automate Web Browsing with Puppeteer MCP
October 23, 2025 - Pro Tip: Combine with Claude's reasoning to handle CAPTCHAs or consent dialogs intelligently. ... Example Use Case: Automatically document UI states for accessibility compliance reports. ... Security Note: Sandbox execution with --disable-setuid-sandbox flag for production. ... export PUPPETEER_HEADLESS=false # Visible browser export PUPPETEER_SLOWMO=250 # Slow-motion demo mode export PUPPETEER_TIMEOUT=60000 # Extended timeout ... Would you like to add more MCP Server's to Claude, Cursor or Windsurf?