本プロジェクトでは、AIが会話の流れに応じてインタラクティブなReactコンポーネントをリアルタイムで生成・描画する「Generative UI」機能を実装しています。
学習内容が図や数式・グラフで表現できると判断したとき、AIが自律的にビジュアライズを提案・生成します。ユーザーが「図にして」と明示的に依頼することも可能です。
テキストだけの説明には限界があります。たとえば：
- 数式・物理の法則 → グラフやアニメーションで変数の関係を体感できる
- 歴史の流れ → タイムラインで時系列を一望できる
- アルゴリズム → ステップごとのフローチャートで手順が追える
- 比較・分類 → 表やチャートで違いが一目でわかる
AIが会話内容に合わせて毎回カスタムのビジュアルを生成するため、汎用的な図ではなく「今まさに先生が説明した内容」をそのまま視覚化できます。前回生成したビジュアルを会話が進むにつれて積み上げ・拡張していくため、理解の深まりとともにビジュアルも成長します。インタラクティブな要素（アニメーション・ツールチップ・フィルタリングなど）も活用することで、ユーザーが自分で操作しながら理解を深められます。
AIが生成したコードを直接 eval() するのはXSSなどのセキュリティリスクがあります。本プロジェクトでは Sandpack を採用することで、以下を実現しています。
- 完全な分離実行: AIコードはCodeSandboxのバンドラー上で動作するiframe内に閉じ込められ、親アプリのDOMやJavaScriptコンテキストに一切アクセスできない
- 特殊文字の安全な扱い: バックスラッシュ・数式記号（LaTeX構文など）を含むコードもエスケープなしにそのまま渡せる
- エラーの封じ込め: AIが誤ったコードを生成してもアプリ全体がクラッシュしない
AIは以下のライブラリを使ってビジュアルを生成できます。
| ライブラリ | 用途 |
|---|---|
| recharts | 棒グラフ・折れ線・円グラフ等のデータチャート |
| framer-motion | アニメーション・トランジション |
| d3 | 低レベルなデータ可視化・SVG描画 |
| @radix-ui/themes | Button・Card・Badge・Table・Tabs等のUIコンポーネント |
| react-katex | LaTeX記法による数式レンダリング（$E=mc^2$ 等） |
| @react-three/fiber + drei | Three.jsベースの3Dグラフィクス |
| Tailwind CSS | スタイリング（全コンポーネントで利用可能） |
- フロントエンド:
frontend/src/components/ArtifactRenderer.tsx— Sandpackによるレンダリング・コード表示・全画面表示 - バックエンド:
backend/internal/service/chat.go—artifactInstructionにライブラリの使い方・デザインガイドライン・品質基準をプロンプトとして定義