Playwright MCP

@cloudflare/playwright-mcp ↗ は、Playwright と Browser Run でブラウザー自動化を提供する Playwright MCP ↗ サーバーのフォークです。

このサーバーは、スクリーンショットや視覚向けに調整したモデルを使わず、構造化されたアクセシビリティスナップショットで LLM が Web ページとやり取りできるようにします。主な特長は次のとおりです。

• 高速で軽量です。ピクセル入力ではなく、Playwright のアクセシビリティツリーを使います。
• LLM 向けです。ビジョンモデルは不要で、構造化データだけで動作します。
• ツール適用が決定的です。スクリーンショット方式でよくある曖昧さを避けます。

Cloudflare Workers にすでに慣れていて、すぐに Playwright MCP を始めたい場合は、次のボタンを選択します。

GitHub アカウントにリポジトリが作成され、アプリケーションが Cloudflare Workers にデプロイされます。Cloudflare Workers に慣れていて、手順案内を飛ばしたい場合に使ってください。

Playwright MCP のビルドとデプロイについては、GitHub ページ ↗ を確認してください。

次の手順で @cloudflare/playwright-mcp をデプロイします。

1. Playwright MCP の npm パッケージ ↗ をインストールします。

npm i -D @cloudflare/playwright-mcp

yarn add -D @cloudflare/playwright-mcp

pnpm add -D @cloudflare/playwright-mcp

bun add -d @cloudflare/playwright-mcp

2. Wrangler 設定ファイルに Browser Run と Durable Object のバインディング、および マイグレーション があることを確認します。

{
	"$schema": "./node_modules/wrangler/config-schema.json",
	"name": "playwright-mcp-example",
	"main": "src/index.ts",
	// Set this to today's date
	"compatibility_date": "2026-09-20",
	"compatibility_flags": ["nodejs_compat"],
	"browser": {
		"binding": "BROWSER",
	},
	"migrations": [
		{
			"tag": "v1",
			"new_sqlite_classes": ["PlaywrightMCP"],
		},
	],
	"durable_objects": {
		"bindings": [
			{
				"name": "MCP_OBJECT",
				"class_name": "PlaywrightMCP",
			},
		],
	},
}

"$schema" = "./node_modules/wrangler/config-schema.json"
name = "playwright-mcp-example"
main = "src/index.ts"
# Set this to today's date
compatibility_date = "2026-09-20"
compatibility_flags = [ "nodejs_compat" ]

[browser]
binding = "BROWSER"

[[migrations]]
tag = "v1"
new_sqlite_classes = [ "PlaywrightMCP" ]

[[durable_objects.bindings]]
name = "MCP_OBJECT"
class_name = "PlaywrightMCP"

3. コードを編集します。

import { env } from "cloudflare:workers";
import { createMcpAgent } from "@cloudflare/playwright-mcp";

export const PlaywrightMCP = createMcpAgent(env.BROWSER);

export default {
	fetch(request: Request, env: Env, ctx: ExecutionContext) {
		const { pathname } = new URL(request.url);

		switch (pathname) {
			case "/sse":
			case "/sse/message":
				return PlaywrightMCP.serveSSE("/sse").fetch(request, env, ctx);
			case "/mcp":
				return PlaywrightMCP.serve("/mcp").fetch(request, env, ctx);
			default:
				return new Response("Not Found", { status: 404 });
		}
	},
};

4. サーバーをデプロイします。

npx wrangler deploy

サーバーは https://[my-mcp-url].workers.dev/sse で利用でき、任意の MCP クライアントから使えます。

Cloudflare AI Playground ↗ は、Workers AI で使える LLM モデルで MCP サーバーを試すのに適しています。

1. https://playground.ai.cloudflare.com/ ↗ を開きます。
2. モデルが llama-3.3-70b-instruct-fp8-fast になっていることを確認します。
3. MCP Servers で URL を https://[my-mcp-url].workers.dev/sse に設定します。
4. Connect をクリックします。
5. ステータスが Connected になり、利用可能なツールが 23 個表示されます。

これでモデルとやり取りを始められます。リクエストを達成するために、必要なツールが実行されます。

次の指示の流れで、Playwright MCP の動作を確認できます。

1. "Go to demo.playwright.dev/todomvc"
2. "Create some todo entry"
3. "Nice. Now create a todo in parrot style"
4. "And create another todo in Yoda style"
5. "Take a screenshot"

Claude Desktop ↗ など、ほかの MCP クライアントも使えます。

ほかの例と MCP クライアントの設定オプションは GitHub ページ ↗ を確認してください。Cloudflare 上でのエージェント構築は、Agents の開発者ドキュメント を参照してください。