小さく作る設計(入力→AI→表示)

まず「一直線」を紙に書く

AIプロダクトと聞くと難しそうですが、最初に作るものは驚くほど単純です。やることは3つだけ。ユーザーが何かを入力する、その入力をAIに渡す、返ってきた答えを画面に表示する。この「入力→AI→表示」の一直線を、コードを書く前に日本語で書き出しておくと、途中で迷いません。

たとえば要約ツールなら「長い文章を入力→AIに要約させる→短い要約を表示」。チャットなら「質問を入力→AIに答えさせる→回答を表示」。どちらも形は同じです。まず形を決めて、あとから中身を埋めていきます。

UIとサーバーの役割分担

ここで大事な分け方が「UI(画面)」と「サーバー」です。UIはユーザーが触る部分で、入力欄やボタン、結果の表示を担当します。サーバーはユーザーから見えない裏方で、AIの会社(OpenAIなど)に問い合わせる部分です。この2つを混ぜないことが、安全で分かりやすいアプリの鍵になります。

なぜ分けるのか。AIを呼ぶには「APIキー」という秘密のパスワードが必要です。これをUI(ブラウザで動くコード)に置くと、誰でも見られてしまい悪用されます。だからAIを呼ぶ処理はサーバー側(APIルート（route.ts）)に置き、UIはそのサーバーにお願いするだけにします。

// ブラウザで動くコードに秘密キーを書く
const res = await fetch("https://api.openai.com/v1/chat/completions", {
  headers: { Authorization: "Bearer sk-秘密のキー" }
});
// キーが誰にでも見えてしまう

// UI側: 自分のサーバーに頼むだけ
const res = await fetch("/api/chat", {
  method: "POST",
  body: JSON.stringify({ message: input })
});
// キーはサーバーの中だけにある

型で「境界」を守る

UIとサーバーの間でやり取りするデータの形を、型で決めておきます。たとえば「UIは message という文字列を送る」「サーバーは reply という文字列を返す」と決めれば、両者が同じ約束の上で動けます。この約束をinterfaceで書いておくのがコツです。

// リクエスト(UI → サーバー)の形
interface ChatRequest {
  message: string;
}

// レスポンス(サーバー → UI)の形
interface ChatResponse {
  reply: string;
}

1. 作るものの一直線(入力→AI→表示)を日本語で書く
2. UI(画面)とサーバー(AIを呼ぶ裏方)を分ける
3. 秘密のAPIキーはサーバー側だけに置く
4. UIとサーバーがやり取りするデータの形を型で決める