AI na serwerze

Dlaczego nie wołamy AI prosto z przeglądarki

Usługi AI (OpenAI, Anthropic i inne) wymagają klucza API – tajnego kodu, który cię identyfikuje i służy do rozliczeń. A tu jest haczyk:

Wszystko, co włożysz do JavaScriptu w przeglądarce, może przeczytać każdy (F12 → kod źródłowy). Gdyby klucz tam był, ktoś mógłby wołać AI za twoje pieniądze.

Rozwiązanie znasz już z poziomu Mistrza: własny serwer. Klucz zostaje na serwerze, a przeglądarka rozmawia tylko z twoim serwerem:

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

Pokażę ci: endpoint /zeptat-se

Zbudujemy na serwerze Express z poziomu Mistrza. Klucz schowamy w pliku .env (ten nigdy nie trafia na GitHub – dodaj go do .gitignore!):

AI_KLIC=sk-your-secret-key-here

A serwer dostaje nowy 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'));

Co tu jest nowego:

• fetch potrafi też wysyłać dane: method: 'POST' i body.
• headers z Authorization – tu prezentujesz klucz.
• role: 'system' – to twój prompt z poprzedniej lekcji! Określa, jak AI się zachowuje.
• process.env.AI_KLIC – klucz czyta się z .env, nie wpisuje w kod.

Teraz ty 💪

1. Dopisz linię .env do .gitignore – sprawdź komendą git status (plik .env nie może się pokazać).
2. Stwórz endpoint /zeptat-se według przykładu.
3. Nie masz klucza? Spoko – na razie zwróć testową odpowiedź i idź do następnej lekcji:

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

4. Wypróbuj endpoint z przeglądarki (konsola F12):

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

Co wyniesiesz z tej lekcji

• Tajne klucze należą na serwerze w .env, nigdy w przeglądarce ani w Gicie.
• fetch umie POST – dane wysyła w body, klucz w headers.
• Systemowy prompt kształtuje osobowość twojego pomocnika AI.

© 2026 Ing. Martin Polak / AlgoRhino · Warunki korzystania z treści