← Browser Run / browser-run / playwright

Playwright MCP

@cloudflare/playwright-mcp ↗ это Playwright MCP ↗ форк сервера, который предоставляет возможности автоматизации браузера с использованием Playwright и Browser Run.

Этот сервер позволяет LLM взаимодействовать с веб-страницами через структурированные снимки доступности (accessibility snapshots), не прибегая к снимкам экрана или моделям, настроенным на визуальное восприятие. Его ключевые возможности:

• Быстрый и лёгкий инструмент. Использует дерево доступности Playwright, а не ввод на основе пикселей.
• Подходит для LLM. Не требует моделей компьютерного зрения, работает только со структурированными данными.
• Детерминированное применение инструментов. Это устраняет неоднозначность, типичную для подходов на основе скриншотов.

Если вы уже знакомы с Cloudflare Workers и хотите сразу приступить к работе с Playwright MCP, нажмите эту кнопку:

Это создаёт репозиторий в вашем аккаунте GitHub и разворачивает приложение в Cloudflare Workers. Выберите этот вариант, если вы уже знакомы с Cloudflare Workers и хотите пропустить пошаговые инструкции.

Ознакомьтесь с нашим Страница GitHub ↗ с дополнительной информацией о том, как создавать и развёртывать Playwright MCP.

Выполните следующие шаги, чтобы развернуть @cloudflare/playwright-mcp:

1. Установите Playwright MCP пакет npm ↗.

npm i -D @cloudflare/playwright-mcp

2. Убедитесь, что у вас есть Browser Run и Durable Object привязки (bindings) и миграции в конфигурационном файле 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. Отредактируйте код.

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 ↗ отличный способ протестировать серверы MCP с помощью LLM-моделей, доступных в Workers AI.

1. Перейдите в https://playground.ai.cloudflare.com/ ↗.
2. Убедитесь, что для модели задано значение llama-3.3-70b-instruct-fp8-fast.
3. В MCP-серверы, задайте URL к https://[my-mcp-url].workers.dev/sse.
4. Нажмите Подключить.
5. Статус должен измениться на Подключено и должен вывести список из 23 доступных инструментов.

Теперь можно начать взаимодействовать с моделью: она будет запускать нужные инструменты, чтобы выполнить то, что было запрошено.

Выполните эту последовательность действий, чтобы увидеть Playwright MCP в действии:

1. "Перейдите на demo.playwright.dev/todomvc"
2. "Создайте какую-нибудь задачу"
3. "Отлично. Теперь создайте задачу в стиле попугая"
4. "И создайте ещё одну задачу в стиле Йоды"
5. "Сделайте снимок экрана"

Можно также использовать другие MCP-клиенты, например Claude Desktop ↗.

Ознакомьтесь с нашим Страница GitHub ↗ с дополнительными примерами и вариантами настройки клиента MCP, а также в документации для разработчиков о том, как разработка Agents на Cloudflare.