Your AI Studio app export ships your Gemini key

The Problem

This is the pattern to look for in an exported app. loadEnv with an empty prefix reads every variable in your environment, and the define block pastes GEMINI_API_KEY into the JavaScript that ships to the browser. Deploy it to Vercel, Netlify or Firebase Hosting and the key is public.

// vite.config.ts in an exported AI Studio app (look for this pattern)
import { defineConfig, loadEnv } from "vite";

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, ".", ""); // empty prefix: loads EVERY variable
  return {
    define: {
      // Replaced with the key's literal value in the browser bundle
      "process.env.GEMINI_API_KEY": JSON.stringify(env.GEMINI_API_KEY),
    },
  };
});

// Then check the build:
//   npm run build && grep -r "AIza" dist/

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 GEMINI_API_KEY, so it never sits in your app's environment.

// Browser code, no backend: only a host-locked, capped kvt_ token ships
const res = await fetch(
  "https://proxy.keyvaultedge.com/v1beta/models/gemini-3.5-flash:generateContent",
  {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "X-KV-Token": import.meta.env.VITE_KVE_TOKEN, // kvt_..., not your AIza key
      "X-KV-Target": "https://generativelanguage.googleapis.com",
      // The browser sends Origin itself; it must be one of the token's allowed hosts
    },
    body: JSON.stringify({ contents: [{ parts: [{ text: prompt }] }] }),
  }
);
const data = await res.json();
const text = data.candidates?.[0]?.content?.parts?.[0]?.text ?? "";

Setup in 5 steps

// api/gemini.ts (Vercel). Set GEMINI_API_KEY in the project's env, no VITE_ prefix.
export async function POST(request: Request) {
  const { prompt } = await request.json();
  const upstream = await fetch(
    "https://generativelanguage.googleapis.com/v1beta/models/gemini-3.5-flash:generateContent",
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "x-goog-api-key": process.env.GEMINI_API_KEY!,
      },
      body: JSON.stringify({ contents: [{ parts: [{ text: prompt }] }] }),
    }
  );
  return new Response(upstream.body, {
    status: upstream.status,
    headers: { "Content-Type": "application/json" },
  });
}

// Browser:
// await fetch("/api/gemini", { method: "POST", body: JSON.stringify({ prompt }) });

Sources

• Google: Project Spend Caps in AI Studio (Monthly spend cap on the Spend tab)
• Google AI Developers Forum: AI Studio export inlines GEMINI_API_KEY into the client bundle
• Gemini API billing docs (spend caps and overages)
• Vite: env variables and modes
• Vite: the define option

What this protects, and what it doesn't

• Your real GEMINI_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.

Already leaked a Gemini key? Read what to do in the first hour. Plans and limits are on the pricing page.

Frequently asked questions

More Google AI guides