AI på servern

Bygg ett server-endpoint som pratar med AI – och göm din hemliga nyckel från världen.

Varför vi inte anropar AI direkt från webbläsaren

AI-tjänster (OpenAI, Anthropic och andra) kräver en API-nyckel – en hemlig kod som identifierar dig och används för fakturering. Och här är haken:

Allt du sätter in i JavaScript i webbläsaren kan vem som helst läsa (F12 → källkod). Om din nyckel låg där kunde vem som helst anropa AI med dina pengar.

Du kan redan lösningen från Mästaren: din egen server. Nyckeln stannar på servern, och webbläsaren pratar bara med din server:

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

Jag visar: /zeptat-se-endpointet

Vi bygger vidare på Express-servern från Mästaren. Vi sparar nyckeln i en .env-fil (den här aldrig på GitHub – lägg till i .gitignore!):

AI_KLIC=sk-your-secret-key-here

Och servern får ett nytt 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'));

Nytt här:

fetch kan också skicka data: method: 'POST' och body.
headers med Authorization – där visas nyckeln.
role: 'system' – det är din prompt från förra lektionen! Den definierar hur AI beter sig.
process.env.AI_KLIC – nyckeln läses från .env, inte skriven i koden.

💡

Var får jag en nyckel? AI-tjänster utfärdar API-nycklar efter registrering – och det är oftast betalt (men billigt, bara ören per svar). Det här är ett jobb för en förälder: be dem skapa en nyckel åt dig och lägga till lite kredit (några dollar räcker). Utan nyckel kan du fortfarande testa med ett påhittat svar – se “Nu är det din tur” nedan.

Nu är det din tur 💪

Lägg till raden .env i .gitignore – kolla med kommandot git status (.env-filen får inte synas).
Skapa /zeptat-se-endpointet efter exemplet.
Har du ingen nyckel? Inga problem – returnera bara ett testsvar för nu och fortsätt till nästa lektion:

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

Prova endpointet från webbläsaren (F12-konsolen):

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

✅

Kolla: Servern svarar på POST /zeptat-se (med test- eller riktigt AI-svar), och den hemliga nyckeln finns varken i koden eller på GitHub.

Det här tar du med dig från lektionen

Hemliga nycklar hör hemma på servern i .env, aldrig i webbläsaren eller i Git.
fetch kan göra POST – den skickar data i body, och nyckeln i headers.
Systemprompten formar personligheten hos din AI-hjälpare.

Den här lektionen ingår i en betald nivå

Varför vi inte anropar AI direkt från webbläsaren

Jag visar: /zeptat-se-endpointet

Nu är det din tur 💪

Det här tar du med dig från lektionen