§03-01
AI サイドバー / コパイロット panel
画面の脇に AI チャットを常駐させる。
作業中の画面を離れずに AI へ質問や指示ができる。文書作成や調査のように、本文を見ながら補助を受けたい作業に向く。
実装のポイント本文とパネルを並べ、パネル幅は可変かつ折りたたみ可能にする。選択中のテキストや開いているドキュメントを文脈としてプロンプトに自動で添える。
- モック
§03
AI 統合
AI
- Patterns
- 16
- Demos
- 16
§03-02
インライン AI suggestion
入力中の続きを薄い文字で提案し確定で挿入する。
文章やコードの続きをその場で受け取り、入力の手間を減らせる。定型的な文面やよくある補完が多い入力欄で、流れを止めずに提案したいときに使う。
実装のポイント提案は本文と同じ位置に薄色で重ね、Tab で確定、入力継続で破棄する。入力のたびにリクエストせず、デバウンスと AbortController で古い提案を捨てる。
- モック
- キーボード操作
§03-03
"Ask anything" 検索
質問文をそのまま入力して答えを探せる。
キーワードを組み立てなくても、知りたいことを文のまま聞ける。検索の語彙を知らない人や、答えを一つに絞りたい場面で効く。
実装のポイント例文チップで質問の書き方を示し、空欄の不安を減らす。回答はストリーミングで返し、根拠になったデータへのリンクを添える。
- モック
§03-05
自動タグ付け / 分類
内容から LLM がタグや分類を自動付与する。
手入力のタグ付けの手間を減らし、分類の漏れを防ぐ。メモや記事、問い合わせの量が多く整理が追いつかない場面で効く。
実装のポイント生成したタグは提案として表示し、利用者が個別に削除・確定できるようにする。既存タグ語彙に寄せると表記揺れが増えない。
- モック
§03-06
Semantic search
言葉の意味の近さで文書を検索する。
表記が違っても意味が近い文書を見つけられ、言い換えや曖昧な問いにも結果を返せる。キーワード検索で取りこぼしが多いナレッジ検索に効く。
実装のポイント文書とクエリを埋め込みベクトルに変換し、コサイン類似度で並べる。キーワード検索と併用するハイブリッド検索にすると固有名詞の取りこぼしが減る。
- モック
§03-07
AI compose / 書き出し補助
テンプレートを選ぶと下書きの文章を生成する。
白紙から書き始める負担を下げ、叩き台を素早く用意できる。返信メールや告知文など、書き出しで手が止まりやすい入力欄に向く。
実装のポイントテンプレ選択で下書きを流し込み、利用者が編集してから使う前提にする。既存の入力がある場合は上書き前に確認するか、カーソル位置へ挿入する。
- モック
- フォーム
§03-08
Ghost text autocomplete
入力の続きを薄い文字で提案し Tab で確定する。
入力中に続きの候補を示して打鍵を減らす。定型文やコードのように続きが予測しやすい入力で、手を止めずに補助したいときに向く。
実装のポイントtextarea の背後に同じフォント・余白の pre を重ねて薄文字を描く。Tab は提案がある時だけ preventDefault し、それ以外はフォーカス移動に使わせる。
- キーボード操作
§03-09
プロアクティブ suggestion
文脈に応じた次の操作をチップで提案する。
利用者が次に何をすべきか迷う前に候補を示し、操作の手数を減らす。文章の選択後や作業の停滞時に効く。
実装のポイント提案は操作のきっかけ（選択・停止時間など）に合わせて出し、却下したものは一定期間再表示しない。チップ自体を押せば実行できるようにする。
- 状態管理
§03-10
AI チャット履歴 / フォーク
AI との会話を保存し、途中から分岐できるようにする。
過去の会話を一覧から呼び出し、任意の時点から別の方向へやり直せる。試行錯誤の多い対話で、元の流れを壊さずに比較したいときに使う。
実装のポイント会話をメッセージの親子関係で持ち、任意のメッセージから分岐した枝を tree として保存する。履歴一覧には最新の枝を代表として出す。
- 状態管理
§03-11
プロンプトテンプレ / library
よく使うプロンプトを保存して呼び出せる。
同じ指示を毎回打ち直す手間をなくし、チームで良い指示を共有できる。AI 機能を繰り返し使う業務で、品質を揃えたいときに使う。
実装のポイントテンプレは {{変数}} のプレースホルダを持たせ、呼び出し時にフォームで埋める。コピー時は navigator.clipboard.writeText で書き込み、完了をトーストで知らせる。
- ブラウザ API
§03-12
Trace / token 表示
AI の処理過程とトークン消費を一覧で示す。
生成結果がどの手順と費用で得られたかを可視化する。開発者や管理者が応答の遅さやコストの原因を探るときに効く。
実装のポイントステップごとに入出力トークンと所要時間を並べ、合計行で全体コストを示す。数値は tabular-nums で右揃えにし、桁を比較しやすくする。
- モック
§03-13
Citation / 出典リンク
回答の根拠となる出典へリンクする。
生成された回答がどの情報に基づくかを確認でき、誤りを見分けやすくなる。正確性が問われる検索や要約の回答に添える。
実装のポイント本文中の番号を出典リストへのアンカーリンクにし、ホバーでプレビューを出す。出典 URL は rel=「noopener」付きの新規タブで開く。
- アクセシビリティ
§03-14
AI 画像生成 in-app
入力したプロンプトから画像を生成して表示する。
アプリ内で説明文から画像を作り、外部ツールを往復せずに使える。挿絵やサムネイルなど、素材を用意する手間を省きたい場面に向く。
実装のポイント生成中は出力枚数ぶんのプレースホルダを skeleton で確保し、レイアウトのずれを防ぐ。生成は時間がかかるので中断ボタンと進捗表示を用意する。
- モック
- 非同期
§03-15
Voice mode
音声で話しかけて AI と対話できる。
手が離せない場面や長文入力が面倒なときに、話すだけで操作できる。移動中の利用や、キーボードが使いにくい端末でも使いやすい。
実装のポイントgetUserMedia でマイクを取得し、AnalyserNode の周波数データで波形を描く。録音中は状態を色とテキストで示し、停止時はトラックを stop する。
- モック
- アニメーション