この講座で学べること

1. なぜAIチャットUIを学ぶのか

ChatGPT や Claude のように「1文字ずつ応答が流れる」チャット画面は、AIをユーザに届けるうえで最も需要が高いUIの1つです。応答完了までブラックボックスで待たせる設計と比べて、ストリーミングで生成過程が見える設計は体感速度・インタラクション性の両面で大きな差が出ます。

この講座では、AWS LambdaのFunction URLを介してBedrock上のClaudeモデルからストリーミング応答を受け取り、ブラウザ側で1チャンクずつ読み進めてリアルタイム表示するチャットUIを構築します。フロントエンド講座で学んだNext.js（App Router）とTypeScript、AI基盤講座で学んだBedrockを組み合わせて、業務でよく作られる形のAIチャットUIを1つ完成させる応用体験の場です。

1.1 こんな方におすすめ

業務でAIチャットUIを組み立てる感覚を掴みたい方
Bedrockのストリーミング応答をフロントエンドまで通す一連の実装を体験したい方
Next.jsのRoute Handlerでストリーミングプロキシを組む書き方を身につけたい方
ブラウザ側のReadableStreamとAbortControllerを扱うReact実装を書けるようになりたい方

1.2 学べること・身につくこと

この講座を修了すると、以下のスキルが身につきます。

スキル	内容
Lambdaのストリーミング応答	Function URLのResponse Streamingモードで、Bedrockからのチャンクをそのままクライアントに流せる
Route Handlerによるプロキシ	Next.jsのRoute Handlerで`ReadableStream`を詰め替え、Function URLをブラウザから隠せる
ブラウザ側のストリーム処理	`Response.body.getReader()`と`TextDecoder`でチャンクを1つずつ読みながらUIを逐次更新できる
中断制御とエラー処理	`AbortController`で生成途中の停止ボタンを実装し、`try/catch`でネットワーク・Lambda側エラーへの対処を組み込める
Markdownレンダリング	`react-markdown`でAI応答のMarkdownを整形表示し、実用的な見た目に仕上げられる

2. 章一覧

3. 学習の流れ

3.1 事前に学んだほうが良い講座

本講座を始める前に、以下を学んでおくと理解がスムーズです。

講座名	事前に学ぶ理由
AI基盤講座	Bedrockの初回利用フォームの承認とLambdaからのConverse API呼び出しを扱うため
フロントエンド講座	Next.js（App Router）でのSPA構築とTypeScriptの基本を扱うため