playwright-sse-mcp-server
by torohash
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
セットアップと起動方法
- リポジトリをクローンまたはダウンロードします
- プロジェクトのルートディレクトリで以下のコマンドを実行します:
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コマンドを実行するのは面倒です。以下の方法を使用すると、どこからでも簡単にサーバーを起動・停止できます。
シェルスクリプトを使用した方法
このプロジェクトには、サーバーの起動・停止・ログ表示を簡単に行うためのシェルスクリプトが含まれています。
- プロジェクトをクローンまたはダウンロードします:
# 任意のディレクトリにクローン
git clone https://github.com/torohash/playwright-sse-mcp-server.git /path/to/installation
.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"
- シェルを再起動するか、設定ファイルを再読み込みします:
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.
Related MCP Servers
Fetch
Web content fetching and conversion for efficient LLM usage
Playwright
A Model Context Protocol (MCP) server that provides browser automation capabilities using Playwright. This server enables LLMs to interact with web pages through structured accessibility snapshots, bypassing the need for screenshots or visually-tuned models.
puppeteer-mcp-server
Puppeteer
Browser automation and web scraping
Playwright Universal MCP
A universal Playwright MCP server for browser automation in containerized environments
MCP Server Playwright
MCP Server Playwright - A browser automation service for Claude Desktop
OneNote MCP Server
MCP server for browsing and interacting with OneNote web app using browser-use automation
Playwright
🚀 Fetcher MCP - Playwright Headless Browser Server
MCP server for fetch web page content using Playwright headless browser.
MCP Browser
NeoForge Browser MCP server - used to test the frontend
Submit Your MCP Server
Share your MCP server with the community
Submit Now