Puppeteer Browser Automation MCP Server

Browser AutomationTypeScript

Browser automation tool that enables web interaction, screenshots, and JavaScript execution

Available Tools

puppeteer_navigate

Navigate to any URL in the browser

urllaunchOptionsallowDangerous

puppeteer_screenshot

Capture screenshots of the entire page or specific elements

nameselectorwidthheightencoded

puppeteer_click

Click elements on the page

selector

puppeteer_hover

Hover elements on the page

selector

puppeteer_fill

Fill out input fields

selectorvalue

puppeteer_select

Select an element with SELECT tag

selectorvalue

puppeteer_evaluate

Execute JavaScript in the browser console

script

Puppeteer Browser Automation provides a powerful interface for LLMs to interact with web pages in a real browser environment. It enables navigation to websites, capturing screenshots, clicking elements, filling forms, and executing JavaScript code directly in the browser. This MCP server leverages Puppeteer, a Node.js library that provides a high-level API to control Chrome or Chromium, allowing for comprehensive browser automation capabilities. With this tool, AI assistants can perform complex web-based tasks, test websites, extract information, and interact with web applications.

Overview

Puppeteer Browser Automation is a Model Context Protocol server that provides browser automation capabilities. It allows AI assistants to interact with web pages, take screenshots, and execute JavaScript in a real browser environment.

Security Considerations

Important: This server can access local files and local/internal IP addresses since it runs a browser on your machine. Exercise caution when using this MCP server to ensure it doesn't expose any sensitive data.

Installation Options

You can install the Puppeteer Browser Automation server using either NPX or Docker.

NPX Installation (Opens a browser window)

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

Docker Installation (Uses headless Chromium)

{
  "mcpServers": {
    "puppeteer": {
      "command": "docker",
      "args": [
        "run",
        "-i",
        "--rm",
        "--init",
        "-e",
        "DOCKER_CONTAINER=true",
        "mcp/puppeteer"
      ]
    }
  }
}

Customizing Browser Behavior

You can customize Puppeteer's browser behavior in two ways:

1. Using Environment Variables

Set PUPPETEER_LAUNCH_OPTIONS with a JSON-encoded string in the MCP configuration's env parameter:

{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-puppeteer"],
      "env": {
        "PUPPETEER_LAUNCH_OPTIONS": "{ \"headless\": false, \"executablePath\": \"C:/Program Files/Google/Chrome/Application/chrome.exe\", \"args\": [] }",
        "ALLOW_DANGEROUS": "true"
      }
    }
  }
}

2. Using Tool Call Arguments

Pass launchOptions and allowDangerous parameters to the puppeteer_navigate tool:

{
  "url": "https://example.com",
  "launchOptions": {
    "headless": false,
    "defaultViewport": { "width": 1280, "height": 720 }
  }
}

Available Resources

The server provides access to two types of resources:

Console Logs (console://logs)
- Browser console output in text format
- Includes all console messages from the browser
Screenshots (screenshot://<name>)
- PNG images of captured screenshots
- Accessible via the screenshot name specified during capture

VS Code Integration

For VS Code users, you can add the following to your User Settings (JSON) file by pressing Ctrl + Shift + P and typing Preferences: Open User Settings (JSON):

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

Alternatively, you can add it to a file called .vscode/mcp.json in your workspace to share the configuration with others.