← Browser Run / browser-run / playwright

Playwright MCP

@cloudflare/playwright-mcp ↗ je Playwright MCP ↗ serverový fork, který poskytuje funkce pro automatizaci prohlížeče pomocí Playwright a Browser Run.

Tento server umožňuje LLM interagovat s webovými stránkami pomocí strukturovaných snímků přístupnosti (accessibility snapshots), čímž odpadá potřeba snímků obrazovky nebo vizuálně laděných modelů. Mezi jeho klíčové funkce patří:

• Rychlé a odlehčené. Využívá strom přístupnosti Playwright, nikoli vstup založený na pixelech.
• Vhodné pro LLM. Nevyžaduje vizuální modely, pracuje čistě se strukturovanými daty.
• Deterministické použití nástrojů. Odstraňuje nejednoznačnost, která bývá běžná u přístupů založených na snímcích obrazovky.

Pokud již znáte Cloudflare Workers a chcete rovnou začít s Playwright MCP, vyberte toto tlačítko:

Tím se vytvoří repozitář ve vašem účtu GitHub a aplikace se nasadí na Cloudflare Workers. Tuto možnost použijte, pokud Cloudflare Workers dobře znáte a chcete přeskočit podrobné pokyny krok za krokem.

Podívejte se na naše Stránka GitHub ↗ kde najdete další informace o tom, jak vytvořit a nasadit Playwright MCP.

Podle těchto kroků nasaďte @cloudflare/playwright-mcp:

1. Nainstalujte Playwright MCP balíček npm ↗.

npm i -D @cloudflare/playwright-mcp

2. Ověřte, že máte Browser Run a Durable Object vazby (bindings) a migrace ve vašem konfiguračním souboru Wrangler.

{
	"$schema": "./node_modules/wrangler/config-schema.json",
	"name": "playwright-mcp-example",
	"main": "src/index.ts",
	// Set this to today's date
	"compatibility_date": "2026-08-28",
	"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-08-28"
compatibility_flags = [ "nodejs_compat" ]

[browser]
binding = "BROWSER"

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

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

3. Upravte kód.

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. Nasaďte server.

npx wrangler deploy

Server je nyní dostupný na https://[my-mcp-url].workers.dev/sse a můžete ho použít s libovolným klientem MCP.

Cloudflare AI Playground ↗ je skvělý způsob, jak testovat servery MCP pomocí modelů LLM dostupných ve Workers AI.

1. Přejděte na https://playground.ai.cloudflare.com/ ↗.
2. Ujistěte se, že je model nastaven na llama-3.3-70b-instruct-fp8-fast.
3. V MCP Servers, nastavte URL na https://[my-mcp-url].workers.dev/sse.
4. Klikněte na Připojit.
5. Stav by se měl změnit na Připojeno a měl by vypsat 23 dostupných nástrojů.

Nyní můžete začít komunikovat s modelem, který spustí potřebné nástroje ke splnění zadaného požadavku.

Vyzkoušejte tuto posloupnost instrukcí a uvidíte Playwright MCP v akci:

1. "Přejdi na demo.playwright.dev/todomvc"
2. "Vytvoř nějakou položku úkolu"
3. "Pěkné. Teď vytvoř úkol ve stylu papouška"
4. "A vytvoř další úkol ve stylu Yody"
5. "Udělej snímek obrazovky"

Můžete použít i další klienty MCP, například Claude Desktop ↗.

Podívejte se na naše Stránka GitHub ↗ pro další příklady a možnosti konfigurace klienta MCP a v dokumentaci pro vývojáře si přečtěte, jak vytváření Agents na Cloudflare.