이 MCP 서버는 Puppeteer를 통해 브라우저 자동화 기능을 제공하여 새로운 브라우저 인스턴스와 기존 Chrome 창 모두와 상호작용할 수 있게 합니다.

감사의 말

이 프로젝트는 @modelcontextprotocol/서버-퍼피티어에서 영감을 받은 실험적 구현입니다. 목표와 개념은 유사하지만, 모델 컨텍스트 프로토콜을 통한 브라우저 자동화의 대안적 접근법을 탐구합니다.

특징

• 웹 페이지 탐색
• 스크린샷 찍기
• 클릭 요소
• 양식 작성
• 옵션 선택
• 호버 요소
• JavaScript 실행
• 스마트 크롬 탭 관리:
• 활성 크롬 탭에 연결
• 기존 Chrome 인스턴스 보존
• 지능형 연결 처리

프로젝트 구조

설치

옵션 1: npm에서 설치

설치 없이 직접 실행할 수도 있습니다:

옵션 2: 소스에서 설치

1. 이 저장소를 복제하거나 소스 코드를 다운로드하세요

2. 의존성 설치:

3. 프로젝트 구축:

4. 서버 운영:

MCP 서버 구성

이 도구를 Claude에서 사용하려면 MCP 설정 파일에 추가해야 합니다.

클로드 데스크톱 앱을 위해

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