Featured Open Source MCP Claude Code Cloudflare Browser Rendering

We Open-Sourced CF Browser: 9 Browser Tools for Claude Code via MCP

CF Browser gives Claude Code real browser capabilities — JS rendering, screenshots, PDF generation, AI data extraction, and multi-page crawling. All through MCP, all open source.

March 13, 2026 • 7 min read • By Claude World

Claude Code’s built-in WebFetch returns raw HTML. That’s fine for static pages. But the modern web runs on JavaScript — React dashboards, dynamic pricing pages, SPAs that render nothing without JS.

We built CF Browser to fix this. Today we’re open-sourcing it.

GitHub: github.com/claude-world/cf-browser (MIT License)

The Problem

Try asking Claude Code to read a React documentation page. WebFetch gives you an empty <div id="root"></div>. No content. No rendered text. Nothing useful.

This happens constantly:

  • SPA documentation sites
  • Dynamic pricing and product pages
  • JavaScript-rendered dashboards
  • Any page that needs a browser to display content

The Solution: 9 MCP Tools

CF Browser wraps Cloudflare’s Browser Rendering API (headless Chrome in the cloud) and exposes it as 9 MCP tools that Claude Code can use natively:

ToolWhat It Does
browser_markdownRead any page as clean Markdown (JS rendered)
browser_contentGet fully rendered HTML
browser_screenshotTake PNG screenshots (any viewport size)
browser_pdfGenerate PDF reports (A4, Letter, etc.)
browser_scrapeExtract elements by CSS selector
browser_jsonAI-powered structured data extraction
browser_linksDiscover all hyperlinks on a page
browser_crawlStart async multi-page crawl
browser_crawl_statusPoll or wait for crawl results

Once installed, you just talk to Claude Code naturally:

  • “Read the Next.js 15 migration guide” → renders JS, returns Markdown
  • “Screenshot the homepage on mobile” → 375×667 PNG
  • “Extract all product names and prices from this page” → structured JSON
  • “Crawl our docs site and find broken links” → multi-page crawl

Architecture

Three independent packages, loosely coupled:

Claude Code
  ↓ MCP (stdio)
MCP Server (Python, FastMCP)
  ↓ HTTP
Python SDK (httpx, async)
  ↓ HTTPS + Bearer token
Cloudflare Worker (TypeScript, Hono)
  ├── Auth (timing-safe SHA-256)
  ├── Rate limiting (KV, 60 req/min)
  └── Cache (KV for text, R2 for binary)
  ↓ REST API
Cloudflare Browser Rendering (headless Chrome)

Each layer can be used independently:

  • Worker only — Call the REST API from any language
  • SDK only — Use the Python client in your own scripts
  • MCP Server — Full Claude Code integration

Setup: 3 Steps

1. Deploy the Worker

git clone https://github.com/claude-world/cf-browser.git
cd cf-browser/worker

# Create Cloudflare resources
wrangler kv namespace create CACHE
wrangler kv namespace create RATE_LIMIT
wrangler r2 bucket create cf-browser-storage

# Set secrets
wrangler secret put CF_ACCOUNT_ID
wrangler secret put CF_API_TOKEN
echo "$(openssl rand -hex 32)" | wrangler secret put API_KEYS

# Deploy
cp wrangler.toml.example wrangler.toml
# (paste KV namespace IDs)
wrangler deploy

2. Install Python Packages

pip install "cf-browser @ git+https://github.com/claude-world/cf-browser.git#subdirectory=sdk"
pip install "cf-browser-mcp @ git+https://github.com/claude-world/cf-browser.git#subdirectory=mcp-server"

3. Add to .mcp.json

{
  "mcpServers": {
    "cf-browser": {
      "type": "stdio",
      "command": "python",
      "args": ["-m", "cf_browser_mcp.server"],
      "env": {
        "CF_BROWSER_URL": "https://cf-browser.your-subdomain.workers.dev",
        "CF_BROWSER_API_KEY": "your-api-key"
      }
    }
  }
}

Restart Claude Code. You’ll see 9 browser_* tools.

What Makes It Different

vs. Playwright MCP: CF Browser runs headless Chrome in the cloud on Cloudflare’s edge network. No local browser process. No memory overhead. Works in CI/CD and remote environments where you can’t run a local browser.

vs. Raw WebFetch: Full JavaScript rendering. The page loads completely before content is extracted. Dynamic content, SPAs, and client-side rendered pages all work.

vs. Building Your Own: Auth, rate limiting, caching, SSRF prevention, and error handling are all built in. The Worker handles the infrastructure. You just call the MCP tools.

Cost: Cloudflare’s free tier includes Browser Rendering (10 min/day), KV (100K reads/day), R2 (10GB), and Workers (100K requests/day). For most development workflows, it’s completely free.

Security

We took security seriously from day one:

  • Timing-safe auth: API key validation uses SHA-256 hashing via Web Crypto API to prevent timing attacks
  • Rate limiting: Per-key limits stored as hashed values in KV
  • SSRF prevention: Only http:// and https:// URLs allowed
  • No secrets in code: All credentials via wrangler secret put

Use Cases We’ve Built With It

Since deploying CF Browser for our own workflows:

  • Content pipeline: Fetch any web page → clean Markdown → feed to Claude for article writing
  • Visual QA: Screenshot our site at multiple viewports after every deploy
  • Competitive analysis: Extract structured data from competitor pages
  • Link auditing: Crawl 100+ pages, find broken links and missing meta tags
  • Documentation indexing: Crawl entire doc sites, convert to Markdown for RAG

Contributing

CF Browser is MIT licensed. We welcome contributions:

  • Worker (worker/): TypeScript, Hono framework
  • SDK (sdk/): Python, httpx, Pydantic
  • MCP Server (mcp-server/): Python, FastMCP
# Development
cd worker && npm install && npm run dev    # Worker on :8787
cd sdk && pip install -e ".[dev]" && pytest
cd mcp-server && pip install -e ".[dev]"

Claude Code is powerful for code. But code lives on the web — documentation, APIs, dashboards, competitor sites. CF Browser bridges that gap.

GitHub: github.com/claude-world/cf-browser