AI på serveren

Byg et serverendpoint, der taler med AI – og skjuler din hemmelige nøgle for verden.

Hvorfor vi ikke kalder AI direkte fra browseren

AI-tjenester (OpenAI, Anthropic og andre) kræver en API-nøgle – en hemmelig kode, der identificerer dig og bruges til fakturering. Og her er fangen:

Alt du putter i JavaScript i browseren, kan alle læse (F12 → kildekode). Hvis din nøgle var der, kunne alle kalde AI med dine penge.

Du kender allerede løsningen fra Mester: din egen server. Nøglen bliver på serveren, og browseren taler kun med din server:

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

Vis mig: /zeptat-se-endpointet

Vi bygger videre på Express-serveren fra Mester. Vi gemmer nøglen i en .env-fil (den kommer aldrig på GitHub – tilføj den til .gitignore!):

AI_KLIC=sk-your-secret-key-here

Og serveren får et nyt 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'));

Hvad der er nyt her:

fetch kan også sende data: method: 'POST' og body.
headers med Authorization – det er der, nøglen præsenteres.
role: 'system' – det er din prompt fra sidste lektion! Den definerer, hvordan AI opfører sig.
process.env.AI_KLIC – nøglen læses fra .env, ikke skrevet i koden.

💡

Hvor får jeg en nøgle fra? AI-tjenester udsteder API-nøgler efter registrering – og det er normalt betalt (men billigt, bare cent per svar). Det er en opgave for en forælder: bed dem om at oprette en nøgle til dig og tilføje et lille beløb (et par dollars er nok). Uden nøgle kan du stadig teste med et opdigtet svar – se “Nu er det din tur” nedenfor.

Nu er det din tur 💪

Tilføj en linje .env til .gitignore – tjek med kommandoen git status (.env-filen må ikke vises).
Opret /zeptat-se-endpointet efter eksemplet.
Har du ingen nøgle? Intet problem – returner bare et testsvar for nu og fortsæt til næste lektion:

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

Prøv endpointet fra browseren (F12-konsol):

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

✅

Tjek: Serveren svarer på POST /zeptat-se (med et test- eller rigtigt AI-svar), og den hemmelige nøgle er hverken i koden eller på GitHub.

Det tager du med fra denne lektion

Hemmelige nøgler hører til på serveren i .env, aldrig i browseren eller i Git.
fetch kan lave POST – den sender data i body, og nøglen i headers.
Systemprompten former personligheden på din AI-hjælper.

Denne lektion er en del af et betalt niveau

Hvorfor vi ikke kalder AI direkte fra browseren

Vis mig: /zeptat-se-endpointet

Nu er det din tur 💪

Det tager du med fra denne lektion