Cloudflare Playwright

You can run a Cloudflare-based Model Control Protocol (MCP) server that lets an AI agent control a browser to perform web automation tasks such as navigation, typing, clicking, and taking screenshots. This MCP server is designed to work with Cloudflare Workers and can be connected to AI platforms for browser automation workflows.

How to use

To use this MCP server, you connect an MCP client (such as Cloudflare AI Playground, Claude Desktop, or VS Code Copilot) to the server URL and start issuing browser-related actions through the available tools. You commonly perform a simple sequence: navigate to a page, interact with elements (typing, clicking), and capture screenshots. Tools are invoked by the MCP client as you request tasks, and the server executes those browser actions and returns results as snapshots and status updates.

Typical usage flow you can follow:

• Connect to the MCP server URL provided for your deployment
• Issue a single action or a small sequence of actions per request (recommended for reliable results)
• Watch the browser navigate to the target page and perform the requested interactions
• Take screenshots to verify page content and state
• Review the page snapshots and adjust your commands as needed

How to install

Prerequisites: you need Node.js and npm installed on your machine, plus access to deploy Cloudflare Workers if you are hosting the MCP server there.

# Install dependencies
npm ci

# Deploy to Cloudflare Workers
npx wrangler deploy

Additional configuration and usage notes

Connect with different clients using the provided MCP URL and connect to the server’s SSE endpoint. The server is designed to work with Cloudflare AI Playground, Claude Desktop, and VS Code Copilot, enabling you to run browser automation tasks from your preferred environment.

For example, you can configure Claude Desktop to proxy the remote MCP server through mcp-remote, so Claude Desktop can communicate with the Cloudflare-based MCP server locally. The configuration uses the following structure in Claude Desktop’s settings:

{
  "mcpServers": {
    "cloudflare-playwright-mcp": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://[my-mcp-url].workers.dev/sse"
      ]
    }
  }
}

Configure in VSCode

You can install the Playwright MCP server in VS Code and register it for use with your GitHub Copilot agent.

# For VS Code
code --add-mcp '{"name":"cloudflare-playwright","type":"sse","url":"https://[my-mcp-url].workers.dev/sse"}'

# For VS Code Insiders
code-insiders --add-mcp '{"name":"cloudflare-playwright","type":"sse","url":"https://[my-mcp-url].workers.dev/sse"}'

Available tools

browser_navigate

Navigate the browser to a specified URL and wait for the page load.

browser_type

Type text into an element such as an input field, using a selector to locate the target.

browser_take_screenshot

Capture a screenshot of the current page and return it in PNG format.

browser_clickt

Click a target element identified by a selector, such as a checkbox or button, to trigger an action.