AI auf dem Server

Warum wir AI nicht direkt aus dem Browser aufrufen

AI-Dienste (OpenAI, Anthropic und andere) verlangen einen API-Schlüssel – einen Geheimcode, der dich identifiziert und für die Abrechnung genutzt wird. Und hier ist der Haken:

Alles, was du in JavaScript im Browser einbaust, kann jeder lesen (F12 → Quellcode). Wäre dein Schlüssel dort, könnte jeder die AI auf deine Kosten nutzen.

Die Lösung kennst du schon aus dem Meister: dein eigener Server. Der Schlüssel bleibt auf dem Server, und der Browser spricht nur mit deinem Server:

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

Zeig mir das: der /zeptat-se-Endpunkt

Wir bauen auf dem Express-Server aus dem Meister auf. Den Schlüssel speichern wir in einer .env-Datei (die kommt niemals auf GitHub – füge sie zu .gitignore hinzu!):

AI_KLIC=sk-your-secret-key-here

Und der Server bekommt einen neuen Endpunkt:

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

Was hier neu ist:

• fetch kann auch Daten senden: method: 'POST' und body.
• Die headers mit Authorization – dort wird der Schlüssel vorgelegt.
• role: 'system' – das ist dein Prompt aus der letzten Lektion! Er definiert, wie sich die AI verhält.
• process.env.AI_KLIC – der Schlüssel wird aus .env gelesen, nicht im Code geschrieben.

Jetzt du 💪

1. Füge eine Zeile .env zu .gitignore hinzu – prüfe es mit dem Befehl git status (die .env-Datei darf nicht erscheinen).
2. Erstelle den /zeptat-se-Endpunkt nach dem Beispiel.
3. Kein Schlüssel? Kein Problem – gib vorerst eine Testantwort zurück und mach mit der nächsten Lektion weiter:

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

4. Probiere den Endpunkt im Browser aus (F12-Konsole):

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

Das nimmst du aus dieser Lektion mit

• Geheime Schlüssel gehören auf den Server in .env, niemals in den Browser oder in Git.
• fetch kann POST – es sendet Daten im body und den Schlüssel in headers.
• Der System-Prompt formt die Persönlichkeit deiner AI-Helferin.

© 2026 Ing. Martin Polak / AlgoRhino · Nutzungsbedingungen für Inhalte