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. 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 ✨ 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; 3-state button: off / Default / Custom 🎬 Animation Editor — create multi-keyframe animations with in / hold / out timing (v4) 🎥 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 🤖 SUPPORTED SITES The avatar automatically reacts on: - 🤖 ChatGPT (chatgpt.com) - 🤖 Claude (claude.ai) Enter key reaction works on all websites. 🚀 GETTING STARTED No setup needed — comes with a built-in sample character. 1. Install the extension from the Chrome Web Store 2. Pin it to the toolbar 3. Click the AI Avatar icon and open the Side Panel 4. Chat with any supported AI site — your avatar reacts automatically 🎨 USE YOUR OWN VRM CHARACTER You can create your own 3D avatar for free using VRoid (https://vroid.com/en) — no 3D modeling skills needed. Design your character and export it as a .vrm file. Click the Change Avatar button at the top of the panel to pick a .vrm file. v6 adds new sample characters — three girls and two boys — plus cute, cool, and funny pose packs. Download the zip free from GitHub Releases: https://github.com/webdeveloperhyper/ai-avatar/releases 💃 ANIMATIONS The Animation button cycles through three states: - Off: no motion clips play - Animation: Default — plays the built-in sample poses included with the extension - Animation: Custom — opens a file picker, plays .vrma and .json pose files from your chosen files 👉 VRMA Animation files are not included in the extension because they cannot be redistributed under their license terms. Download them for free from the official VRoid Project: https://booth.pm/en/items/5512385 The pack includes 7 animations: Show full body, Greeting, Peace sign, Shoot, Spin, Model pose, and Squat. 1. Download and unzip the pack 2. Click Animation until it shows Animation: Custom 3. Pick the .vrma files 4. A random clip plays each time the AI responds 🎬 ANIMATION EDITOR (v4+) Click Edit Animation to open the animation editor overlay: - Select a body part from the dropdown — including all 30 finger bones (v5) - Use the axis button to switch between X / Y / Z rotation - Drag the slider (or type a value in degrees) to rotate the bone — values shown in degrees (v5) - Add multiple keyframes with the + button to build a full animation sequence (v4) - Each keyframe has In (fade in), Hold, and Out (fade out, last keyframe only) timing (v4) - Navigate keyframes with the < > buttons (v4) - Press Play to preview the full animation (in → hold → out) exactly as it plays normally (v4) - Click Save to save the animation as a JSON file (saved in degrees for easy editing) - Click Reload to restore the last saved values - The saved animation is added to the pool and plays randomly like any other animation A file picker appears when you click Edit Animation (v4): - First time: Cancel the file picker to open a default animation - Next time: Pick an existing JSON file to load and edit 💬 SPEECH BUBBLE MESSAGES Click the Messages button to edit the messages shown in the speech bubble when the avatar reacts. Enter messages separated by | (pipe), e.g. You can do it! | Nice work! | Love that fix! Messages are saved and persist across sessions. 🗺️ ROADMAP ✅ v1 - VRM character in VS Code sidebar - Live reactions to Claude Code activity - Eye tracking, lipsync, OrbitControls - Change Avatar, speech bubble messages ✅ v2 - 3-state Animation button (off / Default / Custom) - Custom pose editor with JSON save/load - Jokes button - GitHub Copilot watcher support ✅ v3 - 🌐 Chrome extension (this extension) - Various fixes and adjustments ✅ v4 - Pose Editor upgraded to full Animation Editor - Multi-keyframe timeline with in / hold / out timing - Various fixes and adjustments ✅ v5 - All 30 finger bones added to the animation editor - Animation editor values now shown and saved in degrees (backward compatible with existing files) - BG toggle button — switch to gray background to see dark-colored avatars - Various UI polish: button styling, focus outlines, editor colors - Fixed reload to always restore the latest saved pose ✅ v6 - New sample characters: 3 girls and 2 boys (free download from GitHub Releases) - New pose packs: cute, cool, and funny poses (free download from GitHub Releases) - https://github.com/webdeveloperhyper/ai-avatar/releases v7 — Now creating! - 🎉 More fun updates --- AI Avatar — Chrome拡張機能 ブラウザのサイドパネルに表示されるVRM 3Dキャラクターが、ChatGPTやClaudeへのメッセージ送信に反応します。AIなしでもアニメーションや吹き出しが動作します。 💻 VS Code拡張機能としても利用可能 — エディタ上でClaude Code / GitHub Copilotの動作に反応します。 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 ✨ 機能一覧 🎭 リアクション — AIにメッセージを送ると自動でキャラクターが反応 🔄 アバター変更 — 上部のボタンでVRMキャラクターをいつでも変更可能 💃 アニメーション — .vrmaモーションクリップやカスタムJSONポーズを再生；3段階ボタン：オフ / デフォルト / カスタム 🎬 アニメーションエディタ — 複数キーフレームのアニメーションをIn / Hold / Outタイミングで作成 (v4) 🎥 オービットコントロール — ドラッグで回転、スクロールでズーム、右クリックでパン 👀 視線追跡 — アイドル時に目と頭がマウスカーソルを追う 💬 リップシンク — AIの返答中に口が動く 😊 クリックまたはEnterキーで反応 — スマイル、うなずき、アニメーションが発動 💬 カスタム吹き出しメッセージ — Messagesボタンから吹き出しのメッセージを編集 😂 ジョーク — Jokesボタンでアバターがジョークを言う 🤖 対応サイト 以下のサイトで自動反応します： - 🤖 ChatGPT (chatgpt.com) - 🤖 Claude (claude.ai) Enterキーの反応はすべてのウェブサイトで動作します。 🚀 はじめ方 セットアップ不要 — サンプルキャラクターが最初から入っています。 1. Chrome ウェブストアから拡張機能をインストール 2. ツールバーにピン留め 3. AI Avatarアイコンをクリックしてサイドパネルを開く 4. 対応AIサイトでチャットすると自動でアバターが反応 🎨 自分のVRMキャラクターを使う VRoid (https://vroid.com/ja) を使えば3Dモデリングの知識なしに無料でオリジナルアバターを作れます。キャラクターをデザインして.vrmファイルとしてエクスポートしてください。 パネル上部の「Change Avatar」ボタンから.vrmファイルを選択できます。 v6では新しいサンプルキャラクター（女の子3体・男の子2体）とポーズパック（かわいい・クール・おもしろ）を追加しました。GitHubリリースページからzipを無料でダウンロードできます： https://github.com/webdeveloperhyper/ai-avatar/releases 💃 アニメーション Animationボタンで3つの状態を切り替えます： - オフ：モーションクリップを再生しない - Animation: Default — 拡張機能に含まれるサンプルポーズを再生 - Animation: Custom — ファイルを選択し、.vrmaや.jsonポーズファイルを再生 👉 VRMAアニメーションファイルはライセンスの都合上、拡張機能に含まれていません。公式VRoidプロジェクトから無料でダウンロードできます： https://booth.pm/ja/items/5512385 パックには7つのアニメーションが含まれます：全身表示、挨拶、ピースサイン、シュート、スピン、モデルポーズ、スクワット。 1. パックをダウンロードして解凍 2. AnimationボタンをAnimation: Customになるまでクリック 3. .vrmaファイルを選択 4. AIが返答するたびにランダムなクリップが再生 🎬 アニメーションエディタ (v4+) 「Edit Animation」をクリックしてエディタを開きます： - ドロップダウンから体のパーツを選択 — 全30本の指ボーンに対応 (v5) - 軸ボタンでX / Y / Z回転を切り替え - スライダーを動かす（または度数で値を入力）してボーンを回転 — 値は度数表示 (v5) - +ボタンで複数キーフレームを追加してアニメーションシーケンスを作成 (v4) - 各キーフレームにIn（フェードイン）、Hold、Out（フェードアウト、最終KFのみ）のタイミング設定 (v4) - < > ボタンでキーフレームを移動 (v4) - Playボタンでアニメーション全体をプレビュー (v4) - SaveでアニメーションをJSONファイルとして保存（度数で保存されるため直接編集も簡単） - ReloadでSaveした最新の状態に戻す - 保存したアニメーションはプールに追加され、通常のアニメーションと同様にランダム再生 「Edit Animation」をクリックするとファイルピッカーが表示されます： - 初回：ファイルピッカーをキャンセルするとデフォルトアニメーションが開く - 2回目以降：既存のJSONファイルを選択して読み込み・編集 💬 吹き出しメッセージ Messagesボタンをクリックして、アバターが反応したときに吹き出しに表示するメッセージを編集できます。 メッセージは | （パイプ）で区切って入力します。例：頑張って！ | いいね！ | 完璧！ メッセージは保存され、セッションをまたいで維持されます。 🗺️ ロードマップ ✅ v1 - VS CodeサイドバーにVRMキャラクター表示 - Claude Code活動へのライブ反応 - 視線追跡、リップシンク、オービットコントロール - アバター変更、吹き出しメッセージ ✅ v2 - 3段階Animationボタン（オフ / デフォルト / カスタム） - カスタムポーズエディタ（JSON保存・読み込み） - Jokesボタン - GitHub Copilotウォッチャー対応 ✅ v3 - 🌐 Chrome拡張機能（この拡張機能） - 各種修正・調整 ✅ v4 - ポーズエディタをフルアニメーションエディタにアップグレード - In / Hold / Outタイミング付き複数キーフレームタイムライン - 各種修正・調整 ✅ v5 - アニメーションエディタに全30本の指ボーンを追加 - エディタの値を度数で表示・保存（既存ファイルとの後方互換性あり） - BGトグルボタン追加 — グレー背景に切り替えて暗色アバターを見やすく - UIの各種改善：ボタンスタイル、フォーカス枠、エディタの配色 - リロードが最後に保存したポーズを正しく復元するよう修正 ✅ v6 - 新サンプルキャラクター：女の子3体・男の子2体（GitHubリリースから無料ダウンロード） - 新ポーズパック：かわいい・クール・おもしろ（GitHubリリースから無料ダウンロード） - https://github.com/webdeveloperhyper/ai-avatar/releases v7 — 開発中！ - 🎉 お楽しみに