Puppeteer MCP Server

This MCP server provides browser automation capabilities through Puppeteer, allowing interaction with both new browser instances and existing Chrome windows.

Acknowledgment

This project is an experimental implementation inspired by @modelcontextprotocol/server-puppeteer. While it shares similar goals and concepts, it explores alternative approaches to browser automation through the Model Context Protocol.

Features

• Navigate web pages
• Take screenshots
• Click elements
• Fill forms
• Select options
• Hover elements
• Execute JavaScript
• Smart Chrome tab management:
  • Connect to active Chrome tabs
  • Preserve existing Chrome instances
  • Intelligent connection handling

Project Structure

/
├── src/
│   ├── config/        # Configuration modules
│   ├── tools/         # Tool definitions and handlers
│   ├── browser/       # Browser connection management
│   ├── types/         # TypeScript type definitions
│   ├── resources/     # Resource handlers
│   └── server.ts      # Server initialization
├── index.ts          # Entry point
└── README.md        # Documentation

Installation

Option 1: Install from npm

npm install -g puppeteer-mcp-server

You can also run it directly without installation using npx:

npx puppeteer-mcp-server

Option 2: Install from source

1. Clone this repository or download the source code
2. Install dependencies:

npm install

3. Build the project:

npm run build

4. Run the server:

npm start

MCP Server Configuration

To use this tool with Claude, you need to add it to your MCP settings configuration file.

For Claude Desktop App

Add the following to your Claude Desktop configuration file (located at %APPDATA%\Claude\claude_desktop_config.json on Windows or ~/Library/Application Support/Claude/claude_desktop_config.json on macOS):

If installed globally via npm:

{
  "mcpServers": {
    "puppeteer": {
      "command": "puppeteer-mcp-server",
      "args": [],
      "env": {}
    }
  }
}

Using npx (without installation):

{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": ["-y", "puppeteer-mcp-server"],
      "env": {}
    }
  }
}

If installed from source:

{
  "mcpServers": {
    "puppeteer": {
      "command": "node",
      "args": ["path/to/puppeteer-mcp-server/dist/index.js"],
      "env": {
        "NODE_OPTIONS": "--experimental-modules"
      }
    }
  }
}

For Claude VSCode Extension

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):

If installed globally via npm:

{
  "mcpServers": {
    "puppeteer": {
      "command": "puppeteer-mcp-server",
      "args": [],
      "env": {}
    }
  }
}

Using npx (without installation):

{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": ["-y", "puppeteer-mcp-server"],
      "env": {}
    }
  }
}

If installed from source:

{
  "mcpServers": {
    "puppeteer": {
      "command": "node",
      "args": ["path/to/puppeteer-mcp-server/dist/index.js"],
      "env": {
        "NODE_OPTIONS": "--experimental-modules"
      }
    }
  }
}

For source installation, replace path/to/puppeteer-mcp-server with the actual path to where you installed this tool.

U

... View full README on GitHub