diff --git a/src/assets/images/browser-rendering/playground-ai-screenshot.png b/src/assets/images/browser-rendering/playground-ai-screenshot.png new file mode 100644 index 00000000000000..f67224fea105c0 Binary files /dev/null and b/src/assets/images/browser-rendering/playground-ai-screenshot.png differ diff --git a/src/content/changelog/browser-rendering/2025-05-28-playwright-mcp.mdx b/src/content/changelog/browser-rendering/2025-05-28-playwright-mcp.mdx new file mode 100644 index 00000000000000..77050359dc22ba --- /dev/null +++ b/src/content/changelog/browser-rendering/2025-05-28-playwright-mcp.mdx @@ -0,0 +1,35 @@ +--- +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-28T08:00:00Z +--- + +import { + PackageManagers, +} from "~/components"; + +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: + + + +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/). diff --git a/src/content/changelog/cloudflare-one/access-analytics-v2.mdx b/src/content/changelog/cloudflare-one/access-analytics-v2.mdx index 99ef6267735b2d..e6e4900e1f4075 100644 --- a/src/content/changelog/cloudflare-one/access-analytics-v2.mdx +++ b/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. \ No newline at end of file diff --git a/src/content/docs/browser-rendering/changelog.mdx b/src/content/docs/browser-rendering/changelog.mdx index e0dff851fb36a5..201e75dfe0c4ad 100644 --- a/src/content/docs/browser-rendering/changelog.mdx +++ b/src/content/docs/browser-rendering/changelog.mdx @@ -11,6 +11,6 @@ description: Review recent changes to Worker Browser Rendering. import { ProductReleaseNotes } from "~/components"; -{/* */} +{/* */} - + \ No newline at end of file diff --git a/src/content/docs/browser-rendering/platform/playwright-mcp.mdx b/src/content/docs/browser-rendering/platform/playwright-mcp.mdx new file mode 100644 index 00000000000000..cab267babff554 --- /dev/null +++ b/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). + + + +2. Make sure you have the [browser rendering](/browser-rendering/) and [durable object](/durable-objects/) bindings and [migrations](/durable-objects/reference/durable-objects-migrations/) configured in your wrangler.toml file. + + + +```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" +``` + + + +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](/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 AI Playground](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 that the 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 the 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 to see Playwright MCP in action: + +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" + +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. diff --git a/src/content/release-notes/browser-rendering.yaml b/src/content/release-notes/browser-rendering.yaml index 220ddddb923201..e5000449e70d16 100644 --- a/src/content/release-notes/browser-rendering.yaml +++ b/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 \ No newline at end of file