mcpserver.so LogoMCPFly
Submit
playwright-sse-mcp-server logo

playwright-sse-mcp-server

by torohash

Automationplaywrightserver-sent eventsdockerautomation

This service provides Playwright as an MCP (Model Context Protocol) server. By using this server, you can utilize Playwright's functionalities from an MCP client.

View on GitHub

Last updated: N/A

playwright-sse-mcp-server

PlaywrightをMCP（Model Context Protocol）サーバーとして提供するためのサービスです。このサーバーを使用することで、MCPクライアントからPlaywrightの機能を利用することができます。

前提条件

  • Dockerがインストールされていること
  • docker-composeがインストールされていること
  • mcp-networkという名前のDockerネットワークが作成されていること

mcp-networkが存在しない場合は、以下のコマンドで作成できます：

docker network create mcp-network

セットアップと起動方法

  1. リポジトリをクローンまたはダウンロードします
  2. プロジェクトのルートディレクトリで以下のコマンドを実行します：
docker compose up --build

これにより、デフォルトの3002ポートでサーバーが起動します。起動が完了すると、以下のようなメッセージが表示されます：

playwright-sse-mcp-server  | Server is running on port 3002

カスタムポートの設定

デフォルトポート（3002）以外のポートでサーバーを起動したい場合は、環境変数PORTを設定します：

PORT=4000 docker compose up --build

これにより、指定したポート（この例では4000）でサーバーが起動します：

playwright-sse-mcp-server  | Server is running on port 4000

使用方法

同じmcp-networkに参加しているコンテナからの接続

同じmcp-networkに参加している他のコンテナからは、以下のURLでサーバーに接続できます（PORTはサーバーの起動ポート）：

playwright-sse-mcp-server:${PORT}/sse

デフォルトポートを使用している場合：

playwright-sse-mcp-server:3002/sse

これにより、PlaywrightのMCP機能を利用することができます。

ホスト側からの接続

ホストマシンからは、以下のURLでサーバーに接続できます（PORTはサーバーの起動ポート）：

localhost:${PORT}/sse

デフォルトポートを使用している場合：

localhost:3002/sse

Roo Codeからの接続

MCP Servers -> MCP設定を編集 -> 以下を記入します（PORTはサーバーの起動ポート）：

{
  "mcpServers": {
    "playwright-sse-mcp-server-local": {
      "url": "http://localhost:${PORT}/sse"
    }
  }
}

デフォルトポートを使用している場合：

{
  "mcpServers": {
    "playwright-sse-mcp-server-local": {
      "url": "http://localhost:3002/sse"
    }
  }
}

※2025/03/27現在、ClineはSSEをサポートしていない為使えません。

コンテナ環境でのRoo Codeからの接続

同じDocker Network内で実行されているRoo Codeコンテナからは、以下のようにMCP設定を行います：

{
  "mcpServers": {
    "playwright-sse-mcp-server-local": {
      "url": "http://playwright-sse-mcp-server:3002/sse"
    }
  }
}

docker-compose.yml設定例：

services:
  # Roo Code コンテナ
  roo-code:
    # 略

networks:
  mcp-network:
    external: true

この設定により、Roo Codeコンテナからplaywright-sse-mcp-serverコンテナに接続し、ブラウザ操作機能を利用できます。コンテナ名（playwright-sse-mcp-server）をホスト名として使用することで、Docker Network内での名前解決が可能になります。

開発コンテナ環境でのRoo Codeからの接続（ホスト経由）

開発コンテナ内でRoo Codeを実行し、mcp-network に参加せずにホストマシン経由でこのMCPサーバーに接続する場合、以下のようにMCP設定を行います。

Docker Desktop (Mac/Windows) の場合:

{
  "mcpServers": {
    "playwright-sse-mcp-server-local": {
      "url": "http://host.docker.internal:<PORT>/sse"
    }
  }
}

Linux の場合 (例: ブリッジゲートウェイIPを使用):

{
  "mcpServers": {
    "playwright-sse-mcp-server-local": {
      "url": "http://172.17.0.1:<PORT>/sse"
    }
  }
}

注意:

  • <PORT> は、MCPサーバーがホスト上で公開しているポート番号（デフォルト: 3002）に置き換えてください。
  • Linuxの場合は、172.17.0.1 の部分を実際のホストIPアドレスまたはDockerブリッジネットワークのゲートウェイIPアドレスに置き換えてください。詳細は「開発コンテナからの接続（ホスト経由）」セクションを参照してください。

開発コンテナからの接続（ホスト経由）

mcp-network に参加していない開発コンテナからこのMCPサーバーにアクセスする必要がある場合（例：既存プロジェクトとの兼ね合いでネットワーク変更が難しい場合）、ホストマシン経由で接続できます。

この方法では、開発コンテナから見て「ホストマシン」にあたるIPアドレスまたは特別なDNS名と、MCPサーバーがホスト上で公開しているポート（compose.yml の ports で設定、デフォルトは3002）を指定します。

接続先URL:

http://<host_ip_or_dns_name>:<PORT>/sse

<PORT> はMCPサーバーが起動しているポート番号に置き換えてください。

<host_ip_or_dns_name> の特定方法:

  • Docker Desktop (Mac/Windows): 特別なDNS名 host.docker.internal を使用できます。
    • 例: http://host.docker.internal:3002/sse
  • Linux:
    • ホストのIPアドレス: ホストマシンのネットワークインターフェースに割り当てられているIPアドレスを使用します（例：ifconfig や ip addr コマンドで確認）。
      • 例: http://192.168.1.10:3002/sse （IPアドレスは環境によって異なります）
    • Dockerブリッジネットワークのゲートウェイ: Dockerのデフォルトブリッジネットワーク (bridge) のゲートウェイIPアドレス（通常 172.17.0.1）を使用できます。docker network inspect bridge コマンドで確認できます。
      • 例: http://172.17.0.1:3002/sse

注意点:

  • ホストのファイアウォール設定によっては、開発コンテナからホストのポートへのアクセスが許可されていない場合があります。
  • 使用するポート番号は、docker compose ps コマンドや compose.yml ファイルで確認してください。

便利な使用方法

毎回プロジェクトディレクトリに移動してdocker composeコマンドを実行するのは面倒です。以下の方法を使用すると、どこからでも簡単にサーバーを起動・停止できます。

シェルスクリプトを使用した方法

このプロジェクトには、サーバーの起動・停止・ログ表示を簡単に行うためのシェルスクリプトが含まれています。

  1. プロジェクトをクローンまたはダウンロードします：
# 任意のディレクトリにクローン
git clone https://github.com/torohash/playwright-sse-mcp-server.git /path/to/installation
  1. .bashrc（または.zshrcなど使用しているシェルの設定ファイル）に以下の行を追加して、シェルスクリプトを読み込みます：
# Playwright MCP Server
export PLAYWRIGHT_MCP_HOME="/path/to/installation"
source "$PLAYWRIGHT_MCP_HOME/scripts/playwright-mcp.sh"

# 具体例（絶対パス利用）
export PLAYWRIGHT_MCP_HOME="$HOME/mcps/playwright-sse-mcp-server"  # 実際のパスに置き換えてください
source "$PLAYWRIGHT_MCP_HOME/scripts/playwright-mcp.sh"
  1. シェルを再起動するか、設定ファイルを再読み込みします：
source ~/.bashrc

これで、どこからでも以下のコマンドを使用できるようになります：

基本的な使用方法
  • playwright-mcp-start - デフォルト設定（ポート3002、再起動なし）でサーバーを起動
  • playwright-mcp-stop - サーバーを停止
  • playwright-mcp-logs - サーバーのログを表示
永続モードの使用

永続モードを使用すると、システム再起動時にサーバーが自動的に起動します：

playwright-mcp-start -p
# または
playwright-mcp-start --persistent
カスタムポートの使用
playwright-mcp-start -P 4000
# または
playwright-mcp-start --port 4000
永続モードとカスタムポートの組み合わせ
playwright-mcp-start -P 4000 -p
# または
playwright-mcp-start --port 4000 --persistent
特定の再起動ポリシーの指定
playwright-mcp-start -r always
# または
playwright-mcp-start --restart always
ヘルプの表示
playwright-mcp-start -h
# または
playwright-mcp-start --help

この方法では、フラグオプションを使用して柔軟に設定を変更できるため、より使いやすくなっています。また、シェルスクリプトを別ファイルに分離することで、.bashrcファイルがシンプルになり、管理が容易になります。

シェルスクリプトのカスタマイズ

シェルスクリプトはscripts/playwright-mcp.shにあります。必要に応じて、このファイルを編集してカスタマイズすることができます。

環境変数

シェルスクリプトは以下の環境変数を使用します：

  • PLAYWRIGHT_MCP_HOME: プロジェクトのインストールディレクトリ。設定されていない場合は、スクリプトの場所から自動的に検出されます。

例えば、以下のように環境変数を設定することで、カスタムパスを指定できます：

export PLAYWRIGHT_MCP_HOME="/path/to/custom/installation"

注意事項

  • このサーバーはheadlessモードでPlaywrightを実行します
  • サーバーはSSE（Server-Sent Events）を使用してMCPクライアントと通信します