Features
機能一覧
デモを組み立てる部品として、最小単位で実装した機能の一覧です。各ページで単体の動作を確認できます。
UIパターン7件
ダークモード切り替え
ライト / ダーク / システム設定をlocalStorageに保存して切り替える
theme-toggle
モーダルダイアログ
ネイティブ <dialog> を使ったアクセシブルなモーダル
modal-dialog
タブ切り替え
キーボード操作に対応した汎用タブUI
tabs
スケルトンローディング
Suspense の fallback による読み込み中プレースホルダー
skeleton-loading
クリップボードコピー
コピーボタンと成功フィードバック表示
copy-to-clipboard
トースト通知
Context経由でどこからでも呼べる一時通知UI
toast-notification
ライブステータスボード
状態が変わった瞬間にカードが列を移動するカンバンUI
live-status-board
フォーム・入力4件
データ操作6件
認証・ユーザー6件
メール / パスワード認証
要設定Supabase Authでのサインアップ・ログイン・ログアウト
auth-email-password
OAuthログイン
要設定Google / GitHub などのソーシャルログイン
auth-oauth
マジックリンク認証
要設定パスワード不要でメールのリンクからログインする
auth-magic-link
ルート保護
要設定proxy.ts(旧middleware)で未ログイン時にリダイレクトする
auth-protected-route
ロール・権限管理
ロードしたロールに応じてUIと操作を出し分ける (RBAC)
auth-roles
プロフィール編集
表示名・自己紹介・アイコンの更新フォーム
user-profile-edit
リアルタイム・通知3件
AI / LLM6件
OpenAI Chat
要設定OpenAI Responses APIで1往復の会話を行う最小実装
openai-chat
AIストリーミング応答
要設定Server-Sent EventsでAI応答を逐次表示する
ai-streaming
RAG(ベクトル検索)
要設定埋め込みベクトルのコサイン類似度で関連文書を検索して回答する
ai-rag-search
AI画像生成
要設定プロンプトから画像を生成して表示する
ai-image-generation
音声文字起こし
要設定音声ファイルをアップロードしてテキスト化する
ai-speech-to-text
AIエージェント実行
要設定計画・思考・ツール呼び出しをSSEで逐次配信し、自律的にタスクを処理する過程を見せる(未設定時は内蔵シナリオ)
ai-agent-run
決済3件
運用・インフラ6件
APIレート制限
IP単位のスライディングウィンドウによるリクエスト制限
rate-limiting
キャッシュ / 再検証
unstable_cache と updateTag / revalidatePath によるキャッシュ制御
caching-isr
エラーハンドリング / ロギング
error.tsx によるエラーバウンダリとログ送信
error-logging
Feature Flag
環境変数とCookieで機能の有効 / 無効を切り替える
feature-flag
国際化 (i18n)
Cookieベースの言語切り替えと辞書による表示切り替え
i18n
SEO / OGP画像生成
generateMetadata と ImageResponse による動的OGP画像
seo-og-image