Spark
Sign In
MCP

Automate Browser Interactions with Puppeteer

Puppeteer MCP enables AI-powered browser automation for navigation, screenshots, form interaction, and content extraction.

Connect
VibeBaza
Maintainer?
9
Spark score
out of 100
Updated 6 months ago
Version 1.0.0
Add to Favorites

Why it matters

Leverage the Puppeteer MCP server to automate browser interactions, enabling AI models to navigate websites, extract data, and perform automated testing.

Outcomes

What it gets done

01

Navigate to specified URLs

02

Interact with web elements (click, fill, hover)

03

Capture screenshots of web pages or elements

04

Execute JavaScript within the browser context

Install

Add it to your toolbox

Run in your project directory:

curl -fsSL https://spark.entire.vc/get/vb-puppeteer | bash

Capabilities

Tools your agent gets

puppeteer_navigate

Navigate to a URL in the browser.

puppeteer_screenshot

Take a screenshot of the current page or specific element.

puppeteer_click

Click on an element identified by CSS selector.

puppeteer_fill

Fill in a form field with text value.

puppeteer_select

Select an option from a dropdown menu.

puppeteer_hover

Hover over an element on the page.

puppeteer_evaluate

Execute JavaScript code in the page context.

Overview

Puppeteer MCP

What it does

The Puppeteer MCP server provides an interface for AI models to automate browser actions. It allows for navigation to websites, taking screenshots (of the viewport or specific elements), interacting with form fields (filling and selecting options), and executing arbitrary JavaScript within the page context.

How it connects

Use this connector when you need an AI agent to perform tasks that require direct interaction with a web browser, such as automated web scraping, testing web applications, generating visual documentation through screenshots, or automating form submissions.

Source README

The Puppeteer MCP server enables browser automation through Puppeteer, allowing Claude to navigate websites, take screenshots, interact with web elements, and extract content.

Installation

npm install -g @modelcontextprotocol/server-puppeteer

Configuration

Add to your Claude Code settings:

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

With Custom Browser Path

{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-puppeteer"],
      "env": {
        "PUPPETEER_EXECUTABLE_PATH": "/path/to/chrome"
      }
    }
  }
}

Available Tools

puppeteer_navigate

Navigate to a URL.

puppeteer_navigate(url: string): NavigationResult

puppeteer_screenshot

Take a screenshot of the current page or element.

puppeteer_screenshot(options?: ScreenshotOptions): Screenshot

Options:

  • name - Screenshot identifier
  • selector - CSS selector for element screenshot
  • fullPage - Capture full scrollable page

puppeteer_click

Click on an element.

puppeteer_click(selector: string): ClickResult

puppeteer_fill

Fill in a form field.

puppeteer_fill(selector: string, value: string): FillResult

puppeteer_select

Select an option from a dropdown.

puppeteer_select(selector: string, value: string): SelectResult

puppeteer_hover

Hover over an element.

puppeteer_hover(selector: string): HoverResult

puppeteer_evaluate

Execute JavaScript in the page context.

puppeteer_evaluate(script: string): EvaluationResult

Features

  • Headless and headed browser modes
  • Screenshot capture (viewport or full page)
  • Form interaction (click, fill, select)
  • JavaScript execution in page context
  • Network request interception
  • PDF generation

Usage Example

Claude, navigate to https://example.com, take a screenshot,
then fill in the search form with "MCP servers" and submit it.

Use Cases

  • Web scraping and data extraction
  • Automated testing
  • Screenshot documentation
  • Form automation
  • Visual regression testing

Discussion

Questions & comments · 0

Sign In Sign in to leave a comment.