playwright-sse-mcp-server

playwright-sse-mcp-server avatar

by torohash

mcpBrowser Automation

playwright/mcpをsseで外部から触るためのやつ

What is playwright-sse-mcp-server

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内での名前解決が可能になります。

便利な使用方法

毎回プロジェクトディレクトリに移動して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クライアントと通信します

Leave a Comment

Comments section will be available soon. Stay tuned!

Frequently Asked Questions

What is MCP?

MCP (Model Context Protocol) is an open protocol that standardizes how applications provide context to LLMs. Think of MCP like a USB-C port for AI applications, providing a standardized way to connect AI models to different data sources and tools.

What are MCP Servers?

MCP Servers are lightweight programs that expose specific capabilities through the standardized Model Context Protocol. They act as bridges between LLMs like Claude and various data sources or services, allowing secure access to files, databases, APIs, and other resources.

How do MCP Servers work?

MCP Servers follow a client-server architecture where a host application (like Claude Desktop) connects to multiple servers. Each server provides specific functionality through standardized endpoints and protocols, enabling Claude to access data and perform actions through the standardized protocol.

Are MCP Servers secure?

Yes, MCP Servers are designed with security in mind. They run locally with explicit configuration and permissions, require user approval for actions, and include built-in security features to prevent unauthorized access and ensure data privacy.