このMCPサーバーはPuppeteerを通じてブラウザ自動化機能を提供し、新しいブラウザインスタンスや既存のChromeウィンドウとのやり取りを可能にします。

謝辞

このプロジェクトは@modelcontextprotocol/サーバーパペティアに触発された実験的な実装です。目標や概念は似ていますが、モデルコンテキストプロトコルを通じたブラウザ自動化の代替アプローチを探求しています。

特徴

• ウェブページのナビゲーション
• スクリーンショットを取る
• クリック要素
• フォームの記入
• オプション選択
• ホバー要素
• JavaScriptを実行する
• スマートChromeタブ管理:
• アクティブなChromeタブに接続
• 既存のChromeインスタンスを保存する
• インテリジェントな接続処理

プロジェクト構成

設置

オプション1:npmからインストール

また、インストールなしで直接実行することもnpxを使っています:

オプション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