Connecting to Claude

/**
 * Cloudflare Worker — Claude API forwarder.
 * - Holds the API key in env.ANTHROPIC_KEY (set via `wrangler secret put`).
 * - Adds CORS so the browser can call it.
 * - Streams responses through to the client.
 * - Retries 429s with exponential backoff.
 * - Refuses suspicious requests (basic abuse guard).
 */

const CORS = {
  'access-control-allow-origin':  '*',
  'access-control-allow-methods': 'POST, OPTIONS',
  'access-control-allow-headers': 'content-type',
};

export default {
  async fetch(req, env) {
    if (req.method === 'OPTIONS') return new Response(null, { headers: CORS });
    if (req.method !== 'POST')    return new Response('POST only', { status: 405, headers: CORS });

    const body = await req.text();

    // Basic abuse guard — reject huge payloads, weird origins, missing model.
    if (body.length > 50_000) return new Response('payload too large', { status: 413, headers: CORS });
    let parsed;
    try { parsed = JSON.parse(body); } catch { return new Response('bad json', { status: 400, headers: CORS }); }
    if (!parsed.model || !parsed.messages) return new Response('missing model or messages', { status: 400, headers: CORS });

    return await callClaudeWithRetry(parsed, env, 0);
  }
};

async function callClaudeWithRetry(payload, env, attempt) {
  const r = await fetch('https://api.anthropic.com/v1/messages', {
    method: 'POST',
    headers: {
      'x-api-key':         env.ANTHROPIC_KEY,
      'anthropic-version': '2023-06-01',
      'content-type':      'application/json',
    },
    body: JSON.stringify(payload),
  });

  // Retry rate limits with exponential backoff, max 3 attempts.
  if (r.status === 429 && attempt < 3) {
    const wait = Math.min(1000 * Math.pow(2, attempt), 8000);
    await new Promise(res => setTimeout(res, wait));
    return await callClaudeWithRetry(payload, env, attempt + 1);
  }

  // Stream straight through if streaming was requested.
  if (payload.stream && r.body) {
    return new Response(r.body, {
      status: r.status,
      headers: {
        ...CORS,
        'content-type': 'text/event-stream',
        'cache-control': 'no-cache',
      },
    });
  }

  // Non-streamed — pass through with CORS.
  return new Response(await r.text(), {
    status: r.status,
    headers: { ...CORS, 'content-type': 'application/json' },
  });
}

name = "owen-claude-forwarder"
main = "worker.js"
compatibility_date = "2026-04-01"

[vars]
# non-secret vars go here; the API key is set via:
#   wrangler secret put ANTHROPIC_KEY

import { OWEN_SYSTEM, recommendPrompt } from './prompts.js';

const ENDPOINT = 'https://owen-claude-forwarder.YOUR-USERNAME.workers.dev';
const SPEND_CAP_REQUESTS = 50;        // hard cap per session

const result = document.getElementById('result');
const status = document.getElementById('status');
const usage  = document.getElementById('usage');

let inFlight = false;   // prevent rapid double-clicks
let sessionRequests = parseInt(localStorage.getItem('owen-req-count') || '0');
function bumpUsage(){ sessionRequests++; localStorage.setItem('owen-req-count', sessionRequests); usage.textContent = `requests this session: ${sessionRequests}/${SPEND_CAP_REQUESTS}`; }
bumpUsage();

async function recommend(vibe){
  if (inFlight) return;
  if (sessionRequests >= SPEND_CAP_REQUESTS) {
    setState('error', "you've hit the session cap — refresh to reset.");
    return;
  }
  inFlight = true;
  setState('loading', 'thinking…');

  try {
    const text = await streamClaude({
      model:  'claude-haiku-4-5',
      max_tokens: 200,
      stream: true,
      system: OWEN_SYSTEM,
      messages: [{ role: 'user', content: recommendPrompt(vibe) }],
    });
    bumpUsage();
    setState('done', text || "(empty response — try again)");
  } catch (e) {
    setState('error', friendly(e));
  } finally {
    inFlight = false;
  }
}

async function streamClaude(body) {
  const r = await fetch(ENDPOINT, {
    method: 'POST',
    headers: { 'content-type': 'application/json' },
    body: JSON.stringify(body),
  });
  if (!r.ok) throw new Error('api ' + r.status);

  const reader = r.body.getReader();
  const dec = new TextDecoder();
  let buf = '', text = '';
  while (true) {
    const { value, done } = await reader.read();
    if (done) break;
    buf += dec.decode(value, { stream: true });
    const lines = buf.split('\n');
    buf = lines.pop();
    for (const line of lines) {
      if (line.startsWith('data: ')) {
        try {
          const j = JSON.parse(line.slice(6));
          if (j.type === 'content_block_delta') {
            text += j.delta.text || '';
            setState('streaming', text);          // partial render
          }
        } catch {}
      }
    }
  }
  return text;
}

function setState(state, message) {
  result.dataset.state = state;
  result.textContent = message;
  result.setAttribute('aria-live', 'polite');
  status.className = 'pill ' + state;
  status.textContent = state;
}

function friendly(err) {
  if (!navigator.onLine) return "no internet — try again when you're back online.";
  const msg = String(err.message || err);
  if (msg.includes('429')) return "i'm being asked too fast — wait 30 seconds, then try again.";
  if (msg.includes('401')) return "the API key is wrong on the server. ask whoever set it up to check.";
  if (msg.includes('5'))   return "claude is having a bad moment. try in a minute.";
  return "something broke: " + msg + ". if it keeps happening, tell whoever built this page.";
}

// wire up the buttons
document.querySelectorAll('.vibe').forEach(b =>
  b.addEventListener('click', () => recommend(b.dataset.vibe))
);

/**
 * The system prompt is the most important file in this project.
 * It's where Owen's specific taste — and the rules of the page —
 * are encoded. Keep it readable; you'll iterate it a dozen times.
 */

export const OWEN_SYSTEM = `
You suggest the next book for Owen, age 13.

About Owen:
  - reads weird sci-fi (VanderMeer, Strugatsky, Le Guin)
  - reads narrative history that reads like a novel (Grann, Lansing)
  - reads graphic novels with strong art (Saga, Persepolis)
  - actively dislikes YA fantasy unless the prose is sharp
  - has tried Stephen King twice, didn't stick. don't suggest him.

Output rules:
  - suggest exactly ONE book
  - format: "Title — Author. ."
  - no padding. no "I think you'll love this!"
  - never apologize. never list multiple options. never explain
    that you're an AI. just suggest the book.

If the user asks for something outside Owen's reading taste:
  - politely note this isn't Owen's vibe
  - suggest a book from his actual taste that comes close

Refuse, with a redirect, if asked anything not about books for Owen.
`.trim();

export function recommendPrompt(vibe) {
  const VIBE_HINTS = {
    'weird-scifi':  "Owen wants weird sci-fi today. lean into the strange.",
    'real-history': "Owen wants narrative history that reads like a novel.",
    'graphic':      "Owen wants a graphic novel where the art does work the prose can't.",
    'surprise':     "pick anything from Owen's taste. but pick something that would surprise him — not the obvious choice.",
  };
  return VIBE_HINTS[vibe] || `Owen says: "${vibe}". interpret in line with his taste.`;
}

## one-time setup

# 1. install wrangler (Cloudflare's CLI)
npm install -g wrangler

# 2. log in
wrangler login

# 3. deploy your worker
wrangler deploy

# 4. set the API key (do NOT put it in code)
wrangler secret put ANTHROPIC_KEY
# (paste your key when prompted; it's stored encrypted on Cloudflare)

# 5. note your worker URL — looks like
#    owen-claude-forwarder.YOUR-USERNAME.workers.dev
# put it in script.js as ENDPOINT

## redeploy after edits
wrangler deploy

## see live logs
wrangler tail

## set a hard spend cap
1. log in to console.anthropic.com
2. settings → billing → set monthly spend limit to $5
3. anthropic will refuse calls above the cap (better than a $200 bill)