本文へ移動

§03-02AI

インライン AI suggestion

入力中の続きを薄い文字で提案し確定で挿入する。

文章やコードの続きをその場で受け取り、入力の手間を減らせる。定型的な文面やよくある補完が多い入力欄で、流れを止めずに提案したいときに使う。

実装のポイント

提案は本文と同じ位置に薄色で重ね、Tab で確定、入力継続で破棄する。入力のたびにリクエストせず、デバウンスと AbortController で古い提案を捨てる。

特徴
  • モック
  • キーボード操作
デモで使っているもの
  • lucide-react

このパターンが効く目的