Puppeteerを使用してブラウザの自動化機能を提供するモデルコンテキストプロトコルサーバーは、設定可能なオプションを使用します。 このサーバーでは、LM が Web ページとやり取りしたり、スクリーンショットを撮ったり、JavaScript を実際のブラウザー環境で実行したり、環境変数から Puppeteer の起動オプションをカスタマイズしたりすることができます。

コンポーネント

ツール

• **puppeteer navigate **

• ブラウザ内の任意のURLに移動

• 入力: url (文字列)

• puppeteer screenshot

• ページ全体または特定の要素のスクリーンショットをキャプチャする

• 入力:

• name: スクリーンショットの名前

• [selector(文字列、オプション):スクリーンショットに要素のCSSセレクター

• [width (番号、オプション、デフォルト:800): スクリーンショットの幅

• [height (番号、オプション、デフォルト:600):スクリーンショットの高さ

• puppeteer click

• ページ上の要素をクリックします

• 入力:selector:クリックする要素のCSSセレクター

• ** puppeteer hover **

• ページ上のフーバー要素

• 入力:[selector(文字列):ホバーに要素のCSSセレクター

• puppeteer fill

• 入力項目を記入して下さい

• 入力:

• [selector(文字列):入力フィールドのCSSセレクター

• [value (文字列): 記入する値

Configurable Puppeteer MCP Server

A Model Context Protocol server that provides browser automation capabilities using Puppeteer with configurable options. This server enables LLMs to interact with web pages, take screenshots, and execute JavaScript in a real browser environment, with the ability to customize Puppeteer launch options through environment variables.

Components

Tools

• puppeteer_navigate

  • Navigate to any URL in the browser
  • Input: url (string)

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

1. Console Logs (console://logs)

   • Browser console output in text format
   • Includes all console messages from the browser

2. Screenshots (screenshot://)

   • 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)
• Configurable Puppeteer options through environment variables

Configuration

Using with Custom Puppeteer Options

You can configure Puppeteer launch options by providing a JSON string in the PUPPETEER_ARGS environment variable. This allows you to customize browser behavior without modifying the server code.

Example: Using Firefox Instead of Chrome

{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": ["-y", "github:afshawnlotfi/mcp-configurable-puppeteer"],
      "env": {
        "PUPPETEER_ARGS": "{\"browser\": \"firefox\"}"
      }
    }
  }
}

Example: Configuring Browser Window Size

{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": ["-y", "github:afshawnlotfi/mcp-configurable-puppeteer"],
      "env": {
        "PUPPETEER_ARGS": "{\"defaultViewport\": {\"width\": 1280, \"height\": 800}}"
      }
    }