ストリーミングの考え方(応答を逐次表示する)

// LLMがストリーミング対応で返してくると、res.body は
// 「少しずつ読める入れ物」になっている
export async function POST(req: Request): Promise<Response> {
  const { prompt } = (await req.json()) as { prompt: string };

  const llmRes = await fetch("https://api.example-llm.com/v1/messages", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: "Bearer " + process.env.LLM_API_KEY
    },
    body: JSON.stringify({ prompt, stream: true }) // 流して返してと頼む
  });

  // 届いた流れ(body)をそのまま画面へ受け渡す
  return new Response(llmRes.body, {
    headers: { "Content-Type": "text/plain; charset=utf-8" }
  });
}

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

export function Chat() {
  const [answer, setAnswer] = useState<string>("");

  async function send(prompt: string) {
    setAnswer("");
    const res = await fetch("/api/chat", {
      method: "POST",
      body: JSON.stringify({ prompt })
    });

    // res.body から少しずつ読み、届いた分を足していく
    const reader = res.body!.getReader();
    const decoder = new TextDecoder();
    while (true) {
      const { value, done } = await reader.read();
      if (done) break; // もう届かない
      setAnswer((prev) => prev + decoder.decode(value));
    }
  }

  return <p>{answer}</p>;
}