AI na serveru

Proč AI nevoláme přímo z prohlížeče

AI služby (OpenAI, Anthropic a další) vyžadují API klíč – tajný kód, kterým se prokazuješ a podle kterého se platí. A tady je háček:

Cokoli dáš do JavaScriptu v prohlížeči, si může kdokoli přečíst (F12 → zdrojový kód). Kdyby tam byl tvůj klíč, kdokoli by za tvoje peníze mohl volat AI.

Řešení znáš z Mistra: vlastní server. Klíč zůstane na serveru, prohlížeč mluví jen s tvým serverem:

Prohlížeč  →  tvůj server (klíč je tady!)  →  AI služba
Prohlížeč  ←  tvůj server                  ←  AI služba

Ukaž mi to: endpoint /zeptat-se

Navážeme na Express server z Mistra. Klíč uložíme do souboru .env (ten se nikdy nedává na GitHub – přidej ho do .gitignore!):

AI_KLIC=sk-tady-je-tvuj-tajny-klic

A server dostane nový 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: 'Jsi přátelský pomocník. Odpovídej česky a stručně.' },
        { role: 'user', content: otazka },
      ],
    }),
  });

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

app.listen(3000, () => console.log('Server běží na http://localhost:3000'));

Co je tu nového:

• fetch umí i posílat data: method: 'POST' a body.
• headers s Authorization – tam se prokazuje klíč.
• role: 'system' – to je tvůj prompt z minulé lekce! Určuje, jak se AI chová.
• process.env.AI_KLIC – klíč se čte z .env, v kódu není.

Teď ty 💪

1. Přidej do .gitignore řádek .env – ověř si to příkazem git status (soubor .env nesmí být vidět).
2. Vytvoř endpoint /zeptat-se podle vzoru.
3. Nemáš klíč? Nevadí – vrať zatím testovací odpověď a pokračuj do další lekce:

app.post('/zeptat-se', (req, res) => {
  res.json({ text: `Testovací odpověď na: „${req.body.otazka}"` });
});

4. Vyzkoušej endpoint z prohlížeče (konzole F12):

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

Co si z téhle lekce odnést

• Tajné klíče patří na server do .env, nikdy do prohlížeče ani do Gitu.
• fetch umí POST – posílá data v body, klíč v headers.
• Systémový prompt určuje osobnost AI pomocníka.

© 2026 Ing. Martin Polak / AlgoRhino · Podmínky užití obsahu