📌Overview

Purpose: The Puppeteer framework aims to provide robust browser automation capabilities, enabling LLMs to interact with web pages effectively.

Overview: Puppeteer serves as a Model Context Protocol server that allows users to automate web browser tasks such as navigation, screenshot capturing, and JavaScript execution within a real browser environment. This framework enhances the interaction between language models and web content.

Key Features:

Browser Automation: Automate interactions with web pages, including navigating to URLs, clicking elements, and filling out forms.
Screenshot Capabilities: Capture full-page or element-specific screenshots, with customizable dimensions and naming for easy access.
JavaScript Execution: Execute arbitrary JavaScript in the browser console to manipulate or retrieve data from web pages.
Console Log Monitoring: Access and monitor console logs of the browser for debugging and analysis.
User Interaction Support: Facilitate basic web interactions such as hovering over elements, selecting options, and filling input fields for comprehensive user simulation.

Puppeteer

A Model Context Protocol server that provides browser automation capabilities using Puppeteer. This server enables LLMs to interact with web pages, take screenshots, and execute JavaScript in a real browser environment.

Components

Tools

puppeteer_navigate
- Navigate to any URL in the browser
- Inputs:
  - url (string, required): URL to navigate to
  - launchOptions (object, optional): PuppeteerJS LaunchOptions. Default null. If changed and not null, browser restarts. Example: { headless: true, args: ['--user-data-dir="C:/Data"'] }
  - allowDangerous (boolean, optional): Allow dangerous LaunchOptions that reduce security. When false, dangerous args like --no-sandbox, --disable-web-security will throw errors. Default false.
puppeteer_screenshot
- Capture screenshots of the entire page or specific elements
- Inputs:
  - name (string, required): Name for the screenshot
  - selector (string, optional): CSS selector for element to screenshot
  - width (number, optional, default: 800): Screenshot width
  - height (number, optional, default: 600): Screenshot height
puppeteer_click
- Click elements on the page
- Input: selector (string): CSS selector for element to click
puppeteer_hover
- Hover elements on the page
- Input: selector (string): CSS selector for element to hover
puppeteer_fill
- Fill out input fields
- Inputs:
  - selector (string): CSS selector for input field
  - value (string): Value to fill
puppeteer_select
- Select an element with SELECT tag
- Inputs:
  - selector (string): CSS selector for element to select
  - value (string): Value to select
puppeteer_evaluate
- Execute JavaScript in the browser console
- Input: script (string): JavaScript code to execute

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

Key Features

Browser automation
Console log monitoring
Screenshot capabilities
JavaScript execution
Basic web interaction (navigation, clicking, form filling)
Customizable Puppeteer launch options

Configuration to use Puppeteer Server

Docker

NOTE The docker implementation will use headless chromium, whereas the NPX version will open a browser window.

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

NPX

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

Launch Options

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

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

{
  "mcpServers": {
    "mcp-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"
      }
    }
  }
}

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}
  }
}

Build

Docker build:

docker build -t mcp/puppeteer -f src/puppeteer/Dockerfile .

License

This MCP server is licensed under the MIT License. You are free to use, modify, and distribute the software under the terms of the MIT License.