AI・生成体験
プロンプト候補チップ
空のチャット画面に候補チップを並べ、タップすると入力欄に流し込まれ、AIの返答が1文字ずつストリーミング表示される。空白画面の離脱対策。
プレビュー
クリック
操作クリック／タップで動きます。
実装メモ
空のチャット画面（エンプティステート）で、ユーザーが最初の一手に迷わないよう候補チップを提示するパターンです。Notion AI・Linear などのオンボーディングで定番。チップを押すと入力に反映され、AIの返答を1文字ずつ流し込むストリーミング風表示を setTimeout で擬似再現しています。実運用ではストリーミングAPIのトークン受信ごとに追記します。prefers-reduced-motion では一括表示に切り替わります。
コード（コピーして使えます）
<div class="ps-chat">
<div class="ps-thread" id="ps-thread">
<div class="ps-empty" id="ps-empty">
<div class="ps-empty-icon">✦</div>
<p class="ps-empty-text">何から始めますか？</p>
</div>
</div>
<div class="ps-chips" id="ps-chips">
<button class="ps-chip" data-a="要点を3つにまとめるので、文章を貼り付けてください。箇条書きで整理します。">📝 文章を要約</button>
<button class="ps-chip" data-a="原文を貼り付けてください。自然な英語に翻訳し、必要ならトーンも調整します。">🌐 英語に翻訳</button>
<button class="ps-chip" data-a="テーマを教えてください。切り口を変えたアイデアを10個、すぐに出します。">💡 アイデア出し</button>
</div>
<div class="ps-inputbar">
<input class="ps-input" id="ps-input" placeholder="メッセージを入力" readonly>
<span class="ps-send" aria-hidden="true">↑</span>
</div>
</div>