Puppeteer MCP Server

Overview

The Puppeteer MCP Server allows AI agents to interact with the web by controlling a headless Chrome browser. It transforms the browser into a tool that the agent can use to navigate websites, click buttons, fill forms, take screenshots, and extract data from dynamically rendered pages.

This is particularly powerful for agents that need to perform tasks on websites that require JavaScript execution, authentication, or complex user interactions that simple HTTP requests cannot handle.

Features

• Dynamic Page Interaction: Full control over Chrome via Puppeteer, allowing interactions with Single Page Applications (SPAs) and complex JS-heavy sites.
• Visual Feedback: Ability to take screenshots of the page or specific elements, allowing multimodal agents to "see" what they are doing.
• Precise Navigation: Support for clicking, typing, scrolling, and hovering on elements using CSS selectors.
• Content Extraction: Extract rendered HTML or text from the page after JavaScript has executed.
• Session Management: Maintain browser sessions and cookies for interacting with authenticated sites.

Installation

# Run via npx (recommended for MCP)
npx -y @modelcontextprotocol/server-puppeteer

Configuration

To use the Puppeteer MCP server, add it to your claude_desktop_config.json:

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

Available Tools

Tool	Description
puppeteer_navigate	Navigates the browser to a specific URL.
puppeteer_click	Clicks on an element specified by a CSS selector.
puppeteer_fill	Fills an input field with a specified value.
puppeteer_screenshot	Takes a screenshot of the current page or a specific element.
puppeteer_evaluate	Executes custom JavaScript within the browser context.

Usage Examples

Automating a Login Flow

The agent can use puppeteer_navigate to go to the login page, puppeteer_fill to enter credentials, and puppeteer_click to submit the form.

Extracting Data from a React App

The agent can navigate to a dashboard, wait for the JS to render the data table, and then use puppeteer_evaluate or puppeteer_screenshot to capture the information.

Pros

• ✅ Complete Web Access: Can interact with any website, regardless of how it's built.
• ✅ Multimodal Ready: Screenshots provide critical visual context for advanced models.
• ✅ Powerful Automation: Capable of handling complex sequences of user actions.

Cons

• ❌ Resource Intensive: Running a headless browser consumes more CPU and RAM than simple API calls.
• ❌ Fragility: Changes in website CSS selectors can break automation scripts.
• ❌ Slower Execution: Navigation and rendering take more time than direct HTTP requests.

Resources

• MCP Official Servers: https://github.com/modelcontextprotocol/servers
• Puppeteer Documentation: https://pptr.dev/