Cloudflare Playwright MCP Server

How to use

To use this MCP server, connect it to your MCP client (such as Cloudflare AI Playground, Claude Desktop with mcp-remote, or VS Code with Copilot). Once connected, you can invoke a sequence of browser actions through the available tools to accomplish tasks like loading pages, filling forms, clicking controls, and saving visual results.

Key usage patterns include splitting actions into single, clear steps so the model can report results after each action. Typical actions are navigating to a URL, typing into inputs, clicking on elements, and taking screenshots to verify results.

Example workflow you might run: navigate to a demo page, input a value into a form field, take a screenshot, then verify the results by inspecting the page content. Use simple, explicit instructions such as “Go to this URL,” “Type this text,” “Click this button,” or “Take a screenshot.”

How to install

npm ci

Deploy the MCP server to Cloudflare Workers so it is accessible at a stable URL for your MCP clients.

npx wrangler deploy

Additional setup and configuration

To connect Cloudflare Playwright MCP with Cloudflare AI Playground, use the following URL for the MCP endpoint in the MCP Servers configuration: https://[my-mcp-url].workers.dev/sse. Set your model to the desired variant (for example, llama-3.3-70b-instruct-fp8-fast). Then connect and start issuing browser commands through the available tools.

If you are using Claude Desktop, you can proxy the remote MCP server locally with mcp-remote by adding a dedicated entry in Claude Desktop’s configuration under mcpServers. This lets Claude Desktop communicate with the Cloudflare Playwright MCP server as if it were local.

Config examples

Cloudflare Playground and Claude Desktop can be configured to reach the MCP endpoint using the examples shown below. Use the exact command and URL formats to ensure proper connection.

// Claude Desktop configuration example
{
  "mcpServers": {
    "cloudflare_playwright_mcp": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://[my-mcp-url].workers.dev/sse"
      ]
    }
  }
}

VS Code integration allows you to register the Playwright MCP server with the editor so your Copilot agent can drive the browser actions directly from code assistance.

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

Security and notes

Treat MCP interactions as capable of automating browser actions; implement appropriate safeguards in your workflow to avoid unintended navigation, data leakage, or automated interactions with sensitive sites.

Keep the MCP endpoint URL private and only expose it to trusted clients. Use model prompts that request explicit, minimal actions to reduce risk and improve reliability.

Troubleshooting

If your client cannot connect, verify that the MCP URL is reachable and that the server is deployed and listening on the /sse endpoint. Ensure the client model configuration matches the endpoint URL and that network restrictions allow WebSocket-based MCP communications.

If you encounter tool execution failures, check the browser action sequence for correctness (for example, valid selectors, visible elements, and correct page state before taking a screenshot). Use simple, verifiable steps to isolate issues.

Notes

This server is intended to enable AI agents to perform web automation through a structured set of browser tools. It supports multiple MCP client platforms and is designed to be deployed on Cloudflare Workers for scalable access.

browser_navigate

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

browser_type

Type text into a focused input field or element on the current page.

browser_clickt

Click a target element identified by a selector or image to trigger actions on the page.

browser_take_screenshot

Capture a screenshot of the current page state and return it as an image.