AI Avatar

VRM 3D avatar companion that reacts when you send messages to AI or any website. Includes an animation editor for custom poses.

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 100+ 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 → 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) 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 — Coming soon! - 🎉 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版100インストール達成！ありがとうございます！ 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 → 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) ロードマップ 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 — Coming soon! - 🎉 お楽しみに 📖 詳細なドキュメント・画像・動画はGitHubで： https://github.com/webdeveloperhyper/ai-avatar