CF Playwright

You can run a Cloudflare-based Playwright MCP server to let AI assistants automate a browser through a defined set of tools. This enables tasks like navigating web pages, typing, clicking, and taking screenshots, all controllable from your MCP client.

How to use

Connect to the Cloudflare Playwright MCP server from your MCP client using the server URL and the standard SSE endpoint. Once connected, you will have access to a set of browser automation tools that you can invoke with simple, task-oriented commands. Start with small actions like navigating to a page, then progressively combine actions such as typing into fields, clicking elements, and capturing screenshots. For best reliability, give your agent single, clear instructions per step.

How to install

Prerequisites you need before installing and running the server:

• Node.js installed (recommended LTS)
• npm installed (comes with Node.js)

Install dependencies and prepare the project.

npm ci

Deploy the MCP server to Cloudflare Workers.

npx wrangler deploy

Configure in supported clients

In Cloudflare AI Playground, connect to your MCP server by providing the SSE URL in the MCP Servers section. Use the URL pattern shown here as a placeholder for your own deployment: https://[my-mcp-url].workers.dev/sse.

In Claude Desktop, you can proxy the remote MCP server using mcp-remote. Add a local MCP entry so Claude Desktop can reach the remote server.

VS Code and Copilot integration

You can register the Playwright MCP server with the VS Code CLI to enable GitHub Copilot to access browser automation capabilities.

# 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"}'

Example interaction flow

A typical session follows simple, goal-oriented steps. For example, you might ask the assistant to navigate to a page, fill a form, take a screenshot, and confirm results. The system exposes tools such as browser_navigate, browser_type, browser_take_screenshot, and browser_clickt to perform these actions and update the page state after each step.

Notes and tips

Keep instructions concise and focused on a single action when possible. This helps the model reason about the next step and reduces drift in automation.

Security and best practices

Only expose the MCP server to trusted clients and restrict access to prevent unauthorized automation. Regularly review permissions and monitor activity to ensure secure usage.

Configure in Claude Desktop with mcp-remote

If you are using Claude Desktop, you can proxy the remote MCP server to run locally. Add the following MCP configuration to Claude Desktop to point to your Cloudflare Playwright MCP server.

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

Configure in VSCode as an MCP source

You can add the Playwright MCP server as a source in VS Code to enable in-editor automation features.

# 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 update the page state to reflect the new location.

browser_type

Type text into the currently focused input or element, simulating user keystrokes.

browser_take_screenshot

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

browser_clickt

Click a target element identified by its text, selector, or coordinates to trigger actions on the page.