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. プロジェクトをクローンまたはダウンロードします：

```bash