The moment your site needs to keep a secret or remember something - an AI feature, a form that saves, a page only your clients see - it needs code on a server. This template gives you one: a React app and its API on a single Cloudflare Worker, set up with Claude Code and running on the free plan.
Worker examples/ai/simple-claude-chat
{
"answer": "Here are three subject lines for your launch email..."
}Your Worker calls Claude with a key stored as a Cloudflare secret. The browser only ever sees the answer.
Most sites don't need this template. Here's how to tell.
A portfolio, a brochure site, a landing page, docs. Nothing to save, nothing to hide.
Skip this. Deploy plain files with Workers static assets, or use Astro.
A blog, a content-led shop, anything where Google ranking and link previews come first.
Render on the server with Astro, React Router or TanStack Start.
It calls an AI model with your key, saves what people send, or shows each client their own data.
This template.
Fair question. pnpm create cloudflare (create-cloudflare) gives you the same React and Worker starting point in one command, and if you're happy wiring up the rest yourself, use it. This template is that starting point plus the parts a solo builder otherwise spends their first week on:
/start asks what you're building, then takes you through Cloudflare credentials, GitHub secrets, a custom domain and the first deploymain once lint, types, tests and build pass - useful when you're your own reviewerAGENTS.md, slash commands and guides written for Claude Code, so it adds a database or an AI feature the same careful way every timeSign-in isn't built in. The sessions example covers the cookie side; for a client portal, putting Cloudflare Access (which has a free plan) in front is the quickest route.
mainOne GitHub Actions workflow. Every pull request and push installs from the lockfile, checks the generated Worker types are current, then lints, tests and builds. Pushes to main deploy only after that passes. Two secrets, CLOUDFLARE_API_TOKEN and CLOUDFLARE_ACCOUNT_ID, are all it needs.
Slash commands that do the Cloudflare plumbing with you, step by step. The Cloudflare API MCP server is configured in .mcp.json.
Each one pairs a React component with its Worker endpoint, types and a README. Copy what you need into src/ and worker/.
Security headers and a /api/health endpoint in the Worker, Vitest with Testing Library, ESLint, exact dependency pins with a three-day release cooldown, and VS Code settings that stay out of the way.
You need Node.js 24, a free Cloudflare account and pnpm. No pnpm yet? Run this once, then open a new terminal - the project picks its own pnpm version from there:
npx get-pnpmClick Use this template on GitHub.
git clone https://github.com/you/your-app.git && cd your-app && pnpm install && pnpm devSwap in your repository's URL and folder name. React and the Worker run together on localhost:5173 - leave this terminal running.
cd your-app && claudeIn a second terminal, open the project folder in Claude Code the way you usually do - the claude command shown here, the desktop app or your editor's extension.
/startType it into Claude Code. It asks what you're building, then walks you through Cloudflare credentials, GitHub secrets and the first deploy.
git pushCI tests every push and deploys main. To deploy from your machine instead, run pnpm run deploy.
Everything in the template fits Cloudflare's free allowances. Figures from Cloudflare's pricing pages, checked 2026-10-04.
| Product | Free allowance |
|---|---|
| Workers | 100,000 requests a day, 10 ms CPU per request |
| D1 | 5 GB storage, 5 million rows read and 100,000 rows written a day |
| KV | 1 GB storage, 100,000 reads and 1,000 writes a day |
| R2 | 10 GB storage, 1 million writes and 10 million reads a month, no egress fees |
| Workers AI | 10,000 Neurons a day |
Sources: Workers, R2, Workers AI.