AI op de server

Bouw een server-endpoint die met AI praat – en verberg je geheime sleutel voor de wereld.

Waarom we AI niet rechtstreeks vanuit de browser aanroepen

AI-diensten (OpenAI, Anthropic en anderen) vragen een API-sleutel – een geheime code die jou identificeert en voor de facturatie wordt gebruikt. En hier is de catch:

Alles wat je in JavaScript in de browser zet, kan iedereen lezen (F12 → broncode). Als je sleutel daar stond, kon iedereen de AI aanroepen op jouw kosten.

De oplossing ken je al van Master: je eigen server. De sleutel blijft op de server, en de browser praat alleen met jouw server:

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

Ik laat je zien: het endpoint /zeptat-se

We bouwen voort op de Express-server van Master. We bewaren de sleutel in een .env-bestand (dat gaat nooit naar GitHub – zet het in .gitignore!):

AI_KLIC=sk-your-secret-key-here

En de server krijgt een nieuw 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'));

Wat is hier nieuw:

fetch kan ook data sturen: method: 'POST' en body.
De headers met Authorization – daar wordt de sleutel getoond.
role: 'system' – dat is je prompt uit de vorige les! Die bepaalt hoe de AI zich gedraagt.
process.env.AI_KLIC – de sleutel wordt uit .env gelezen, niet in de code geschreven.

💡

Waar krijg ik een sleutel? AI-diensten geven API-sleutels na registratie – en het is meestal betaald (al is het goedkoop, centen per antwoord). Dit is een taak voor een ouder: vraag hen een sleutel voor je te maken en een klein tegoed te laden (een paar dollar is genoeg). Zonder sleutel kun je nog steeds testen met een verzonnen antwoord – zie “Jij bent aan de beurt” hieronder.

Jij bent aan de beurt 💪

Voeg de regel .env toe aan .gitignore – check het met het commando git status (het bestand .env mag niet verschijnen).
Maak het endpoint /zeptat-se volgens het voorbeeld.
Geen sleutel? Geen probleem – stuur voorlopig gewoon een testantwoord terug en ga door naar de volgende les:

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

Probeer het endpoint vanuit de browser (F12-console):

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());

✅

Check: De server antwoordt op POST /zeptat-se (met een test- of echt AI-antwoord), en de geheime sleutel staat noch in de code, noch op GitHub.

Wat je meeneemt

Geheime sleutels horen op de server in .env, nooit in de browser of in Git.
fetch kan POST – het stuurt data in body, en de sleutel in headers.
De system prompt vormt de persoonlijkheid van je AI-helper.

Deze les maakt deel uit van een betaald niveau

Waarom we AI niet rechtstreeks vanuit de browser aanroepen

Ik laat je zien: het endpoint /zeptat-se

Jij bent aan de beurt 💪

Wat je meeneemt