|
| 1 | +--- |
| 2 | +pcx_content_type: concept |
| 3 | +title: Playwright MCP |
| 4 | +description: Deploy a Playwright MCP server that uses Browser Rendering to provide browser automation capabilities to your agents. |
| 5 | +sidebar: |
| 6 | + order: 6 |
| 7 | + badge: Beta |
| 8 | +--- |
| 9 | + |
| 10 | +import { |
| 11 | + Render, |
| 12 | + WranglerConfig, |
| 13 | + TabItem, |
| 14 | + Tabs, |
| 15 | + PackageManagers, |
| 16 | +} from "~/components"; |
| 17 | + |
| 18 | +[`@cloudflare/playwright-mcp`](https://github.com/cloudflare/playwright-mcp) is a [Playwright MCP](https://github.com/microsoft/playwright-mcp) server fork that provides browser automation capabilities using Playwright and Browser Rendering. |
| 19 | + |
| 20 | +This server enables LLMs to interact with web pages through structured accessibility snapshots, bypassing the need for screenshots or visually-tuned models. Its key features are: |
| 21 | + |
| 22 | +* Fast and lightweight. Uses Playwright's accessibility tree, not pixel-based input. |
| 23 | +* LLM-friendly. No vision models needed, operates purely on structured data. |
| 24 | +* Deterministic tool application. Avoids ambiguity common with screenshot-based approaches. |
| 25 | + |
| 26 | +## Deploying |
| 27 | + |
| 28 | +Follow these steps to deploy `@cloudflare/playwright-mcp`: |
| 29 | + |
| 30 | +1. Install the Playwright MCP [npm package](https://www.npmjs.com/package/@cloudflare/playwright-mcp). |
| 31 | + |
| 32 | +<PackageManagers pkg="@cloudflare/playwright-mcp" dev /> |
| 33 | + |
| 34 | +2. Make sure you have the [browser rendering](https://developers.cloudflare.com/browser-rendering/) and [durable object](https://developers.cloudflare.com/durable-objects/) bindings and [migrations](https://developers.cloudflare.com/durable-objects/reference/durable-objects-migrations/) configured in your wrangler.toml file. |
| 35 | + |
| 36 | +<WranglerConfig> |
| 37 | + |
| 38 | +```toml |
| 39 | +name = "playwright-mcp-example" |
| 40 | +main = "src/index.ts" |
| 41 | +compatibility_date = "2025-03-10" |
| 42 | +compatibility_flags = ["nodejs_compat"] |
| 43 | + |
| 44 | +[browser] |
| 45 | +binding = "BROWSER" |
| 46 | + |
| 47 | +[[migrations]] |
| 48 | +tag = "v1" |
| 49 | +new_sqlite_classes = ["PlaywrightMCP"] |
| 50 | + |
| 51 | +[[durable_objects.bindings]] |
| 52 | +name = "MCP_OBJECT" |
| 53 | +class_name = "PlaywrightMCP" |
| 54 | +``` |
| 55 | + |
| 56 | +</WranglerConfig> |
| 57 | + |
| 58 | +3. Edit the code. |
| 59 | + |
| 60 | +```ts title="src/index.ts" |
| 61 | +import { env } from 'cloudflare:workers'; |
| 62 | +import { createMcpAgent } from '@cloudflare/playwright-mcp'; |
| 63 | + |
| 64 | +export const PlaywrightMCP = createMcpAgent(env.BROWSER); |
| 65 | +export default PlaywrightMCP.mount('/sse'); |
| 66 | +``` |
| 67 | + |
| 68 | +4. Deploy the server. |
| 69 | + |
| 70 | +```bash |
| 71 | +npx wrangler deploy |
| 72 | +``` |
| 73 | + |
| 74 | +The server is now available at `https://[my-mcp-url].workers.dev/sse` and you can use it with any MCP client. |
| 75 | + |
| 76 | +Alternatively, use "[Deploy to Cloudflare](https://developers.cloudflare.com/workers/platform/deploy-buttons/)": |
| 77 | + |
| 78 | +[](https://deploy.workers.cloudflare.com/?url=https://github.com/cloudflare/playwright-mcp/tree/main/cloudflare/example) |
| 79 | + |
| 80 | +Check our [GitHub page](https://github.com/cloudflare/playwright-mcp) for more information on how to build and deploy Playwright MCP. |
| 81 | + |
| 82 | +## Using Playwright MCP |
| 83 | + |
| 84 | + |
| 85 | + |
| 86 | +[Cloudflare playground AI](https://playground.ai.cloudflare.com/) is a great way to test MCP servers using LLM models available in Workers AI. |
| 87 | + |
| 88 | +- Navigate to https://playground.ai.cloudflare.com/ |
| 89 | +- Ensure model is set to `llama-3.3-70b-instruct-fp8-fast` |
| 90 | +- In **MCP Servers**, set **URL** to `https://[my-mcp-url].workers.dev/sse` |
| 91 | +- Click **Connect** |
| 92 | +- Status should update to **Connected** and it should list 14 available tools |
| 93 | + |
| 94 | +You can now start to interact with the model, and it will run necessary tools to accomplish what was requested. |
| 95 | + |
| 96 | +:::note |
| 97 | + |
| 98 | +For best results, give simple instructions consisting of one single action, e. g., "Create a new todo entry", "Go to cloudflare site", "Take a screenshot" |
| 99 | + |
| 100 | +::: |
| 101 | + |
| 102 | +Try this sequence of instructions too see Playwright MCP in action: |
| 103 | + |
| 104 | +* Go to demo.playwright.dev/todomvc |
| 105 | +* Create some todo entry |
| 106 | +* Nice. Now create a todo in parrot style |
| 107 | +* And create another todo in yoda style |
| 108 | +* Take a screenshot |
| 109 | + |
| 110 | +You can also use other MCP clients like [Claude Desktop](https://github.com/cloudflare/playwright-mcp/blob/main/cloudflare/example/README.md#use-with-claude-desktop). |
| 111 | + |
| 112 | +Check our [GitHub page](https://github.com/cloudflare/playwright-mcp) for more examples and MCP client configuration options. |
0 commit comments