Configurable 옵션으로 Puppeteer를 사용하여 브라우저 자동화 기능을 제공하는 모델 Context Protocol 서버. 이 서버는 웹 페이지와 상호 작용하기 위해 LLM을 활성화하고 스크린 샷을 찍고 실제 브라우저 환경에서 JavaScript를 실행하며 환경 변수를 통해 Puppeteer 시작 옵션을 사용자 정의 할 수 있습니다.

부품

도구

-puppeteer navigate에 대하여

• 브라우저의 URL에 Navigate

• 입력: url (문자)

• **puppeteer screenshot **

• 전체 페이지 또는 특정 요소의 캡처 스크린

• 입력:

• name (문자,필수): 스크린 샷의 이름

• selector (문자, 선택 사항) : CSS 셀렉터

• width (number, 옵션, 기본값: 800): 스크린 샷 폭

• height (number, 옵션, 기본값: 600): 스크린 샷 높이

• puppeteer click

• 페이지의 요소를 클릭

• 입력 : selector (string) : CSS 선택기

-puppeteer hover에 대하여

• 페이지의 Hover 엘리먼트

• 입력 : selector (문자) : CSS 선택기 (문자)

• ** 패키지 fill**

• 입력 필드 작성

• 입력:

• selector (string): 입력 필드에 CSS 선택기

• value (string): 채우기 값

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