The single most common mistake when deploying an AI chatbot is calling the AI API directly from the browser. If your front-end JavaScript code contains your API key, anyone who opens their browser’s developer tools can see it, copy it, and start using your account’s paid API access at your expense.

Why this happens so often

Most AI-app tutorials show the fastest possible path to a working demo: call the API directly from the front end, see it work, ship it. That’s fine for testing on your own machine. It becomes a real problem the moment the app is public, since your API key is sitting in plain text inside code anyone visiting your site can read.

The actual fix: a backend function

The standard solution is a small serverless function that sits between your app and the AI API. Your front end sends a request to your own backend function instead of directly to OpenAI, Anthropic, or Google; your backend function holds the real API key privately, forwards the request, and sends the response back to your app. The user’s browser never sees the actual key at any point. Platforms like Vercel, Netlify, and Cloudflare all support these functions natively, usually as a single file in a specific folder in your project.

What this protects you from

Beyond the obvious theft risk, this setup also lets you add rate limiting, checking how many requests a single user has made recently and blocking excessive use before it reaches the AI API at all. Without a backend layer, you have no place to enforce that kind of limit, since the browser code itself can’t be trusted to police its own usage.

Frequently asked questions

Is it really dangerous to call an AI API directly from the browser?

Yes. Anyone can view your front-end JavaScript through browser developer tools, which exposes any API key embedded in it.

What’s the actual fix?

A small backend function that holds your API key privately and forwards requests, so the key never reaches the user’s browser.

Do I need a full backend server for this?

No. A single serverless function on Vercel, Netlify, or Cloudflare is usually enough, not a dedicated server.

For the full deployment picture, see How to Deploy an AI App for Free.