Day 7・小さなAIプロダクトを完成させる(実践)

実践: AIチャット(要約)UIを完成させる

入力欄・ボタン・表示をつなぎ、サーバー経由でAIを呼ぶ最小のUIを作る。

画面(UI)を組み立てる

前のレッスンで決めた設計を、実際のコードにしていきます。ここではReactの部品(で書くtsx)を使います。必要なのは3つ。入力欄、送信ボタン、結果を表示する場所です。入力中の文字や結果はという仕組みで覚えておきます。

AIにはこう聞く

「入力欄・送信ボタン・結果表示だけのシンプルなReactコンポーネントをTypeScript(tsx)で。useStateで入力と結果を管理し、送信で/api/chatにPOSTして、返ってきたreplyを表示して」。役割を細かく伝えるほど、直しやすいコードが返ってきます。

TSX

"use client";
import { useState } from "react";

export default function ChatBox() {
  const [input, setInput] = useState("");
  const [reply, setReply] = useState("");
  const [loading, setLoading] = useState(false);

  async function send() {
    setLoading(true);
    const res = await fetch("/api/chat", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ message: input }),
    });
    const data: { reply: string } = await res.json();
    setReply(data.reply);
    setLoading(false);
  }

  return (
    <div>
      <textarea value={input} onChange={(e) => setInput(e.target.value)} />
      <button onClick={send} disabled={loading}>
        {loading ? "考え中..." : "送信"}
      </button>
      <p>{reply}</p>
    </div>
  );
}

最小のチャット/要約UI(表示用)

ポイントは data の型を { reply: string } と書いているところです。サーバーが返す形を型で書いておくと、data.replay のようにタイプミスした瞬間にエディタが赤線で教えてくれます。AIが書いたコードを貼り付けたときも、この型があるとズレにすぐ気づけます。

サーバー(APIルート)を作る

次に、UIからのお願いを受けてAIを呼ぶサーバー側です。Next.jsでは決まった場所にファイルを置くとになります。ここで受け取った message をAIに渡し、返事を reply として返します。async/awaitでAIの返事を待つのがポイントです( )。

TYPESCRIPT

import { NextResponse } from "next/server";

interface ChatRequest {
  message: string;
}

export async function POST(req: Request) {
  const body: ChatRequest = await req.json();

  // AIの会社に問い合わせる(キーはサーバーの環境変数から)
  const ai = await callAI(body.message);

  return NextResponse.json({ reply: ai });
}

app/api/chat/route.ts(サーバー側・表示用)

APIキーは環境変数に

APIキーはコードに直接書かず、環境変数(process.env.OPENAI_API_KEYなど)から読みます。コードをそのまま公開してもキーが漏れないためです。Vercelでは管理画面から環境変数を設定します。

つながりを確認する

UIの入力欄に文字を打つと input が更新される
送信ボタンで /api/chat に message を送る
サーバーが message を受け取りAIを呼ぶ
AIの返事を reply として返す
UIが reply を受け取って画面に表示する

この5ステップが全部つながれば、あなたのAIプロダクトは動きます。最初から完璧を目指さず、まず「入力した文字がそのまま返ってくる」ところまで作り、次にAI呼び出しに差し替える、と段階を分けると詰まりにくいです。

読んでも腑に落ちない所は、AIに噛み砕いてもらいましょう。

理解度チェック

答えられれば、面接で説明できる状態に一歩近づきます。

UI側で const data: { reply: string } = await res.json(); と型を書く利点は?

AIの返事を待つために使う仕組みはどれ?

入力→AI→表示のUIとサーバーが、どう連携して1回の応答が完成するか説明してください。

記述式です。まず自分の言葉で答えを考えてから、模範解答を開いて自己採点してください。