Cloudflare Browser Rendering (Playwright) MCP server

This MCP server leverages Playwright for automated browser testing and integrates with Cloudflare Workers and Browser Rendering. It allows Large Language Models (LLMs) to interact with web browsers through the Model Context Protocol (MCP).

Installation

Prerequisites

Before installing the MCP server, ensure you have Node.js and npm installed.

Setup and Deployment

1. Install dependencies:

npm ci

2. Deploy to Cloudflare Workers:

npx wrangler deploy

Usage

Once deployed, your MCP server will be available at https://[your-mcp-url].workers.dev/sse. You can use this endpoint with various AI tools and platforms.

Using with Cloudflare AI Playground

Cloudflare AI Playground provides a convenient way to test your MCP server:

1. Navigate to https://playground.ai.cloudflare.com/
2. Set the model to llama-3.3-70b-instruct-fp8-fast
3. In the MCP Servers section, set the URL to https://[your-mcp-url].workers.dev/sse
4. Click Connect
5. The status should update to Connected with 14 available tools listed

You can now interact with the model to perform browser automation tasks. For best results, give simple instructions focused on single actions such as:

• "Create a new todo entry"
• "Go to cloudflare site"
• "Take a screenshot"

Using with Claude Desktop

Since Claude Desktop only supports local MCP servers, you'll need to use a proxy:

1. Install and configure mcp-remote by adding this to your Claude Desktop configuration:

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

2. Save the configuration and restart Claude Desktop to apply the changes

Configuring in VS Code

You can add the MCP server to VS Code using the command line:

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

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

After installation, your Playwright MCP server will be available for use with GitHub Copilot agent in VS Code.

Example Interactions

Here's a simple interaction flow you might try:

1. Navigate to a website: "Go to demo.playwright.dev/todomvc"
2. Create tasks: "Create a todo entry 'Buy groceries'"
3. Take screenshots: "Take a screenshot"
4. Interact with elements: "Click the checkbox of the first todo entry"
5. Perform cleanup: "Remove completed todo entries"

Each command will trigger the appropriate browser automation tool, allowing the AI to interact with web content.

How to add this MCP server to Cursor

There are two ways to add an MCP server to Cursor. The most common way is to add the server globally in the ~/.cursor/mcp.json file so that it is available in all of your projects.

If you only need the server in a single project, you can add it to the project instead by creating or adding it to the .cursor/mcp.json file.

Adding an MCP server to Cursor globally

To add a global MCP server go to Cursor Settings > MCP and click "Add new global MCP server".

When you click that button the ~/.cursor/mcp.json file will be opened and you can add your server like this:

{
    "mcpServers": {
        "cursor-rules-mcp": {
            "command": "npx",
            "args": [
                "-y",
                "cursor-rules-mcp"
            ]
        }
    }
}

Adding an MCP server to a project

To add an MCP server to a project you can create a new .cursor/mcp.json file or add it to the existing one. This will look exactly the same as the global MCP server example above.

How to use the MCP server

Once the server is installed, you might need to head back to Settings > MCP and click the refresh button.

The Cursor agent will then be able to see the available tools the added MCP server has available and will call them when it needs to.

You can also explictly ask the agent to use the tool by mentioning the tool name and describing what the function does.