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 → https://dev.to/webdeveloperhyper/ai-avatar-meet-your-ideal-girlfriendboyfriend-for-free-21n5 v2 → https://dev.to/webdeveloperhyper/ai-avatar-v2-with-pose-editor-vs-code-extension-38n2 v4 → https://dev.to/webdeveloperhyper/how-to-get-cheered-up-247-ai-avatar-v4-with-animation-editor-chrome-extension-vs-code-2f07 v6 → https://dev.to/webdeveloperhyper/let-superheroes-cheer-you-up-ai-avatar-v6-chrome-extension-vs-code-extension-2ak7 v7 → https://dev.to/webdeveloperhyper/well-support-you-with-all-our-might-ai-avatar-v7-pose-capture-and-more-vs-code-and-chrome-3aab v11 → https://dev.to/webdeveloperhyper/ai-chat-ai-cheering-messages-and-animation-editor-hyper-ai-avatar-v10-vs-code-and-chrome-1noo ✨ 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) 🧠 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) 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 — 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 → https://dev.to/webdeveloperhyper/ai-avatar-meet-your-ideal-girlfriendboyfriend-for-free-21n5 v2 → https://dev.to/webdeveloperhyper/ai-avatar-v2-with-pose-editor-vs-code-extension-38n2 v4 → https://dev.to/webdeveloperhyper/how-to-get-cheered-up-247-ai-avatar-v4-with-animation-editor-chrome-extension-vs-code-2f07 v6 → https://dev.to/webdeveloperhyper/let-superheroes-cheer-you-up-ai-avatar-v6-chrome-extension-vs-code-extension-2ak7 v7 → https://dev.to/webdeveloperhyper/well-support-you-with-all-our-might-ai-avatar-v7-pose-capture-and-more-vs-code-and-chrome-3aab v11 → https://dev.to/webdeveloperhyper/ai-chat-ai-cheering-messages-and-animation-editor-hyper-ai-avatar-v10-vs-code-and-chrome-1noo ✨ 機能一覧 🎭 リアクション — 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) 🧠 コンテキスト吹き出し — 特別な日（EN/JP別リスト）、セッション数マイルストーン、反応間隔、セッション時間、曜日、時間帯 (v11) 🎭 AIスタイル — Cute / Energetic / Coolの3つのキャラクターモード (v11) 🌐 言語切り替え — Lang: EN/JP 1つのボタンで吹き出しとチャットの言語を同時に切り替え (v11) 🕺 豊かなアイドルアニメーション — 首の傾き / 体の傾き / 重力リーンをランダムにサイクル (v11) ロードマップ v11 ✅ - 🗣️ 音声読み上げ（TTS）— Speech:Off / Speech:API（Web Speech API）/ Speech:AI（Gemini TTS） - 🧠 コンテキスト吹き出し — 特別な日（EN/JP別）、セッション数マイルストーン、反応間隔、セッション時間、曜日、時間帯 - 🎭 AIスタイル — Cute / Energetic / Coolモード - 🌐 言語切り替え — 1つのボタンで吹き出しとチャットの言語を同時に切り替え - 🕺 豊かなアイドルアニメーション — 首の傾き / 体の傾き / 重力リーンをランダムにサイクル v12 — 近日公開！ - 🎉 お楽しみに 📖 詳細なドキュメント・画像・動画はGitHubで： https://github.com/webdeveloperhyper/ai-avatar