サーバー上の AI

ブラウザから直接 AI を呼ばない理由

AI サービス（OpenAI、Anthropic など）は API キー が必要——あなたを識別し、課金に使う秘密コード。問題は：

ブラウザの JavaScript に入れたものは誰でも読める（F12 → ソース）。キーがそこにあったら、誰でもあなたのお金で AI を呼べる。

マスターで知った解決策：自分のサーバー。キーはサーバーに、ブラウザはサーバーだけと話す：

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

見てみよう：/zeptat-se エンドポイント

マスターの Express サーバーをベースに。キーは .env ファイル（絶対 GitHub に載せない——.gitignore に！）：

AI_KLIC=sk-your-secret-key-here

サーバーに新エンドポイント：

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

新しいもの：

• fetch も 送れる：method: 'POST' と body。
• Authorization 付き headers——キーを提示。
• role: 'system'——前レッスンのプロンプト！ AI の振る舞いを定義。
• process.env.AI_KLIC——.env から読む、コードに書かない。

やってみよう 💪

1. .gitignore に .env を追加——git status で確認（.env が出てはいけない）。
2. 例に従って /zeptat-se エンドポイントを作成。
3. キーがない？ 問題なし——テスト返答だけ返して次のレッスンへ：

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

4. ブラウザ（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());

このレッスンのまとめ

• 秘密キーは .env のサーバー上、ブラウザや Git には絶対載せない。
• fetch は POST も——body でデータ、headers でキー。
• システムプロンプトが AI ヘルパーの性格を形作る。

© 2026 Ing. Martin Polak / AlgoRhino · コンテンツ利用規約