playwright

Playwright MCP fork that works with Cloudflare Browser Rendering

Installation

Run this command in your terminal to add the MCP server to Claude Code.

Run in terminal:

Command

claude mcp add --transport stdio cloudflare-playwright-mcp npx wrangler dev cloudflare/example \
  --env BROWSER="playwright" \
  --env IMAGE_RESOURCES="optional" \
  --env WRANGLER_CONFIG="Path to wrangler.toml if custom"

How to use

This MCP server integrates Playwright with Cloudflare Workers to enable browser-driven tasks and tool usage inside a serverless environment. It uses Playwright for automated browser interactions and exposes tooling via the MCP interface so you can run browser-related actions (such as navigating pages, clicking elements, and taking screenshots) through conversation prompts. You can connect to the server from the Cloudflare AI Playground or Claude Desktop as a remote MCP, allowing AI models to perform browser tasks through the Playwright MCP tools and Browser Rendering integration. Tools include snapshot-based interactions for efficiency and a vision mode that leverages screenshots for visual-based prompts. Typical usage involves deploying the Cloudflare Worker, then pointing your MCP client (or remote proxy) at the deployed URL and selecting the cloudflare-playwright-mcp server when forming requests.

How to install

Prerequisites:

Node.js and npm installed
Access to Cloudflare Workers (wrangler CLI installed)
A Cloudflare account if deploying to Workers

Installation steps:

Install dependencies for the root project

npm ci

Build the Cloudflare-specific package

cd cloudflare
npm run build

Deploy to Cloudflare Workers (example path shown, adjust as needed)

cd cloudflare/example
npm ci
npx wrangler deploy

If you prefer local testing, you can use wrangler dev to run the worker locally (in development you may want to adjust wrangler.toml). Ensure wrangler is installed and configured with your Cloudflare account.

npx wrangler login
npx wrangler dev

After deployment, you can configure MCP clients to point to the deployed SSE URL for the server.

Additional notes

Tips and caveats:

The MCP server relies on Cloudflare Workers and Playwright; ensure your environment has sufficient permissions and CPU allowances for browser automation.
When testing with Claude Desktop, you can proxy remote MCP servers using mcp-remote as shown in the README snippet for Claude Desktop integration.
For best results with the Cloudflare AI Playground, configure the MCP server URL in the Playground’s MCP Servers section and set the model to the recommended llama-3.3-70b-instruct-fp8-fast.
If you need inline image support in Cursor clients, set imageResponses: 'allow' in your MCP agent configuration when running your own worker.
Tools are exposed in two modes: Snapshot (default) and Vision. Choose Vision mode when you need pixel-precise interactions based on screenshots.
Common environment variables may include BROWSER settings and image rendering toggles; review your deployment to set these appropriately.