L'IA sur le serveur

Pourquoi on n’appelle pas l’IA directement depuis le navigateur

Les services IA (OpenAI, Anthropic et autres) demandent une clé API – un code secret qui t’identifie et sert à la facturation. Et voici le piège :

Tout ce que tu mets dans le JavaScript du navigateur peut être lu par n’importe qui (F12 → code source). Si ta clé était là, n’importe qui pourrait appeler l’IA avec ton argent.

Tu connais déjà la solution du Maître : ton propre serveur. La clé reste sur le serveur, et le navigateur ne parle qu’à ton serveur :

Browser  →  your server (the key is here!)  →  AI service
Browser  ←  your server                     ←  AI service

Montre-moi : l’endpoint /zeptat-se

On va s’appuyer sur le serveur Express du Maître. On stockera la clé dans un fichier .env (ça ne va jamais sur GitHub – ajoute-le à .gitignore !) :

AI_KLIC=sk-your-secret-key-here

Et le serveur obtient un nouvel endpoint :

require('dotenv').config();
const express = require('express');
const app = express();
app.use(express.json());
app.use(express.static('public'));

app.post('/zeptat-se', async (req, res) => {
  const { otazka } = req.body;

  const odpoved = await fetch('https://api.openai.com/v1/chat/completions', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${process.env.AI_KLIC}`,
    },
    body: JSON.stringify({
      model: 'gpt-4o-mini',
      messages: [
        { role: 'system', content: 'You are a friendly helper. Answer briefly in English.' },
        { role: 'user', content: otazka },
      ],
    }),
  });

  const data = await odpoved.json();
  res.json({ text: data.choices[0].message.content });
});

app.listen(3000, () => console.log('Server running at http://localhost:3000'));

Nouveautés ici :

• fetch peut aussi envoyer des données : method: 'POST' et body.
• Les headers avec Authorization – c’est là que la clé est présentée.
• role: 'system' – c’est ton prompt de la dernière leçon ! Il définit comment l’IA se comporte.
• process.env.AI_KLIC – la clé est lue depuis .env, pas écrite dans le code.

À toi 💪

1. Ajoute une ligne .env à .gitignore – vérifie avec la commande git status (le fichier .env ne doit pas apparaître).
2. Crée l’endpoint /zeptat-se en suivant l’exemple.
3. Pas de clé ? Pas de problème – retourne juste une réponse de test pour l’instant et continue à la prochaine leçon :

app.post('/zeptat-se', (req, res) => {
  res.json({ text: `Test answer to: "${req.body.otazka}"` });
});

4. Essaie l’endpoint depuis le navigateur (console F12) :

const r = await fetch('/zeptat-se', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ otazka: 'Hi, who are you?' }),
});
console.log(await r.json());

Ce que tu retiens de cette leçon

• Les clés secrètes vont sur le serveur dans .env, jamais dans le navigateur ou dans Git.
• fetch peut faire du POST – il envoie des données dans body, et la clé dans headers.
• Le prompt système façonne la personnalité de ton assistant IA.

© 2026 Ing. Martin Polak / AlgoRhino · Conditions d'utilisation du contenu