Open Source MCP Server

Playwright DevTools MCP

AIがブラウザ操作を追跡し、通信を完全キャプチャ。curl / Python requests で再現可能なAPI仕様書を自動生成するリバースエンジニアリングMCPサーバー。

57
ツール
576
テスト
10
カテゴリ
CDP
フルキャプチャ
GitHub → クイックスタート 機能一覧
機能カテゴリ
F12開発者ツールの全機能をAIから操作可能に
🌐

ブラウザ操作

Chromium起動、ナビゲーション、クリック、タイピング、JS実行、スクリーンショット

browser_launch, browser_navigate, browser_click, browser_type, browser_evaluate, browser_screenshot +3
🔌

ネットワークキャプチャ

CDP Network.getResponseBodyでリクエスト/レスポンスのボディまで完全取得。XHR/Fetchを自動識別。

network_get_requests, network_get_failed, network_get_summary, network_clear
📝

フロー記録

ユーザー操作を追跡し、APIコールを自動でフローに記録。アノテーション追加も可能。

flow_start_recording, flow_stop_recording, flow_add_step, flow_get_steps, flow_get_captured_api_calls
⚡

API仕様書生成

キャプチャからcurl、Python requests、Markdown API仕様書、HAR (1.2) を自動生成。

generate_curl_commands, generate_python_requests, generate_api_spec, generate_har
🖱️

インタラクティブ操作

座標クリック、ドラッグ&ドロップ、スクロール、キーボード、フォーム入力、タブ管理。グリッド付きスクリーンショットで座標特定。

interact_click_at, interact_drag, interact_scroll, interact_keyboard, interact_fill_form +8
📋

コンソール

console.log/warn/error、ページエラー、CDPログをリアルタイム収集。フィルタリング・検索対応。

console_get_logs, console_clear_logs, console_get_exceptions
⏱️

パフォーマンス

CDPメトリクス、Navigation Timing、Core Web Vitals (LCP/CLS/FCP/TTFB)、Resource Timing。

performance_get_metrics, performance_get_navigation_timing, performance_get_core_web_vitals, performance_get_resource_timing
💾

ストレージ

localStorage、sessionStorage、Cookie (セキュリティ属性込み)、IndexedDB。選択クリアも可能。

storage_get_local_storage, storage_get_session_storage, storage_get_cookies, storage_get_indexeddb_info, storage_clear_data
🔍

DOM / デバッグ

DOM Tree構造、要素プロパティ (computed styles/boundingBox)、ページソース、アクセシビリティツリー。

debug_get_dom_tree, debug_get_element_properties, debug_get_page_source, debug_get_accessibility_tree, debug_query_selector_all
🔒

セキュリティ

HSTS/CSP/X-Frame-Optionsなどセキュリティヘッダー分析。SSL証明書情報、Mixed Content検出。

security_analyze_headers, security_get_certificate, security_check_mixed_content
使い方: リバースエンジニアリング
AIとの対話でWebアプリのAPIを解析
1

ブラウザ起動 & フロー記録開始

AIがChromiumを起動し、操作の記録を開始します。CDPによるフルネットワークキャプチャが自動的に有効になります。

2

操作をAIに指示

「ログインページに行って」「ユーザー名にadminを入力して」「送信ボタンを押して」 — AIがPlaywrightで操作を実行しながら、全通信をキャプチャします。

3

キャプチャ確認

AIが検出したAPIコール (XHR/Fetch) を確認。リクエストヘッダー、ボディ、レスポンスの全内容が取得されています。

4

API仕様書生成

curlコマンド、Python requestsスクリプト、Markdown形式のAPI仕様書、HAR (Chrome DevTools Import用) を自動生成。

アーキテクチャ
Proxmoxセルフホスト + Cloudflare Tunnel
Claude.AI / Claude Desktop / Claude Code
↓ HTTPS (Streamable HTTP + Bearer Token)
Cloudflare Tunnel (*.appserver.tokyo)
↓
Proxmox LXC Container
↓
playwright-devtools-mcp (Express + MCP SDK)
↓
Chromium (headless) + CDP Session
↓
Full request/response capture → curl / Python / API Spec / HAR 生成
デプロイ手順
Proxmox LXC → Cloudflare Tunnel → Claude.AI 接続まで

1 Proxmox LXC作成

bash
# Ubuntu 24.04 LXC作成 (2CPU, 4GB RAM, 20GB disk)
pct create 310 local:vztmpl/ubuntu-24.04-standard_24.04-2_amd64.tar.zst \
  --hostname playwright-mcp --memory 4096 --cores 2 --rootfs local-lvm:20 \
  --net0 name=eth0,bridge=vmbr0,ip=dhcp --features nesting=1
pct start 310 && pct enter 310

2 Node.js & Chromium インストール

bash
# Node.js 22 LTS
curl -fsSL https://deb.nodesource.com/setup_22.x | bash -
apt-get install -y nodejs git

# リポジトリクローン & ビルド
cd /opt
git clone https://github.com/DaisukeHori/playwright-devtools-mcp.git
cd playwright-devtools-mcp
npm install
npx playwright install chromium --with-deps
npm run build

3 systemdサービス設定

bash
# 認証トークン生成
TOKEN=$(openssl rand -hex 32)
echo "MCP_AUTH_TOKEN=$TOKEN" > /opt/playwright-devtools-mcp/.env

# systemd unit
cat > /etc/systemd/system/playwright-mcp.service <<EOF
[Unit]
Description=Playwright DevTools MCP
After=network.target

[Service]
Type=simple
WorkingDirectory=/opt/playwright-devtools-mcp
EnvironmentFile=/opt/playwright-devtools-mcp/.env
ExecStart=/usr/bin/node dist/index.js
Restart=always
RestartSec=5

[Install]
WantedBy=multi-user.target
EOF

systemctl enable --now playwright-mcp
systemctl status playwright-mcp

4 Cloudflare Tunnel設定

bash
# cloudflaredインストール (ホストまたはLXC内)
# tunnel configにエントリ追加:
- hostname: playwright-mcp.appserver.tokyo
  service: http://<LXC_IP>:3100
  
# ヘルスチェック確認
curl https://playwright-mcp.appserver.tokyo/health

5 Claude.AI コネクタ登録

手順
1. claude.ai → Settings → Connectors → Add Custom Connector
2. URL: https://playwright-mcp.appserver.tokyo/mcp
3. Advanced Settings → Authorization Token: (Step 3で生成したトークン)
4. 接続後、ツール一覧に57ツールが表示されることを確認
5. チャットで「ブラウザを起動して example.com を開いて」とテスト
対応クライアント
Streamable HTTP + stdio 両対応
🌐

Claude.AI

Custom Connector (Streamable HTTP)

🖥️

Claude Desktop

stdio or Connector

⌨️

Claude Code

claude mcp add

📱

Claude Mobile

Connector経由

🔧

Cursor / VS Code

MCP HTTP endpoint

🤖

Anthropic API

mcp_servers parameter

CI/CD 自動デプロイ
git push するだけで本番反映
git push (main)
↓ GitHub Webhook (HMAC-SHA256)
Cloudflare Tunnel
↓ POST /webhook/deploy
scripts/deploy.sh (detached process)
git pull → npm ci → build → systemctl restart
↓
✅ 新バージョン稼働中
🔐
HMAC-SHA256署名検証で不正リクエストをブロック
🔄
排他ロックで同時デプロイ防止
💪
detached processでサーバー再起動に耐える
🏥
restart後にヘルスチェック自動実行
コード例: リバースエンジニアリング
AIとの対話でWebアプリのAPIを解析
対話例
あなた: 「このWebアプリのログインAPIを解析したい」

Claude: browser_launch → flow_start_recording → browser_navigate
        → interact_screenshot_annotate (グリッド付き画面確認)
        「ログインフォームが見えます。認証情報を教えてください。」

あなた: 「user: admin@test.com  pass: P@ssw0rd」

Claude: interact_fill_form(#email) → interact_fill_form(#password)
        → interact_click_at(submitボタン座標)
        → flow_get_captured_api_calls
        「3つのAPIコールを検出:
         1. POST /api/auth/login → 200
         2. GET /api/user/profile → 200
         3. GET /api/dashboard → 200」

あなた: 「curlで再現して」

Claude: generate_curl_commands →
curl -X POST 'https://app.example.com/api/auth/login' \
  -H 'Content-Type: application/json' \
  -d '{"email":"admin@test.com","password":"P@ssw0rd"}'
FAQ
よくある質問
Q: なぜMicrosoft公式のPlaywright MCPではなくこれを使うのか？
公式MCPはDOM操作中心で、devtoolsフラグは限定的。本MCPはCDPでリクエスト/レスポンスボディまで完全キャプチャし、curl/Python/API仕様書を自動生成するリバースエンジニアリング特化設計。
Q: Claude.AIのIPアドレス制限に引っかからない？
Proxmoxセルフホストのため、対象サイトにアクセスするIPはあなたのサーバーIP。Anthropicクラウドからのアクセスは/mcp エンドポイントのみ。
Q: 複数のクライアントから同時接続できる？
はい。各browser_launchがユニークなsession_idを返し、セッションは完全に分離。Claude.AI, Claude Desktop, Claude Codeから同時利用可能。
Q: メモリ使用量は？
Chromiumインスタンスあたり約200-400MB。LXCに4GB以上推奨。browser_closeで不要セッションを解放してください。

関連 MCP サーバー

堀が公開している MCP サーバー群。すべて Claude.ai / Cursor 等から利用可能。

サーバーツール説明
b2cloud-api14ヤマト B2クラウド送り状発行 API/MCP
cloudflare-mcp69Cloudflare 統合（Tunnel/DNS/Workers/Pages/R2/KV/SSL/Access）
hubspot-ma-mcp128HubSpot MA（CRM/Marketing/Knowledge Store）
msgraph-mcp-server48Microsoft Graph API（Exchange/Teams/OneDrive/SharePoint）
playwright-devtools-mcp ← 今ここ57Playwright + Chrome DevTools（ブラウザ自動化）
proxmox-mcp-server35Proxmox VE 仮想化基盤操作
printer-mcp-server—CUPS ネットワークプリンタ制御（Kyocera TASKalfa）
yamato-printer-mcp-server—ヤマト送り状サーマルプリンタ（ラズパイ + WS-420B）
ssh-mcp-server10SSH クライアント（セッション管理/非同期コマンド）
mac-remote-mcp34macOS リモート制御（Shell/GUI/ファイル/アプリ）
gemini-image-mcp4Gemini/Imagen 画像生成
runpod-mcp36RunPod GPU FaaS（Pods/Endpoints/Jobs）
firecrawl-mcp—Firecrawl セルフホスト Web スクレイピング
ad-ops-mcp62広告運用自動化（Google Ads/Meta/GBP/X）