Ai Avatar

AI Avatar — Chrome Extension
(日本語の説明は下部をご覧ください / Japanese version below)

A VRM 3D character in your browser side panel that reacts to AI activity on ChatGPT and Claude. Animations and speech bubbles all run without AI too.

💻 Also available as a VS Code Extension — reacts to Claude Code / GitHub Copilot activity directly in your editor.
🎉 Thank you for 200+ installs on VS Code!
https://marketplace.visualstudio.com/items?itemName=web-developer-hyper.ai-avatar

📖 Read the story behind this project on DEV.to:
v1 → AI Avatar (VS Code Extension)
https://dev.to/webdeveloperhyper/ai-avatar-meet-your-ideal-girlfriendboyfriend-for-free-21n5
v2 → AI Avatar v2 with Pose Editor (VS Code Extension)
https://dev.to/webdeveloperhyper/ai-avatar-v2-with-pose-editor-vs-code-extension-38n2
v3,v4 → 😊 How to Get Cheered Up 24/7 (AI Avatar v4 with Animation Editor)
https://dev.to/webdeveloperhyper/how-to-get-cheered-up-247-ai-avatar-v4-with-animation-editor-chrome-extension-vs-code-2f07
v5,v6 → 🦸 Let Superheroes Cheer You Up (AI Avatar v6)
https://dev.to/webdeveloperhyper/let-superheroes-cheer-you-up-ai-avatar-v6-chrome-extension-vs-code-extension-2ak7
v7 → 🫡 We'll Support You with All Our Might (AI Avatar v7)
https://dev.to/webdeveloperhyper/well-support-you-with-all-our-might-ai-avatar-v7-pose-capture-and-more-vs-code-and-chrome-3aab
v8,v9,v10 → 🎥 AI Chat, AI Cheering Messages, and Animation Editor Hyper (AI Avatar v10)
https://dev.to/webdeveloperhyper/ai-chat-ai-cheering-messages-and-animation-editor-hyper-ai-avatar-v10-vs-code-and-chrome-1noo
v11,v12,v13,v14 v15→ coming soon!

✨ FEATURES

🎭 Live reactions — character automatically reacts when you send a message to AI
🔄 Change Avatar — swap your VRM character anytime with the button at the top
💃 Animations — play .vrma motion clips or custom JSON poses; 5 separate toggle buttons: Off / Default / Random (v7) / Custom (v2) / Custom Random (v8) (v10)
💬 AI Speech Bubble (VS Code only) — toggle Fixed/AI mode; in AI mode the character reacts to Claude Code activity with context-aware speech (v10)
🎬 Animation Editor — create multi-keyframe animations with in / hold / out timing (v4)
🎨 Random Editor — edit zone-split pattern JSON in the Animation Editor; Body & Arms / Legs / Fingers zones (v8)
🎥 OrbitControls — drag to rotate, scroll to zoom, right-click to pan
👀 Eye tracking — eyes and head follow your mouse cursor when idle
💬 Lipsync — mouth animates while AI is replying
😊 Click or press Enter to interact — triggers a smile, nod, and animation (if ON)
💬 Custom speech messages — edit the speech bubble messages via the Messages button
😂 Jokes — avatar tells jokes via the Jokes button
📸 Pose Capture — capture a real body pose with webcam and export it as a VRM animation JSON (v7)
❤️ Positive word reactions (VS Code only) — heart counter and animations on positive/negative words (v7)
🔍 Prompt Checker [Beta] (VS Code only) — instant rule-based feedback on your AI prompt clarity (v7)
🦁 Giant Mode (Chrome only) — float the avatar as a draggable, resizable overlay over any web page (v7)
🤖 AI Chat — always-visible chat input; ask the avatar anything; replies appear as speech bubbles and trigger animations; supports Gemini API and Ollama (v9)
🗣️ Text-to-Speech — Speech:Off / Speech:API (Web Speech API) / Speech:AI (Gemini TTS, uses your API key) (v11) / Speech:Local (Kokoro EN + VOICEVOX JP) (v13)
🧠 Contextual speech bubbles — character reacts to special days (EN/JP separate lists), session count milestones, coding gap, session length, day of week, and time of day (v11)
🎭 AI Style — Cute / Energetic / Cool character modes (v11)
🌐 Lang toggle — single Lang: EN/JP button controls bubble language and chat language together (v11)
🕺 Richer idle animations — random cycle picks from neck tilt / body tilt / whole-body gravity lean each interval (v11)
🪙 Millionaire Mode — 3D coin or diamond fountain bursts from the avatar on every reaction (v12)
🎢 Roller Coaster Mode — avatar rides a 3D roller coaster in Default, Rainbow, or Water theme (v14)
🎆 Background Effects — loading and 5 reaction backgrounds (Galaxy, Magic, Cyber, Comic, Idol Stage) randomly appear on each reaction (v15)

SPECIAL THANKS

- @RutenVeil (https://x.com/RutenVeil) — Created the background effects in v15.
- @Gramli (https://github.com/Gramli) — Updated in v2 and keeps supporting.
- @aryanc193 (https://github.com/aryanc193) — Made the avatar collaboration project that is the beginning of AI Avatar and keeps supporting.
- Maximum Blue — Made avatars in v6 and keeps supporting.

---

ROADMAP

v11 ✅
- 🗣️ Text-to-Speech — Speech:Off / Speech:API (Web Speech API) / Speech:AI (Gemini TTS)
- 🧠 Contextual speech bubbles — character reacts to special days (EN/JP), session count milestones, coding gaps, session length, day of week, and time of day
- 🎭 AI Style — Cute / Energetic / Cool modes
- 🌐 Lang toggle — single button controls bubble language and chat language together
- 🕺 Richer idle animations — random cycle picks from neck tilt / body tilt / whole-body gravity lean

v12 ✅
- 🪙 Millionaire Mode — 3D coin or diamond fountain bursts from the avatar on every reaction
- 🎛️ Radio group UI — animation, AI style, speech, provider, and millionaire controls redesigned as inline radio buttons

v13 ✅
- 🗣️ Speech:Local — Kokoro (EN offline TTS, no API key needed) + VOICEVOX (JP local TTS)
- 💬 Bubble On/Off toggle — hide speech bubbles while keeping TTS audio active
- 🤖 Bubble:AI — contextual messages (special days, time of day, etc.) now go through AI in AI mode

v14 ✅
- 🎢 Roller Coaster Mode — avatar rides a 3D roller coaster in Default, Rainbow, or Water theme
- 🪙 Add coin counter in the top bar
- ❓ Add help button in the top bar

v15 ✅
- 🎆 Background Effects — SF loading effect on avatar load; 5 animated reaction backgrounds (Galaxy, Magic, Cyber, Comic, Idol Stage) randomly selected on each reaction
- 💥 Roller Coaster Rainbow mode — large stars now explode into a burst of colored particles when they hit the avatar
- 🦁 Giant Mode state sync — Effect, bubble visibility, TTS mode, and language now carried over from the panel when opening Giant Mode
- 🐛 Fix: Animation editor — image picker no longer resets the pose to default; unintended idle/click animations no longer fire while editing
- ✨ Fix: Settings panel now has a scrollbar so all buttons are reachable
- 💃 Candy Pink Avatar — added Candy Pink v2–v7 image gallery and VRM avatar download link

v16 — Now creating!
- 🎉 More fun updates

📖 Full documentation, images, videos on GitHub:
https://github.com/webdeveloperhyper/ai-avatar

---

AI Avatar — Chrome拡張機能

ブラウザのサイドパネルに表示されるVRM 3Dキャラクターが、ChatGPTやClaudeへのメッセージ送信に反応します。AIなしでもアニメーションや吹き出しを楽しめます。

💻 VS Code拡張機能としても利用可能 — エディタ上でClaude Code / GitHub Copilotの動作に反応します。
🎉 VS Code版200インストール達成！ありがとうございます！
https://marketplace.visualstudio.com/items?itemName=web-developer-hyper.ai-avatar

📖 開発ストーリーはDEV.toで読めます：
v1 → AI Avatar (VS Code拡張機能)
https://dev.to/webdeveloperhyper/ai-avatar-meet-your-ideal-girlfriendboyfriend-for-free-21n5
v2 → AI Avatar v2 ポーズエディタ付き
https://dev.to/webdeveloperhyper/ai-avatar-v2-with-pose-editor-vs-code-extension-38n2
v3,v4 → 😊 AI Avatar v4 アニメーションエディタ付き
https://dev.to/webdeveloperhyper/how-to-get-cheered-up-247-ai-avatar-v4-with-animation-editor-chrome-extension-vs-code-2f07
v5,v6 → 🦸 スーパーヒーローに応援してもらおう (AI Avatar v6)
https://dev.to/webdeveloperhyper/let-superheroes-cheer-you-up-ai-avatar-v6-chrome-extension-vs-code-extension-2ak7
v7 → 🫡 全力でサポートします！(AI Avatar v7)
https://dev.to/webdeveloperhyper/well-support-you-with-all-our-might-ai-avatar-v7-pose-capture-and-more-vs-code-and-chrome-3aab
v8,v9,v10 → 🎥 AIチャット、AI応援メッセージ、アニメーションエディタ ハイパー (AI Avatar v10)
https://dev.to/webdeveloperhyper/ai-chat-ai-cheering-messages-and-animation-editor-hyper-ai-avatar-v10-vs-code-and-chrome-1noo
v11,v12,v13,v14,v15 → coming soon!

✨ 機能一覧

🎭 リアクション — AIにメッセージを送ると自動でキャラクターが反応
🔄 アバター変更 — 上部のボタンでVRMキャラクターをいつでも変更可能
💃 アニメーション — .vrmaモーションクリップやカスタムJSONポーズを再生；5つの独立トグルボタン：Off / Default / Random (v7) / Custom (v2) / Custom Random (v8) (v10)
💬 AI吹き出し（VS Code限定）— Fixed/AIモードを切り替え；AIモードでは Claude Code に反応してコンテキストに応じた発言をする (v10)
🎬 アニメーションエディタ — 複数キーフレームのアニメーションをIn / Hold / Outタイミングで作成 (v4)
🎨 ランダムエディタ — アニメーションエディタ内でゾーン分割パターンJSONを直接編集（ボディ＆アーム / 脚 / 指ゾーン）(v8)
🎥 オービットコントロール — ドラッグで回転、スクロールでズーム、右クリックでパン
👀 視線追跡 — アイドル時に目と頭がマウスカーソルを追う
💬 リップシンク — AIの返答中に口が動く
😊 クリックまたはEnterキーで反応 — スマイル、うなずき、アニメーションが発動
💬 カスタム吹き出しメッセージ — Messagesボタンから吹き出しのメッセージを編集
😂 ジョーク — Jokesボタンでアバターがジョークを言う
📸 ポーズキャプチャ — ウェブカメラで体のポーズを撮影し、VRMアニメーションJSONとして書き出し (v7)
❤️ ポジティブワード反応（VS Code限定）— ポジティブ/ネガティブワード検出時にハートカウンターとアニメーション (v7)
🔍 プロンプトチェッカー [Beta]（VS Code限定）— AIプロンプトの明確さをルールベースで即チェック (v7)
🦁 ジャイアントモード（Chrome限定）— ドラッグ・リサイズ可能なオーバーレイとしてアバターをどのページにも表示 (v7)
🤖 AIチャット — 常時表示のチャット入力；アバターに何でも質問できる；返答は吹き出しでアニメーション付き；Gemini APIとOllama対応 (v9)
🗣️ 音声読み上げ（TTS）— Speech:Off / Speech:API（Web Speech API）/ Speech:AI（Gemini TTS、APIキーを使用） (v11) / Speech:Local（Kokoro EN + VOICEVOX JP） (v13)
🧠 コンテキスト吹き出し — 特別な日（EN/JP別リスト）、セッション数マイルストーン、反応間隔、セッション時間、曜日、時間帯 (v11)
🎭 AIスタイル — Cute / Energetic / Coolの3つのキャラクターモード (v11)
🌐 言語切り替え — Lang: EN/JP 1つのボタンで吹き出しとチャットの言語を同時に切り替え (v11)
🕺 豊かなアイドルアニメーション — 首の傾き / 体の傾き / 重力リーンをランダムにサイクル (v11)
🪙 ミリオネアモード — リアクションのたびにアバターから3Dコインまたはダイヤモンドが噴き出す (v12)
🎢 ローラーコースターモード — Default・Rainbow・Waterの3テーマで3Dローラーコースターに乗る (v14)
🎆 背景エフェクト — ロード時のSFエフェクト＋5種類のリアクション背景（Galaxy・Magic・Cyber・Comic・Idol Stage）がリアクション時にランダム表示 (v15)

スペシャルサンクス

- @RutenVeil (https://x.com/RutenVeil) — v15の背景エフェクトを制作。
- @Gramli (https://github.com/Gramli) — v2のアップデートに貢献し、継続的にサポート。
- @aryanc193 (https://github.com/aryanc193) — AI Avatarの原点となるアバターコラボレーションプロジェクトを制作し、継続的にサポート。
- Maximum Blue — v6でアバターを制作し、継続的にサポート。

---

ロードマップ

v11 ✅
- 🗣️ 音声読み上げ（TTS）— Speech:Off / Speech:API（Web Speech API）/ Speech:AI（Gemini TTS）
- 🧠 コンテキスト吹き出し — 特別な日（EN/JP別）、セッション数マイルストーン、反応間隔、セッション時間、曜日、時間帯
- 🎭 AIスタイル — Cute / Energetic / Coolモード
- 🌐 言語切り替え — 1つのボタンで吹き出しとチャットの言語を同時に切り替え
- 🕺 豊かなアイドルアニメーション — 首の傾き / 体の傾き / 重力リーンをランダムにサイクル

v12 ✅
- 🪙 ミリオネアモード — リアクションのたびにアバターから3Dコインまたはダイヤモンドを噴き出す
- 🎛️ ラジオボタンUI — アニメーション、AIスタイル、音声、プロバイダー、ミリオネアのコントロールをインラインラジオボタンに刷新

v13 ✅
- 🗣️ Speech:Local — Kokoro（ENオフラインTTS、APIキー不要）+ VOICEVOX（JP ローカルTTS）
- 💬 吹き出しOn/Offトグル — TTS音声を維持しながら吹き出しを非表示にできる
- 🤖 Bubble:AI — 特別な日・時間帯などのコンテキストメッセージもAIモードで処理されるように改善

v14 ✅
- 🎢 ローラーコースターモード — Default・Rainbow・Waterの3テーマで3Dローラーコースターに乗る
- 🪙 トップバーにコインカウンターを追加
- ❓ トップバーにヘルプボタンを追加

v15 ✅
- 🎆 背景エフェクト — ロード時のSFエフェクト＋5種類のリアクション背景（Galaxy・Magic・Cyber・Comic・Idol Stage）がリアクション時にランダム表示
- 💥 ローラーコースター Rainbowモード — 大きな星がアバターに当たると、カラフルなパーティクルが爆発するように弾け飛ぶ
- 🦁 ジャイアントモード状態同期 — ジャイアントモードを開くとエフェクト・吹き出し・TTSモード・言語の状態がパネルから引き継がれるように修正
- 🐛 バグ修正：アニメーションエディタで画像選択中にポーズがリセットされる問題を修正；アニメーションエディタで意図しないアイドル・クリックアニメーションが発火する問題を修正
- ✨ 設定パネルにスクロールバーを追加（ボタンが見切れなくなりました）
- 💃 Candy Pink Avatar — Candy Pink v2〜v7のバージョン別画像ギャラリーとVRMアバターのダウンロードリンクを追加

v16 — 作成中!
- 🎉 お楽しみに

📖 詳細なドキュメント・画像・動画はGitHubで：
https://github.com/webdeveloperhyper/ai-avatar