# Sales Demo-Site Factory — Starter Kit

A complete workflow for building per-prospect demo sites (like `*-on-cloudflare.pages.dev`) using OpenCode + Claude + Cloudflare Pages.

**Total setup time:** ~20 minutes
**Ongoing cost:** ~$50–150/month in Claude API usage at heavy daily use (your mileage will vary)

---

## What this gets you

Given a prospect domain (e.g. `acme.com`), you'll be able to type one sentence into OpenCode and get:

1. A fully researched demo site (DNS recon, brand color extraction, customer logo recon, AI vendor detection)
2. Brand-matched HTML/CSS with prospect's actual colors
3. A live `acme-on-cloudflare.pages.dev` URL you can share with the prospect
4. Byte-perfect deployment verification

You've seen what these look like — `kirkland-on-cloudflare.pages.dev`, `forsys-on-cloudflare.pages.dev`, `amperity-on-cloudflare.pages.dev`, etc.

---

## Setup — One Time (20 minutes)

### Step 1: Install OpenCode (the AI agent)

Open Terminal on your Mac and run:

```bash
curl -fsSL https://opencode.ai/install | bash
```

That's it. OpenCode is now installed at `~/.opencode/bin/opencode`.

To launch it any time:
```bash
opencode
```

**Docs:** https://opencode.ai/docs

### Step 2: Get a Claude API key (the brain)

1. Go to https://console.anthropic.com/
2. Sign up (use your work email)
3. Add a payment method (start with $20 credit to test)
4. Go to **API Keys** → **Create Key** → copy the key (starts with `sk-ant-...`)
5. Save it somewhere safe (1Password, Bitwarden, etc.)

When you first launch OpenCode it will ask you to paste this key. Done.

**Alternative models:** OpenCode also supports OpenAI (GPT-5), Google (Gemini), and several others. Claude (Opus or Sonnet) is what these demo sites were built on and what's tuned in the workflow below.

### Step 3: Install Bun (JS runtime for Wrangler)

```bash
curl -fsSL https://bun.sh/install | bash
```

This installs at `~/.bun/bin/bun`. No Node.js required.

### Step 4: Install Wrangler globally (Cloudflare CLI)

```bash
~/.bun/bin/bun install -g wrangler
```

Verify it works:
```bash
~/.bun/bin/bun ~/.bun/install/global/node_modules/wrangler/bin/wrangler.js --version
```

You should see a version number like `4.84.1`.

### Step 5: Get a Cloudflare API token (for deploying Pages sites)

1. Go to https://dash.cloudflare.com/profile/api-tokens
2. Click **Create Token**
3. Use the **"Edit Cloudflare Workers"** template (this includes Pages permissions)
4. Click **Continue to summary** → **Create token**
5. Copy the token (starts with something like `cfut_...` or just hex)
6. Save it somewhere safe

Also grab your **Account ID** — visible on the right sidebar of any Cloudflare dashboard page.

### Step 6: Save the credentials to your shell

Add these two lines to `~/.zshrc` (replace with your actual values):

```bash
export CLOUDFLARE_API_TOKEN="your-token-here"
export CLOUDFLARE_ACCOUNT_ID="your-account-id-here"
```

Then reload:
```bash
source ~/.zshrc
```

Verify they're set:
```bash
echo $CLOUDFLARE_ACCOUNT_ID
```

### Step 7: Drop in the AGENTS.md instructions

Copy the `AGENTS.md` file from this starter kit into your home directory:

```bash
mkdir -p ~/.config/opencode
cp AGENTS.md ~/.config/opencode/AGENTS.md
```

This file tells OpenCode your workflow preferences and gives it the demo-site recipe.

---

## How to use it

Launch OpenCode:
```bash
opencode
```

You'll see a chat-style interface. Now type something like:

> Can you create a developer platform website for https://example.com

OpenCode will:

1. Look up DNS records and HTTP headers on the domain
2. Fetch the homepage and extract brand colors from CSS
3. Find customer logos, product names, recent news
4. Build a complete demo site with the prospect's brand colors
5. Deploy it to Cloudflare Pages
6. Give you back a live `example-on-cloudflare.pages.dev` URL

The whole process takes ~3–5 minutes for the first site you build per prospect.

---

## Common commands inside OpenCode

| What you want | What to type |
|---|---|
| Build a demo site | "Can you create a dev platform website for https://acme.com" |
| Check what you've built | "What demo sites do I have deployed?" |
| Make a change | "Can you update the kirkland site — change the hero headline to X" |
| Switch to plan mode (read-only) | Press **Tab** in OpenCode |
| Switch back to build mode | Press **Tab** again |
| Share a link | The output already gives you the `*.pages.dev` URL — just paste it |

---

## Plan mode vs. Build mode

OpenCode has two modes you can toggle with **Tab**:

- **Plan mode** — read-only. OpenCode can browse the web, look at DNS, read files, but **cannot write files, deploy, or change anything.** Use this when you want to think out loud, do recon, or draft an outreach email without committing.
- **Build mode** — full access. OpenCode can write files, deploy sites, run shell commands. Use this when you actually want something built.

A good rhythm is: stay in plan mode while you talk through what to do, then flip to build mode when you say "okay, do it."

---

## Cost expectations

| Activity | Approximate cost |
|---|---|
| One demo site built end-to-end | $1–3 in Claude tokens |
| One day of heavy use (5–10 sites + iterations) | $10–30 |
| Cloudflare Pages hosting | Free (unlimited static sites on the free tier) |
| Cloudflare API + DNS lookups | Free |
| Bun + Wrangler | Free |
| OpenCode itself | Free (open source) |

Anthropic billing starts at $5 minimum. Most reps will spend $50–150/month at active daily use.

---

## Files in this starter kit

- `README.md` — this file
- `AGENTS.md` — the workflow instructions OpenCode reads on startup
- `demo-site-template.html` — a starter HTML template for a demo site (reference structure)

> **Note:** This kit is focused entirely on the **demo-site factory** — generating per-prospect `*-on-cloudflare.pages.dev` URLs you can share. Reps already have their own email tools and outreach processes; nothing here touches sending email.

---

## Troubleshooting

**"OpenCode says it can't deploy / Cloudflare API error"**
Check that `$CLOUDFLARE_API_TOKEN` and `$CLOUDFLARE_ACCOUNT_ID` are set in your current shell. Run `echo $CLOUDFLARE_ACCOUNT_ID` to verify.

**"Wrangler can't find the project"**
First deploy creates the project. Just retry — sometimes the project-creation step needs to settle for ~10 seconds before the first deploy works.

**"OpenCode keeps asking me clarifying questions instead of just building"**
Toggle out of plan mode (press Tab) and into build mode. In plan mode it can't make changes.

**"My credentials don't work"**
Make sure you're using a Cloudflare API token, not an API key. The token is what works for Pages deployments.

---

## Where to learn more

- OpenCode docs: https://opencode.ai/docs
- Cloudflare Pages docs: https://developers.cloudflare.com/pages/
- Wrangler docs: https://developers.cloudflare.com/workers/wrangler/
- Anthropic Claude API: https://docs.anthropic.com/

---

## Questions?

Reach out to Matt Holscher at Cloudflare. The pattern is straightforward — once the setup is done, the workflow becomes muscle memory in about a week.

Be well,