ChatGPTライクなUIを実装する【FastAPI + Next.js】 - Qiita

目次 完成イメージ バックエンド(FastAPI)の実装 フロントエンド(Next.js)の実装 成果物 完成イメージ ChatGPTのようにレスポンスを1文字ずつ表示する仕組みを作りたい。 バックエンドの実装 app/routers/chatai.py ファイルを作成し、streamレスポンスを返すプログラムを書く。 以下のファイルを作っただけではもちろん動かないので、main.pyでインスタンスを書いてあげよう。 import openai from fastapi import APIRouter, Request from fastapi.responses import StreamingResponse router = APIRouter() def chatgpt_streamer(msg: str): openai.api_key = "ここにはあなたのopenaiのap