Cloudflare Browser Rendering MCP

How to Install and Use Cloudflare Browser Rendering MCP

Cloudflare Browser Rendering MCP is a useful tool that lets you fetch web pages, turn them into markdown, and take screenshots. Below, you will find an easy guide to installing and using this tool, with examples of the code you need.

Step 1: Setting Up Your Environment

Before you start, make sure you have Node.js installed on your computer. Node.js helps you run JavaScript code outside a browser. You also need to have npm or pnpm to manage packages. Once you have these, you can get the Cloudflare Browser Rendering MCP.

To begin, open your terminal or command prompt and create a new folder for your project:

mkdir browser-rendering-mcp
cd browser-rendering-mcp

Step 2: Installing Cloudflare MCP Server

The mcp-server-cloudflare repository is where the Browser Rendering MCP lives. You can clone this repository or install just what you need if you prefer.

To install the necessary package, you can run:

npm install @cloudflare/mcp-server-browser-rendering

If you use pnpm, run:

pnpm add @cloudflare/mcp-server-browser-rendering

This will add the Browser Rendering MCP server tool to your project so you can use it.

Step 3: Getting the API Token from Cloudflare

To use the Cloudflare Browser Rendering MCP with OpenAI or your own project, you will need an API token for access. Go to the Cloudflare dashboard's API tokens section:

https://dash.cloudflare.com/profile/api-tokens

Create a token with the permissions needed for the Browser Rendering MCP server. This token is required to connect securely.

Step 4: Using the Browser Rendering MCP Server

Now that the tool is installed and you have your API token, here’s a simple example of how to use it.

Create a file called index.js with the following code:

import { MCPClient } from '@cloudflare/mcp-server-browser-rendering';

async function fetchWebPage() {
  // Replace with your actual API token
  const apiToken = 'YOUR_CLOUDFLARE_API_TOKEN';

  // URL of the MCP server
  const serverUrl = 'https://browser.mcp.cloudflare.com/mcp';

  const client = new MCPClient({
    url: serverUrl,
    token: apiToken,
  });

  // Example: fetch a webpage, convert to markdown, and take a screenshot
  const result = await client.callTool('renderPage', {
    url: 'https://example.com',
    options: {
      markdown: true,
      screenshot: true,
    },
  });

  console.log(result);
}

fetchWebPage();

Replace 'YOUR_CLOUDFLARE_API_TOKEN' with the token you created in Step 3.

Step 5: Run Your Code

To see everything in action, run the following command in your terminal:

node index.js

This will send a request to the Cloudflare Browser Rendering MCP server. You should see the webpage content as markdown and a screenshot link in the final output.

Summary

By following these steps, you can install and start using the Cloudflare Browser Rendering MCP easily. This tool is handy for fetching web pages, converting them into markdown, and capturing screenshots—all through simple commands and your Cloudflare API token.