Secure Your Anthropic API Key in Next.js
The Problem
This is what most Next.js codebases look like today. The ANTHROPIC_API_KEY key (sk-ant-...) lives directly in the process environment. If your repo, your CI logs, or your deployment config leaks — so does your key.
// app/api/claude/route.ts — real Anthropic key in environment
import Anthropic from "@anthropic-ai/sdk";
const client = new Anthropic({
apiKey: process.env.ANTHROPIC_API_KEY, // sk-ant-api03-abc123...
});
export async function POST(req: Request) {
const { prompt } = await req.json();
const message = await client.messages.create({
model: "claude-opus-4-5",
max_tokens: 1024,
messages: [{ role: "user", content: prompt }],
});
return Response.json(message.content[0]);
}The Fix
Send the request to the KeyVault Edge proxy at https://proxy.keyvaultedge.com with the provider's usual path, your kvt_ token in X-KV-Token and the provider's base URL in X-KV-Target. The proxy refuses requests whose Origin isn't on the token's allowed hosts, then injects your real ANTHROPIC_API_KEY, so it never sits in your app's environment.
// app/api/claude/route.ts — real key never in this process; KVE_TOKEN is host-bound
export async function POST(req: Request) {
const { prompt } = await req.json();
const response = await fetch("https://proxy.keyvaultedge.com/v1/messages", {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-KV-Token": process.env.KVE_TOKEN!, // kvt_... token, server-side only
"X-KV-Target": "https://api.anthropic.com",
// Must match one of the token's allowed hosts
Origin: process.env.APP_ORIGIN!,
},
body: JSON.stringify({
model: "claude-opus-4-5",
max_tokens: 1024,
messages: [{ role: "user", content: prompt }],
}),
});
const data = await response.json();
return Response.json(data.content[0]);
}Setup in 4 steps
Create a KVE token for Anthropic
At keyvaultedge.com/login, open Tokens → New Token. Paste your sk-ant-api03-... key, select provider "Anthropic", and add your deployment hostname. Copy the resulting KVE_TOKEN.
Swap the env var in your Next.js project
Update .env.local and your Vercel project environment variables. You no longer need the @anthropic-ai/sdk installed if this is your only usage.
# .env.local
KVE_TOKEN=kvt_...your_token
APP_ORIGIN=https://yourdomain.com # one of the token's allowed hosts
# Optional: remove the SDK if KVE is your only integration
npm uninstall @anthropic-ai/sdkUpdate the Route Handler to use the KVE proxy
Point the request at https://proxy.keyvaultedge.com with the provider's usual path (e.g. /v1/messages), send your token in X-KV-Token, the provider's base URL (https://api.anthropic.com) in X-KV-Target, and an Origin header matching one of the token's allowed hosts. The body is the provider's normal request body; the proxy sets the provider's auth header with your real key and forwards it. Send the anthropic-version header yourself; the proxy forwards your headers unchanged.
Set a max_tokens cost cap in the dashboard
In the KeyVault Edge dashboard under your token settings, enable the cost-cap feature and set a monthly dollar limit. This stops a runaway prompt injection from burning through your Anthropic credits.
What this protects, and what it doesn't
- Your real ANTHROPIC_API_KEY stays at the edge, so it can't leak from your repo, logs, bundle or server environment.
- The kvt_ token is still a credential. A copied token can be replayed by anyone who can send the right headers, including a fake Origin from a server. The protection is that each token has its own rate limits, monthly cost cap and endpoint scope, and you can revoke it in one click without rotating the provider key.
- The cost cap is estimated from the usage the provider reports, so a request already in flight can overshoot it slightly.
Plans and limits are on the pricing page.
More Anthropic guides
Start protecting your keys
Your Anthropic key is one leaked .env file away from being exploited. With KeyVault Edge the real key stays at the edge, and the token that replaces it is capped, scoped and revocable in one click.