本文へ移動

§03-16AI

ストリーミング表示

生成中の文章を届いた順に逐次表示する。

AI の応答が完成するまで待たせず、途中から読み始められるようにする。応答に数秒以上かかる対話画面で待ちの不安を減らす。

実装のポイント

チャンクを受け取るたびに追記し、末尾にカーソルを置いて生成中を示す。読み上げは 1 文字ずつ通知せず、aria-busy で生成中を伝え完了時にまとめて知らせる。

特徴
  • アニメーション
  • タイマー
  • モック
デモで使っているもの
  • motion
  • shadcn/ui
  • lucide-react

このパターンが効く目的