Cloudflare Playwright MCP Example

You can run a Model Control Protocol (MCP) server that lets AI assistants control a browser through Playwright on Cloudflare Workers. This server enables web automation tasks such as navigation, typing, clicking, and taking screenshots, and can be used with AI tools and platforms that support MCP.

How to use

Once your Cloudflare Playwright MCP server is deployed, connect your MCP client to the remote endpoint at https://[my-mcp-url].workers.dev/sse. You can use it with Cloudflare AI Playground, Claude Desktop via a proxy, or VS Code Copilot, enabling the model to perform browser actions through a defined set of tools.

How to install

Prerequisites you need before installation:  
- Node.js (recommended LTS version) and npm  
- Access to a Cloudflare account with wrangler installed for deployment  
- Basic familiarity with running commands in your terminal or command prompt.

# Install dependencies
npm ci

# Deploy to Cloudflare Workers
npx wrangler deploy

Additional sections

Configure how you connect your MCP client to the server. You have two main options demonstrated here:

• Use the remote HTTP MCP URL for integration with MCP clients and tools.
• Use a local proxy setup with mcp-remote for environments like Claude Desktop that require local MCP access.

HTTP MCP connection (remote)

• URL: https://[my-mcp-url].workers.dev/sse
• Type: http
• Name: cloudflare_playwright
• Args: []

Local (stdio) MCP connection via mcp-remote (for Claude Desktop and similar tools)  
- Command: `npx`  
- Args: `["mcp-remote", "https://[my-mcp-url].workers.dev/sse"]

VS Code and Copilot integration

• You can add an MCP server URL with the CLI-compatible snippet to connect Copilot's agent to the Playwright MCP server. The example command uses a URL similar to the remote HTTP endpoint above.

Examples of how to use the tools

The server exposes a set of browser automation tools. Typical interactions include navigating to pages, typing into fields, clicking elements, and taking screenshots. A representative workflow shows how a model can navigate, fill a form, and capture a screenshot to verify results.

Security and notes

Treat the MCP endpoint as you would any remote automation service. Use appropriate access controls and avoid exposing the endpoint publicly without protection. Monitor usage and implement least-privilege access for models and users.

Available tools

browser_navigate

Navigate the browser to a specified URL and update the page context to reflect the new location.

browser_type

Type text into a focused element, such as an input field, with optional timing to simulate keystrokes.

browser_clickt

Click a target element matching a selector or visible label to trigger actions on the page.

browser_take_screenshot

Capture a screenshot of the current page state and return the image data or a link to the image.