AIプロダクトの構成(UI→APIルート→LLM)

AIプロダクトは「3人の登場人物」でできている

「AIを使ったアプリ」と聞くと難しそうですが、登場人物は3つだけです。ユーザーが触る画面(UI)、あなたのサーバー(APIルート)、そして文章を生成するLLM(大規模言語モデル。ChatGPTやClaudeの中身にあたるAI)です。この3つが順番にバケツリレーをするだけ、と考えると一気に楽になります。

1. UI(画面): ユーザーが入力し、結果を見る場所。ブラウザで動く。
2. APIルート(サーバー): 画面からのお願いを受け取り、LLMに橋渡しする中継役。あなたのサーバーで動く。
3. LLM: 実際に文章を生成するAI。会社(OpenAIやAnthropicなど)のサーバーで動く。

流れはいつも一方向です。ユーザーが画面に「猫の俳句を作って」と入力する → 画面がAPIルート（route.ts）(サーバー)にお願いを送る → サーバーがLLMに問い合わせる → LLMが答えを返す → サーバーが画面に渡す → 画面が表示する。この一本道を頭に入れておけば、どこで何が起きているか迷いません。

APIキーは絶対にサーバー側に置く

APIキー(APIキー = LLMの会社があなたを識別し、料金を請求するための秘密のパスワードのようなもの)は、他人に知られると勝手に使われて高額請求につながります。ブラウザに置いたコードは、ユーザーが「開発者ツール」を開けば中身を読めてしまうので、キーを置いてはいけません。逆にサーバー側のコードはユーザーからは見えないので、ここに置くのが正解です。

"use client";

// このコードはブラウザで動く。ユーザーに全部見える
const apiKey = "sk-abcd1234..."; // 丸見え。悪用される

async function ask() {
  await fetch("https://api.example-llm.com/chat", {
    headers: { Authorization: "Bearer " + apiKey }
  });
}

// これはサーバーで動く。ユーザーからは見えない
// process.env は環境変数(サーバーだけが読める設定置き場)
const apiKey = process.env.LLM_API_KEY;

// 画面からはこの中継役にお願いするだけ。キーは渡さない

実装そのものはAIに任せてよいのですが、「なぜサーバーを挟むのか」「キーがどこにあるのか」はあなたが説明できる必要があります。ここを理解していれば、AIが生成したコードがブラウザにキーを書いてしまっていても「これは危険だ」と一目で気づけます。