Skip to content
Cloudflare Docs
Docs DirectoryAPIsSDKs

Using with MCP clients (CDP)

You can use the CDP endpoints with AI coding agents through the Model Context Protocol (MCP) ↗. The chrome-devtools-mcp ↗ package provides an MCP server that allows AI assistants to control and inspect browser sessions.

Before you begin, make sure you create a custom API Token with the Browser Rendering - Edit permission. For more information, refer to REST API — Before you begin.

What is MCP?

The Model Context Protocol (MCP) is an open protocol that enables AI assistants to interact with external tools and services. By configuring an MCP client with Browser Rendering, your AI coding agent can perform browser automation tasks like navigating to pages, taking screenshots, running performance audits, and debugging JavaScript.

Prerequisites

  • Node.js v20.19 or newer
  • An MCP-compatible AI client (for example, Claude Desktop, Claude Code, Cursor, OpenCode)
  • A Browser Rendering API token with Browser Rendering - Edit permissions

Configure your MCP client

Add the following configuration to your MCP client settings file (the exact location depends on your client):

Claude Desktop and Claude Code

Add to claude_desktop_config.json (Claude Desktop) or ~/.claude.json (Claude Code):

{
  "mcpServers": {
    "browser-rendering": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--wsEndpoint=wss://api.cloudflare.com/client/v4/accounts/<ACCOUNT_ID>/browser-rendering/devtools/browser?keep_alive=600000",
        "--wsHeaders={\"Authorization\":\"Bearer <API_TOKEN>\"}"
      ]
    }
  }
}

OpenCode

Add to .opencode.jsonc:

{
  "mcp": {
    "browser-rendering": {
      "type": "local",
      "command": [
        "npx",
        "-y",
        "chrome-devtools-mcp@latest",
        "--wsEndpoint=wss://api.cloudflare.com/client/v4/accounts/<ACCOUNT_ID>/browser-rendering/devtools/browser?keep_alive=600000",
        "--wsHeaders={\"Authorization\":\"Bearer <API_TOKEN>\"}"
      ],
      "enabled": true
    }
  }
}

Cursor

Add to ~/.cursor/mcp.json:

{
  "mcpServers": {
    "browser-rendering": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--wsEndpoint=wss://api.cloudflare.com/client/v4/accounts/<ACCOUNT_ID>/browser-rendering/devtools/browser?keep_alive=600000",
        "--wsHeaders={\"Authorization\":\"Bearer <API_TOKEN>\"}"
      ]
    }
  }
}

Replace ACCOUNT_ID with your Cloudflare account ID and API_TOKEN with your Browser Rendering API token. You can obtain these from your Cloudflare dashboard.

For other MCP clients, refer to the chrome-devtools-mcp documentation ↗.

Example usage

After configuring the MCP client, you can ask your AI agent to perform browser tasks:

Navigate to https://example.com and take a screenshot of the homepage
Check the console messages on the current page for any errors
Run a Lighthouse audit on https://developers.cloudflare.com

How it works

The MCP server connects to Browser Rendering via WebSocket using the CDP protocol:

  1. WebSocket endpoint - The --wsEndpoint URL connects to the Browser Rendering service
  2. Authentication - The --wsHeaders parameter includes your API token for authentication
  3. Keep-alive - The keep_alive query parameter (in milliseconds) specifies how long the session stays active
  4. MCP protocol - The server translates MCP tool calls into CDP commands

Additional resources

Troubleshooting

If you have questions or encounter an error, see the Browser Rendering FAQ and troubleshooting guide.