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 v10 → 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) ROADMAP v10 — Now Creating! - 💬 AI Speech Bubble (VS Code only) — toggle between Fixed and AI mode; in AI mode the character reacts to Claude Code activity with context-aware speech; messages customizable - 🎛️ Toolbar redesign — 4 fixed rows always visible; animation split into 5 separate toggle buttons (Off / Default / Random / Custom / Custom Random); Positive Words and Negative Words as direct buttons - 🎭 Improved idle & thinking animations — random idle head micro-tilt every 6–10s; thinking state now shows a natural Z-axis pondering tilt with gentle oscillation v11 — 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 v10 → 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) ロードマップ v10 — 開発中！ - 💬 AI吹き出し（VS Code限定）— FixedとAIモードを切り替え；AIモードではClaude Codeの活動に反応してキャラクターがコンテキストに応じた発言をする；メッセージはカスタマイズ可能 - 🎛️ ツールバーリデザイン — 4行固定表示；アニメーションを5つの独立したトグルボタンに分割（Off / Default / Random / Custom / Custom Random）；ポジティブワード・ネガティブワードをダイレクトボタンに - 🎭 アイドル・思考アニメーション改善 — アイドル時に6〜10秒ごとランダムな頭の微傾き；思考中は自然なZ軸の首かしげポーズとゆっくりした揺れを追加 v11 — 近日公開！ - 🎉 お楽しみに 📖 詳細なドキュメント・画像・動画はGitHubで： https://github.com/webdeveloperhyper/ai-avatar