Playwright MCP

Playwright MCP

A Model Context Protocol server that provides browser automation capabilities using Playwright, enabling LLMs to interact with web pages through structured accessibility snapshots without requiring screenshots or visually-tuned models.

Category
Visit Server

Tools

browser_close

Close the page

browser_resize

Resize the browser window

browser_console_messages

Returns all console messages

browser_handle_dialog

Handle a dialog

browser_file_upload

Upload one or multiple files

browser_install

Install the browser specified in the config. Call this if you get an error about the browser not being installed.

browser_press_key

Press a key on the keyboard

browser_navigate

Navigate to a URL

browser_navigate_back

Go back to the previous page

browser_navigate_forward

Go forward to the next page

browser_network_requests

Returns all network requests since loading the page

browser_pdf_save

Save page as PDF

browser_take_screenshot

Take a screenshot of the current page. You can't perform actions based on the screenshot, use browser_snapshot for actions.

browser_snapshot

Capture accessibility snapshot of the current page, this is better than screenshot

browser_click

Perform click on a web page

browser_drag

Perform drag and drop between two elements

browser_hover

Hover over element on page

browser_type

Type text into editable element

browser_select_option

Select an option in a dropdown

browser_tab_list

List browser tabs

browser_tab_new

Open a new tab

browser_tab_select

Select a tab by index

browser_tab_close

Close a tab

browser_generate_playwright_test

Generate a Playwright test for given scenario

browser_wait_for

Wait for text to appear or disappear or a specified time to pass

README

Playwright MCP Docker Environment

Docker環境でPlaywright MCPサーバーを実行し、外部ツールから自動ブラウザ操作を可能にするプロジェクトです。

🚀 クイックスタート

# 1. リポジトリをクローン
git clone <repository-url>
cd playwright-replan

# 2. Docker Composeで起動
docker-compose up -d

# 3. 動作確認
curl http://localhost:8931/health

SSEエンドポイント: http://localhost:8931/sse

📋 機能

  • ヘッドレスブラウザ操作: Chromium/Firefox/WebKitでの自動操作
  • SSE通信: リアルタイムなブラウザ操作結果の取得
  • 外部ツール連携: n8n、VS Code、Cursorなどとの統合
  • 出力ファイル管理: スクリーンショット、PDF、Traceファイルの保存
  • 設定可能: 環境変数による柔軟な設定変更

🛠️ 構成

playwright-replan/
├── Dockerfile                 # MCPサーバー用コンテナ
├── docker-compose.yml        # サービス定義
├── .env                      # 環境設定
├── scripts/
│   ├── entrypoint.sh         # 起動スクリプト
│   └── health-check.sh       # ヘルスチェック
├── config/
│   └── mcp-server.json       # MCP設定
├── output/                   # 出力ファイル
└── docs/
    ├── SETUP.md             # 詳細セットアップ
    └── API_USAGE.md         # API使用方法

⚙️ 設定

環境変数

変数 デフォルト 説明
MCP_HOST_PORT 8931 公開ポート
DEBUG - デバッグログ有効化
SAVE_TRACE false Trace保存
VISION_MODE false スクリーンショットモード

デバッグ有効化

echo "DEBUG=pw:api" >> .env
docker-compose restart

🔗 外部ツール連携

n8n

{
  "mcpServers": {
    "playwright": {
      "url": "http://localhost:8931/sse"
    }
  }
}

VS Code/Cursor

{
  "mcpServers": {
    "playwright": {
      "url": "http://localhost:8931/sse"
    }
  }
}

📊 監視

# ログ確認
docker-compose logs -f

# ヘルスチェック
curl http://localhost:8931/health

# コンテナ状態
docker-compose ps

📚 ドキュメント

🔧 トラブルシューティング

よくある問題

  1. ポート競合: .envMCP_HOST_PORTを変更
  2. 起動失敗: docker-compose logsでエラー確認
  3. 接続できない: ファイアウォール設定を確認

サポート

問題が発生した場合は、以下を確認してください:

📝 ライセンス

このプロジェクトは実験的なものです。商用利用の際は適切なライセンス確認を行ってください。

🤝 貢献

プルリクエストやイシューの報告を歓迎します。

Recommended Servers

playwright-mcp

playwright-mcp

A Model Context Protocol server that enables LLMs to interact with web pages through structured accessibility snapshots without requiring vision models or screenshots.

Official
Featured
TypeScript
Magic Component Platform (MCP)

Magic Component Platform (MCP)

An AI-powered tool that generates modern UI components from natural language descriptions, integrating with popular IDEs to streamline UI development workflow.

Official
Featured
Local
TypeScript
Audiense Insights MCP Server

Audiense Insights MCP Server

Enables interaction with Audiense Insights accounts via the Model Context Protocol, facilitating the extraction and analysis of marketing insights and audience data including demographics, behavior, and influencer engagement.

Official
Featured
Local
TypeScript
VeyraX MCP

VeyraX MCP

Single MCP tool to connect all your favorite tools: Gmail, Calendar and 40 more.

Official
Featured
Local
graphlit-mcp-server

graphlit-mcp-server

The Model Context Protocol (MCP) Server enables integration between MCP clients and the Graphlit service. Ingest anything from Slack to Gmail to podcast feeds, in addition to web crawling, into a Graphlit project - and then retrieve relevant contents from the MCP client.

Official
Featured
TypeScript
Kagi MCP Server

Kagi MCP Server

An MCP server that integrates Kagi search capabilities with Claude AI, enabling Claude to perform real-time web searches when answering questions that require up-to-date information.

Official
Featured
Python
E2B

E2B

Using MCP to run code via e2b.

Official
Featured
Neon Database

Neon Database

MCP server for interacting with Neon Management API and databases

Official
Featured
Exa Search

Exa Search

A Model Context Protocol (MCP) server lets AI assistants like Claude use the Exa AI Search API for web searches. This setup allows AI models to get real-time web information in a safe and controlled way.

Official
Featured
Qdrant Server

Qdrant Server

This repository is an example of how to create a MCP server for Qdrant, a vector search engine.

Official
Featured