Calling an LLM API (safely)

Make your own app talk to an AI model, and keep your key out of the browser.

Most AI providers offer an API that looks like this: you send a list of messages (each with a role) and get a reply back. Many providers copy the same shape, which makes switching easy.

const response = await fetch('https://api.example.com/v1/chat/completions', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    Authorization: `Bearer ${process.env.API_KEY}`,
  },
  body: JSON.stringify({
    model: 'some-model-name',
    messages: [
      { role: 'system', content: 'You are a friendly guide.' },
      { role: 'user', content: 'Explain DNS in one sentence.' },
    ],
  }),
});
const data = await response.json();
console.log(data.choices[0].message.content);

A typical chat request. Names vary by provider, so read their docs.

The golden rule: keys live on the server

An API key is a password that spends your money. If you put it in code that runs in the browser, anyone can read it from the page source and use it. So the key stays on a server you control, and your page talks to your server, which talks to the model.

Browser  --->  your server (holds the key)  --->  AI provider
   <------------------ reply streams back <------------

The shape of nearly every safe AI app, including the chat on this site.

Careful: Also add limits: cap message length, rate-limit visitors, and keep keys in environment variables, never in git. If a key ever leaks, revoke it and make a new one straight away.

Quick check

Where should your AI provider API key live?

  1. In your front-end JavaScript
  2. On your own server, in an environment variable
  3. In the page's HTML comments
  4. In the git repository so the team can find it

Answer: On your own server, in an environment variable. Anything sent to the browser can be read by visitors. Keep the key on your server and out of git.