Skip to content
bits
Ship an agent to the edge · Lesson 4 of 8

AI Gateway in front of the model

Tutor:

So far the Worker talks to Anthropic directly. Once real people use it, you'll want answers to questions like: what did the agent send, what did it cost, and which user is burning tokens? Cloudflare AI Gateway sits between your Worker and Anthropic and records all of it.

It's one change: point the SDK at your gateway's URL instead of api.anthropic.com.

import Anthropic from "@anthropic-ai/sdk";
export function gatewayClient(env: Env, userId: string) {
return new Anthropic({
apiKey: "placeholder", // removed by the null headers below
baseURL: `https://gateway.ai.cloudflare.com/v1/${env.CF_ACCOUNT_ID}/${env.AI_GATEWAY_ID}/anthropic`,
defaultHeaders: {
"cf-aig-authorization": `Bearer ${env.CF_AIG_TOKEN}`,
"cf-aig-metadata": JSON.stringify({ user_id: userId }),
"x-api-key": null,
Authorization: null,
},
});
}
TypeScriptUTF-8● lines 5–13: the gateway client
Tutor:

Notice what's missing: the Anthropic key. With BYOK ("bring your own key"), you store the key in the gateway once, from the dashboard. The Worker holds only CF_AIG_TOKEN, a Cloudflare token that lets it use the gateway. The gateway adds the stored key on the way out, but only when the request carries no provider key of its own. That's why the SDK's x-api-key and Authorization headers are set to null: if a placeholder key went out, the gateway would forward it and Anthropic would reject it.

This is how bits itself runs. Every live prompt you write in this sandbox goes from the Worker through AI Gateway, with the key stored there.

Tutor:

What you get for that one change:

Logs. Each request's prompt, response, token counts, cost and duration, searchable in the dashboard. For sensitive apps, send cf-aig-collect-log-payload: false to keep the counts but not the text.

Per-user tags. cf-aig-metadata attaches up to five fields to each request. Tag the user id and you can filter logs by user, and (next lesson) give each user a spend limit.

Key rotation without a deploy. Replace the stored key in the dashboard and the next request uses it.

Caching, with a big caveat for agents:

quick check+20 neurons
Tutor:

You turn on AI Gateway's response cache for your chat agent. How often will it hit?

    Type your answer or tap an option · Enter checks

    Tutor:

    Keep the two caches straight. AI Gateway caching replays a whole stored response for an identical request; it's off by default. Anthropic's prompt caching reuses the processed prefix of your prompt (tools, system prompt, earlier turns), and cached input tokens cost a fraction of the normal price. For an agent, prompt caching is the one that pays.

    quick check+20 neurons
    Tutor:

    With BYOK set up, what does your Worker need as a secret?

      Type your answer or tap an option · Enter checks