Building on Cloudflare with OpenCode

OpenCode is my new favorite tool for hacking. It's an open-source AI agent that can help you research, plan, and build software. In this post I'll show you how to set it up with some good defaults so you can start building on Cloudflare's developer platform right away.

Most imporantly, OpenCode is a remedy for FOMO (fear of missing out). The world is moving fast, but OpenCode helps you keep up.

npx zeke/sweet-sweet-opencode

Cloudflare has so many products 😵‍💫

Cloudflare's developer platform has everything you need to build web apps: Workers for serverless deployment, R2 for object storage, D1 for serverless databases. But there are over 100 other products on the developer platform.

Here are a few examples you might not have heard of:

• Agents for deploying AI agents that can interact with tools and services.
• Sandboxes for running untrusted code in isolated environments.
• Browser Rendering for headless browsers in the cloud.
• Turnstile for privacy-first bot protection without CAPTCHAs.

What are all these products and how do you use them?

Answering a question like this used to be a daunting task (at least for me), but now we have AI agents to help us research, plan, and build. What was once an overwhelming array of options now feels like a candy store of possibilities.

Step 1: Sign in to Cloudflare

Sign into the Cloudflare dashboard at dash.cloudflare.com. If you don't already have an account, you can easily create one using your Google, Apple, or GitHub account.

Cloudflare is free to start, with very generous limits before you have to start paying for anything.

Step 2: Authenticate

Wrangler is Cloudflare's command-line interface. You can run it with npx, which is included with Node.js. (Install Node.js with brew install node if you don't already have it installed.)

Run this command to authenticate your Cloudflare account:

npx -y wrangler login

This will open a browser window prompting you to authorize Wrangler to access your Cloudflare account.

Step 3: Install OpenCode

There are several ways to install OpenCode, but here we'll use Homebrew:

brew install anomalyco/tap/opencode

Step 4: Add MCP servers

Cloudflare has a handful of official MCP servers that expose various tools to your OpenCode agent. The one we're most interested in is the Cloudflare Documentation MCP server, which exposes a tool for searching Cloudflare's documentation from OpenCode.

There are a couple ways to install MCP servers in OpenCode. Here we'll manually edit your OpenCode configuration file (usually located at ~/.config/opencode/opencode.json) to add a few useful servers:

• cloudflare-docs: lets your agent search Cloudflare's docs so it can answer product questions with citations and up-to-date details.
• chrome-devtools: gives your agent a real browser to click around, read pages, and grab content (handy when sites block simple HTTP fetches).
• replicate-code-mode (optional): adds Replicate's "code" tools; disabled by default and requires REPLICATE_API_TOKEN.
• cloudflare-api (optional): lets your agent call Cloudflare's API directly; disabled by default and requires CLOUDFLARE_API_TOKEN.

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "chrome-devtools": {
      "type": "local",
      "command": ["npx", "-y", "chrome-devtools-mcp@latest"]
    },
    "cloudflare-docs": {
      "type": "remote",
      "url": "https://docs.mcp.cloudflare.com/mcp",
      "enabled": true
    },
    "replicate-code-mode": {
      "type": "local",
      "enabled": false,
      "command": ["npx", "-y", "replicate-mcp@alpha", "--tools=code"],
      "environment": {
        "REPLICATE_API_TOKEN": "{env:REPLICATE_API_TOKEN}"
      }
    },
    "cloudflare-api": {
      "type": "remote",
      "enabled": false,
      "url": "https://cloudflare-mcp.mattzcarey.workers.dev/mcp",
      "headers": {
        "Authorization": "Bearer {env:CLOUDFLARE_API_TOKEN}"
      }
    }
  }
}

Step 5: Start OpenCode

Now you've got everything set up. It's time to fire up an OpenCode session.

Open your terminal, then navigate to an existing project or create a new directory:

mkdir my-new-app && cd my-new-app

Then start opencode:

opencode

Step 6: Chat!

Now that you've got OpenCode set up, type a query to get the conversation going. Here are some examples:

How do Cloudflare agents and sandboxes work together?

Can I use Cloudflare to process emails?

Do Cloudflare Workers costs depend on response sizes? I want to serve some images (map tiles) from an R2 bucket and I'm concerned about costs.

How many indexes are supported in Workers Analytics Engine? Give an example using the Workers binding API.

From here you'll be able to plan (and build!) your next Cloudflare-hosted app. Happy hacking! 🚀