Cloudflare Browser Rendering
Cloudflare Browser Rendering enables developers to programmatically control and interact with headless browser instances running on Cloudflare’s global network, facilitating tasks such as automating browser interactions, capturing screenshots, generating PDFs, and extracting data from web pages.
Verdict
Common use cases
- Capture bug screenshots from user-reported URLs
- Scrape product prices after JavaScript loads
- Archive live webpage state for compliance
- Check mobile viewport rendering before launch
- Extract structured data from dynamic dashboards
Integration
- Vendor
- Cloudflare Browser Rendering
- Category
- other
- Auth
- API_KEY
- Tools
- 4
- Composio slug
cloudflare_browser_rendering
Tools
- Capture Screenshot
Tool to capture a webpage screenshot. Use when you need a visual snapshot of a URL or HTML with optional viewport and clipping.
- List Accounts
Tool to list all Cloudflare accounts accessible. Use to retrieve a valid account_id for further browser rendering actions.
- Scrape HTML Elements
Tool to scrape HTML elements for text, HTML, attributes, and box metrics. Use when you need detailed data of matched selectors after rendering a page.
- Take Webpage Snapshot
Tool to capture rendered HTML and screenshot of a webpage. Use when you need both DOM content and an image in one request with custom loading and capture settings.
Setup
Setup guide
- 11. In Switchy, open your workspace settings and navigate to the Integrations tab. 2. Click 'Add MCP Integration' and select Cloudflare Browser Rendering from the list. 3. Log into your Cloudflare dashboard, go to My Profile > API Tokens, and create a token with 'Account.Workers Scripts' read permission. 4. Copy the token and paste it into the API Key field in Switchy, then click Connect. 5. Switchy will call the List Accounts tool to verify access—you'll see your account ID appear if the connection succeeds. 6. Open any Space, type '@Cloudflare' in the chat, and ask it to capture a screenshot of a URL to confirm the integration works. 7. If the screenshot appears inline, you're ready to invoke any of the four tools by describing what you need in plain language.
What teammates see: by default, memories from Cloudflare Browser Rendering are scoped to the Space (PROJECT visibility) - you can mark any memory PRIVATE or share it ORG-wide.
Works well with
Top models
Compatibility data appears once enough Spaces have used this MCP together with a given model.
How Switchy teams use it
Starter prompts
Screenshot Mobile View
@Cloudflare take a screenshot of https://example.com with a viewport width of 375 and height of 667 to see the mobile layout.Open in a Space →
Scrape Pricing Table
@Cloudflare scrape all elements matching the selector '.pricing-card' from https://competitor.com/pricing and return their text content and data attributes.Open in a Space →
Snapshot Support Ticket URL
@Cloudflare take a full webpage snapshot of https://app.example.com/dashboard?user=123 including both the DOM and a screenshot.Open in a Space →
Check Above-Fold Content
@Cloudflare capture a screenshot of https://example.com clipped to the viewport so I only see what loads above the fold.Open in a Space →
Extract Metadata Tags
@Cloudflare scrape all meta tags with property or name attributes from https://blog.example.com/post and return their content values.Open in a Space →
Example outputs
Illustrative - representative of the model's voice and quality, not literal recordings.
@Cloudflare Browser Rendering grab a screenshot of our production landing page at https://example.com/home and show me what it looks like on mobile
Screenshot captured at 375×667 viewport (iPhone SE dimensions). The image shows your hero section with the CTA button fully visible, navigation collapsed into a hamburger menu, and the feature grid stacked vertically. File size: 142KB. This is a rendered view after JavaScript execution, so dynamic content like your testimonial carousel appears in its loaded state.
This example demonstrates viewport customization for responsive testing. Requires a valid Cloudflare account_id (use the List Accounts tool first if unknown). Screenshots consume API quota per request—Cloudflare bills by browser session time, so batch testing multiple URLs in one workflow is more efficient than isolated calls.
@Cloudflare Browser Rendering scrape all product prices from https://competitor.example/catalog using the selector '.product-card .price' and return the text content
Scraped 24 elements matching '.product-card .price'. Sample results: '$49.99', '$129.00', '$89.50', '$199.99'... Full list includes text content and bounding box coordinates for each match. The page was fully rendered before extraction, so prices populated by client-side JavaScript are captured. Total session time: 3.2 seconds.
This showcases HTML element scraping after full page render—critical for SPAs or sites with lazy-loaded content. The tool returns text, HTML, attributes, and layout metrics per matched selector. Be aware: scraping competitor sites may violate their terms of service. Session time directly impacts your Cloudflare Browser Rendering bill.
@Cloudflare Browser Rendering take a full snapshot of https://docs.internal/api-reference and summarize the main sections listed in the navigation sidebar
Snapshot complete: rendered HTML (348KB) and screenshot captured. Navigation sidebar contains these sections: 'Authentication' (3 subsections), 'REST Endpoints' (12 subsections), 'Webhooks' (2 subsections), 'Rate Limits', 'Error Codes', and 'Changelog'. The HTML shows the sidebar is a <nav> element with nested <ul> lists. Based on the structure, this documentation covers a REST API with webhook support and includes operational guidance on limits and errors.
This example pairs the snapshot tool (which returns both DOM and image) with AI reasoning to extract structured insights from unstructured page content. Useful for auditing internal docs, monitoring competitor feature releases, or generating summaries from dynamic dashboards. The snapshot captures post-render state, so content loaded via fetch/XHR is included. Requires read access to the target URL—authentication cookies or headers aren't passed by default.
Use-case deep-dives
When screenshot automation beats manual QA rounds
A 3-person growth team runs weekly audits of competitor pricing pages to track messaging shifts and layout changes. They use the Capture Screenshot tool with viewport presets (desktop, mobile, tablet) to snapshot 12 competitor URLs every Monday morning. The API_KEY auth means one engineer sets it up once; the whole team references the screenshots in their Monday Slack thread without touching the Cloudflare dashboard. This works until you need text extraction or element-level metrics—then you hit the tool's visual-only limit. If your audit requires reading copy or measuring button sizes, upgrade to the Scrape HTML Elements tool in the same MCP. Buy this if your team's competitive intel lives in visual diffs, not spreadsheet data.
Why this MCP falls short for bug triage
A 6-person support team wants to reproduce customer-reported UI bugs by screenshotting the exact URL and viewport the customer used. The Take Webpage Snapshot tool captures both rendered HTML and an image, which sounds perfect—but the MCP requires a Cloudflare account_id from List Accounts, and support agents don't have API access in most orgs. The auth model assumes one technical user provisions the key, then shares it across the workspace. If your support team can't self-serve API keys, this becomes a bottleneck. The tool also doesn't handle authenticated sessions (customer login states), so you're limited to public pages. Use this only if your support flow is already centralized through one technical lead who can run the snapshots on demand.
When pixel-perfect client previews justify the setup cost
A 5-person agency delivers 8-10 client websites per quarter and needs to validate responsive breakpoints before handoff. They use Scrape HTML Elements to measure rendered box metrics (width, height, position) of hero sections and CTAs at three viewport sizes, then compare against Figma specs. The tool returns exact pixel dimensions after JavaScript execution, catching layout bugs that static HTML parsers miss. Setup requires one developer to provision the API_KEY and wire the account_id, but after that, designers trigger scrapes from Switchy without touching code. This pays off if your agency bills for QA separately or has recurring clients—one-off projects don't justify the Cloudflare account overhead. Buy this if responsive validation is a line item in your SOW.
Frequently asked
What does the Cloudflare Browser Rendering MCP do in Switchy?
It lets your AI agents capture screenshots, scrape rendered HTML, and extract element data from any webpage using Cloudflare's headless browser infrastructure. Unlike basic HTTP scrapers, it executes JavaScript and waits for dynamic content to load before capturing. Useful for monitoring competitor sites, extracting data from SPAs, or generating visual proofs of web states.
Do I need a Cloudflare account to use this MCP?
Yes. You need an active Cloudflare account with Browser Rendering enabled and an API key with Workers AI permissions. The MCP calls the List Accounts tool first to retrieve your account_id, then uses it for all rendering requests. If you're on Cloudflare's free tier, check whether Browser Rendering is included in your plan.
Can it scrape content behind login walls or paywalls?
No. The MCP renders pages as an anonymous visitor would see them. It doesn't handle cookies, session tokens, or authentication flows. If you need to scrape authenticated content, you'll need to pass pre-authenticated HTML to the Take Webpage Snapshot tool or use a different approach entirely.
How is this different from using Puppeteer or Playwright directly?
You skip the infrastructure overhead. Cloudflare manages the browser instances, scaling, and IP rotation. Your agents call a simple tool instead of writing browser automation scripts. Trade-off: less control over navigation flows, no multi-step interactions, and you're limited to Cloudflare's rendering API capabilities rather than full browser control.
Who on the team should connect this MCP?
Whoever holds the Cloudflare account API key with Workers AI permissions. Typically a developer or ops lead. Once connected in Switchy, any team member can invoke the tools through agents without needing direct Cloudflare access. Usage charges from Cloudflare apply to the connected account, not individual Switchy users.