How to integrate Cloudflare browser rendering MCP with Grok Build

Connect Grok Build to Cloudflare browser rendering MCP. Capture a full-page screenshot of example.com, extract all product prices from a category page, and more from your terminal, with authentication handled for you.

Get started for freeGet a demo
Cloudflare browser rendering logoCloudflare browser rendering
Api Key

Cloudflare Browser Rendering lets you programmatically control headless browsers running on Cloudflare’s global network. It’s perfect for automating web interactions, capturing screenshots, and extracting web data at scale.

4 Tools

How to integrate Cloudflare browser rendering MCP with Grok Build

Grok Build is xAI's terminal coding agent. It runs on Grok 4.5, plans its work before it acts, and can run multiple sub-agents in parallel. It also reads Claude Code's MCP configuration, so any server you already have in a .mcp.json is picked up with no changes.

In this guide, I will show you how to connect your Cloudflare browser rendering account to Grok Build through Composio, so it can capture a full-page screenshot of example.com, extract all product prices from a category page, get the HTML and image of a login page, and more without leaving the terminal. Composio holds the OAuth tokens for you, and Grok Build only calls the tools you approve.

Also integrate Cloudflare browser rendering with

ChatGPT WorkAntigravityOpenAI Agents SDKClaude Agent SDKClaude CodeClaude CoworkCodexCursorVS CodeOpenCodeOpenClawHermesGoogle ADKLangChainVercel AI SDKMastra AILlamaIndexCrewAIPydantic AIAutoGen

Why use Composio over a standalone MCP server?

  • Read and write access. Composio's Cloudflare browser rendering integration lets Grok Build take real actions like creating drafts, sending updates, and labeling records, not just reading data.
  • 1,000+ SaaS toolkits out of the box. One endpoint gives you a full catalog of pre-built connectors, from Gmail and Slack to Notion, Linear, and Salesforce.
  • One MCP server for every app. Wire up a single Composio server instead of maintaining a separate MCP entry for each app.
  • Smart, context-aware tool loading. Grok Build caps how many tools it holds in a single request. Composio loads only the tools a task needs, so you do not spend that budget on tools you are not using.
  • Cross-app automation. Chain actions across apps in one run. Pull a thread, summarize it in Notion, and post the highlights to Slack from a single prompt.

Prerequisites

  • Grok Build installed and signed in. Install with curl -fsSL https://x.ai/cli/install.sh | bash on macOS or Linux, or irm https://x.ai/cli/install.ps1 | iex on Windows PowerShell. On first launch Grok opens a browser to authenticate; for headless or CI use, set an XAI_API_KEY environment variable instead (create the key at console.x.ai).
  • Access to the Cloudflare browser rendering account you want to connect.
  • The Composio MCP endpoint. Composio's server is remote and hosted, so there is nothing to run locally and no tunnel to set up.

Step-by-step: Connect Cloudflare browser rendering to Grok Build

1. Install and verify Grok Build

Install the CLI, then restart your shell so the grok binary lands on your PATH:

bash
curl -fsSL https://x.ai/cli/install.sh | bash
which grok

On Windows, install with PowerShell instead: irm https://x.ai/cli/install.ps1 | iex. If which grok returns a path, you are set. Grok Build runs on Grok 4.5 by default; you can switch models inside the session with /model <name>.

2. Add the Composio server

Add Composio as a remote HTTP MCP server with the grok mcp add command:

bash
grok mcp add --transport http composio https://connect.composio.dev/mcp

You can also add and manage servers from inside a session. Run /mcps to open the extensions modal on the MCP tab, then add a new server and paste the Composio URL. Added this way, Grok auto-detects the name from the URL and lists the server as connect:

bash
https://connect.composio.dev/mcp
Grok Build /mcps extensions modal listing MCP servers Grok Build adding the Composio MCP server with its URL

Grok also reads Claude Code-style config, so an entry in ~/.grok/config.toml or a project .mcp.json works the same way.

3. Authenticate

Composio uses OAuth. In the /mcps modal, select the Composio server and press i to authenticate (Grok also triggers this browser flow automatically the first time it uses a Composio tool). Click Allow to authorize access. Grok stores the tokens under ~/.grok/mcp_credentials.json, and /mcps shows Composio as connected.

Grok Build prompting to authenticate the Composio MCP server Composio authorization screen with the Allow button for Grok Build

4. Start building

Ask Grok to work with your Cloudflare browser rendering account through Composio. On the first Cloudflare browser rendering action, Composio prompts you to connect the account through OAuth. Approve the scopes once, and Composio handles token refresh from there.

What you can do after connecting Cloudflare browser rendering

  • Capture a full-page screenshot of example.com
  • Extract all product prices from a category page
  • Get the HTML and image of a login page
  • List all Cloudflare browser rendering accounts available

Security + privacy notes (important)

  • Use least-privilege access. Grant only the Cloudflare browser rendering scopes you actually need.
  • Review OAuth scopes before approving. Check that the requested scopes match what you expect Composio and Grok Build to do.
  • Keep write actions human-reviewed. Grok Build proposes a plan before it acts. Leave that approval step on for actions like sending messages or editing records.
  • Keep secrets out of version control. Your XAI_API_KEY and any tokens should never be committed. Use environment variables or a secrets manager.
TOOLS

Supported Tools

Every Cloudflare browser rendering action and event your agent gets out of the box.

Capture Screenshot

Tool to capture a webpage screenshot.

List Accounts

List all Cloudflare accounts accessible to the authenticated API token.

Scrape HTML Elements

Tool to scrape HTML elements for text, HTML, attributes, and box metrics.

Take Webpage Snapshot

Capture both rendered HTML content and a screenshot of a webpage in a single request.

FRAMEWORKS

How to build Cloudflare browser rendering MCP Agent with another framework

ChatGPT Work logo

ChatGPT Work

Use Cloudflare browser rendering MCP with ChatGPT Work

Antigravity logo

Antigravity

Use Cloudflare browser rendering MCP with Antigravity

OpenAI Agents SDK logo

OpenAI Agents SDK

Use Cloudflare browser rendering MCP with OpenAI Agents SDK

Claude Agent SDK logo

Claude Agent SDK

Use Cloudflare browser rendering MCP with Claude Agent SDK

Claude Code logo

Claude Code

Use Cloudflare browser rendering MCP with Claude Code

Claude Cowork logo

Claude Cowork

Use Cloudflare browser rendering MCP with Claude Cowork

Codex logo

Codex

Use Cloudflare browser rendering MCP with Codex

Cursor logo

Cursor

Use Cloudflare browser rendering MCP with Cursor

VS Code logo

VS Code

Use Cloudflare browser rendering MCP with VS Code

OpenCode logo

OpenCode

Use Cloudflare browser rendering MCP with OpenCode

OpenClaw logo

OpenClaw

Use Cloudflare browser rendering MCP with OpenClaw

Hermes logo

Hermes

Use Cloudflare browser rendering MCP with Hermes

Google ADK logo

Google ADK

Use Cloudflare browser rendering MCP with Google ADK

LangChain logo

LangChain

Use Cloudflare browser rendering MCP with LangChain

Vercel AI SDK logo

Vercel AI SDK

Use Cloudflare browser rendering MCP with Vercel AI SDK

Mastra AI logo

Mastra AI

Use Cloudflare browser rendering MCP with Mastra AI

LlamaIndex logo

LlamaIndex

Use Cloudflare browser rendering MCP with LlamaIndex

CrewAI logo

CrewAI

Use Cloudflare browser rendering MCP with CrewAI

Pydantic AI logo

Pydantic AI

Use Cloudflare browser rendering MCP with Pydantic AI

AutoGen logo

AutoGen

Use Cloudflare browser rendering MCP with AutoGen

FAQ

Frequently asked questions

A standalone Cloudflare browser rendering MCP server gives Grok Build a fixed set of Cloudflare browser rendering tools tied to that one server. The Composio Tool Router lets Grok Build load tools from Cloudflare browser rendering and many other apps on demand, based on the task, all through a single endpoint.

Yes. Grok Build ships with native MCP support. Add a server with the grok mcp add command, from the in-session /mcps modal, or by editing ~/.grok/config.toml. It also reads Claude Code-style .mcp.json files, so Grok Build discovers the tools automatically.

Yes. Grok Build has zero-migration compatibility with Claude Code's configuration, so the same Composio server entry works in both without edits.

Tokens, keys, and configuration are encrypted at rest and in transit. Composio is SOC 2 Type 2 compliant, so your Cloudflare browser rendering data and credentials are handled to that standard.

Start with Cloudflare browser rendering.It takes 30 seconds.

Managed auth, hosted MCP servers, and every Cloudflare browser rendering tool your agent needs.Free to start.

Start building