Playwright MCP

src/content/changelog/browser-rendering/2025-05-26-playwright-mcp.mdx

@@ -0,0 +1,33 @@
+---
+title: Playwright MCP server is now compatible with Browser Rendering
+description: You can now deploy Playwright MCP and use any MCP client to get AI models to interact with Browser Rendering
+products:
+  - browser-rendering
+date: 2025-05-26T17:00:00Z
+---
+
+We're excited to share that you can now use the [Playwright MCP](https://github.com/cloudflare/playwright-mcp) server with Browser Rendering.
+
+Once you [deploy the server](/browser-rendering/platform/playwright-mcp/#deploying), you can use any MCP client with it to interact with Browser Rendering. This allows you to run AI models that can automate browser tasks, such as taking screenshots, filling out forms, or scraping data.
+
+![Access Analytics](~/assets/images/browser-rendering/playground-ai-screenshot.png)
+
+Playwright MCP is available as an npm package at [`@cloudflare/playwright-mcp`](https://www.npmjs.com/package/@cloudflare/playwright-mcp). To install it, type:
+
+```bash
+npm install @cloudflare/playwright-mcp --save-dev
+```
+
+Deploying the server is then as easy as:
+
+```ts
+import { env } from 'cloudflare:workers';
+import { createMcpAgent } from '@cloudflare/playwright-mcp';
+
+export const PlaywrightMCP = createMcpAgent(env.BROWSER);
+export default PlaywrightMCP.mount('/sse');
+```
+
+Check out the full code at [GitHub](https://github.com/cloudflare/playwright-mcp).
+
+Learn more about Playwright MCP in our [documentation](/browser-rendering/platform/playwright-mcp/).

src/content/changelog/cloudflare-one/access-analytics-v2.mdx

@@ -19,4 +19,4 @@ A new Access Analytics dashboard is now available to all Cloudflare One customer
 
 ![Access Analytics](~/assets/images/changelog/cloudflare-one/accessanalytics.png)
 
-To access the new overview, log in to your Cloudflare [Zero Trust dashboard](https://one.dash.cloudflare.com/) and find Analytics in the side navigation bar.
+To access the new overview, log in to your Cloudflare [Zero Trust dashboard](https://one.dash.cloudflare.com/) and find Analytics in the side navigation bar.

src/content/docs/browser-rendering/changelog.mdx

@@ -11,6 +11,6 @@ description: Review recent changes to Worker Browser Rendering.
 
 import { ProductReleaseNotes } from "~/components";
 
-{/* <!-- Actual content lives in /src/content/release-notes/radar.yaml. Update the file there for new entries to appear here. For more details, refer to https://developers.cloudflare.com/style-guide/documentation-content-strategy/content-types/changelog/#yaml-file --> */}
+{/* <!-- Actual content lives in /src/content/release-notes/browser-rendering.yaml. Update the file there for new entries to appear here. For more details, refer to https://developers.cloudflare.com/style-guide/documentation-content-strategy/content-types/changelog/#yaml-file --> */}
 
-<ProductReleaseNotes />
+<ProductReleaseNotes />

src/content/docs/browser-rendering/platform/playwright-mcp.mdx

@@ -0,0 +1,112 @@
+---
+pcx_content_type: concept
+title: Playwright MCP
+description: Deploy a Playwright MCP server that uses Browser Rendering to provide browser automation capabilities to your agents.
+sidebar:
+  order: 6
+  badge: Beta
+---
+
+import {
+	Render,
+	WranglerConfig,
+	TabItem,
+	Tabs,
+	PackageManagers,
+} from "~/components";
+
+[`@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.
+
+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:
+
+* Fast and lightweight. Uses Playwright's accessibility tree, not pixel-based input.
+* LLM-friendly. No vision models needed, operates purely on structured data.
+* Deterministic tool application. Avoids ambiguity common with screenshot-based approaches.
+
+## Deploying
+
+Follow these steps to deploy `@cloudflare/playwright-mcp`:
+
+1. Install the Playwright MCP [npm package](https://www.npmjs.com/package/@cloudflare/playwright-mcp).
+
+<PackageManagers pkg="@cloudflare/playwright-mcp" dev />
+
+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.
+
+<WranglerConfig>
+
+```toml
+name = "playwright-mcp-example"
+main = "src/index.ts"
+compatibility_date = "2025-03-10"
+compatibility_flags = ["nodejs_compat"]
+
+[browser]
+binding = "BROWSER"
+
+[[migrations]]
+tag = "v1"
+new_sqlite_classes = ["PlaywrightMCP"]
+
+[[durable_objects.bindings]]
+name = "MCP_OBJECT"
+class_name = "PlaywrightMCP"
+```
+
+</WranglerConfig>
+
+3. Edit the code.
+
+```ts title="src/index.ts"
+import { env } from 'cloudflare:workers';
+import { createMcpAgent } from '@cloudflare/playwright-mcp';
+
+export const PlaywrightMCP = createMcpAgent(env.BROWSER);
+export default PlaywrightMCP.mount('/sse');
+```
+
+4. Deploy the server.
+
+```bash
+npx wrangler deploy
+```
+
+The server is now available at `https://[my-mcp-url].workers.dev/sse` and you can use it with any MCP client.
+
+Alternatively, use "[Deploy to Cloudflare](https://developers.cloudflare.com/workers/platform/deploy-buttons/)":
+
+[![Deploy to Cloudflare](https://deploy.workers.cloudflare.com/button)](https://deploy.workers.cloudflare.com/?url=https://github.com/cloudflare/playwright-mcp/tree/main/cloudflare/example)
+
+Check our [GitHub page](https://github.com/cloudflare/playwright-mcp) for more information on how to build and deploy Playwright MCP.
+
+## Using Playwright MCP
+
+![alt text](~/assets/images/browser-rendering/playground-ai-screenshot.png)
+
+[Cloudflare playground AI](https://playground.ai.cloudflare.com/) is a great way to test MCP servers using LLM models available in Workers AI.
+
+- Navigate to https://playground.ai.cloudflare.com/
+- Ensure model is set to `llama-3.3-70b-instruct-fp8-fast`
+- In **MCP Servers**, set **URL** to `https://[my-mcp-url].workers.dev/sse`
+- Click **Connect**
+- Status should update to **Connected** and it should list 14 available tools
+
+You can now start to interact with the model, and it will run necessary tools to accomplish what was requested.
+
+:::note
+
+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"
+
+:::
+
+Try this sequence of instructions too see Playwright MCP in action:
+
+* Go to demo.playwright.dev/todomvc
+* Create some todo entry
+* Nice. Now create a todo in parrot style
+* And create another todo in yoda style
+* Take a screenshot
+
+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).
+
+Check our [GitHub page](https://github.com/cloudflare/playwright-mcp) for more examples and MCP client configuration options.

src/content/release-notes/browser-rendering.yaml

@@ -5,6 +5,10 @@ productLink: "/browser-rendering/"
 productArea: Developer platform
 productAreaLink: /workers/platform/changelog/platform/
 entries:
+  - publish_date: "2025-05-26"
+    title: Playwright MCP
+    description: |-
+      * You can now deploy [Playwright MCP](/browser-rendering/platform/playwright-mcp/) and use any MCP client to get AI models to interact with Browser Rendering.
   - publish_date: "2025-04-30"
     title: Automatic Request Headers
     description: |-
@@ -38,4 +42,4 @@ entries:
   - publish_date: "2023-05-19"
     title: Browser Rendering Beta
     description: |-
-      * Beta Launch
+      * Beta Launch