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 → 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; 4-state button: off / Default / Random / 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 📸 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) 🤖 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 four states: - Off: no motion clips play - Animation: Default — plays the built-in sample poses included with the extension - Animation: Random — generates random poses from built-in zone patterns (v7) - 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 - 📸 Pose Capture — capture a real body pose with webcam and export it as a VRM animation JSON - ❤️ Positive word reactions (VS Code only) — heart counter, smile, and heart overlay animation when positive words are detected; broken heart and head shake on negative words - 🦁 Giant Mode (Chrome only) — float the avatar as a draggable, resizable overlay over any web page - 🎲 Animation: Random mode — new 4th state generates random poses from zone patterns (expression, body + arm, fingers, legs) - 😊 Expression editor — add Happy or Wink expressions to animation keyframes directly in the editor - 🖱️ Click anywhere on page to react (Chrome only) — clicking any web page triggers an animation on the avatar - 🔍 Prompt Checker [Beta] (VS Code only) — paste any AI prompt and get instant rule-based feedback: too vague, missing action verb, vague references, unnecessary filler, too many tasks, and missing file context v8 — Now creating! - 🎉 More fun updates --- 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 → coming soon! ✨ 機能一覧 🎭 リアクション — AIにメッセージを送ると自動でキャラクターが反応 🔄 アバター変更 — 上部のボタンでVRMキャラクターをいつでも変更可能 💃 アニメーション — .vrmaモーションクリップやカスタムJSONポーズを再生；4段階ボタン：オフ / デフォルト / ランダム / カスタム 🎬 アニメーションエディタ — 複数キーフレームのアニメーションをIn / Hold / Outタイミングで作成 (v4) 🎥 オービットコントロール — ドラッグで回転、スクロールでズーム、右クリックでパン 👀 視線追跡 — アイドル時に目と頭がマウスカーソルを追う 💬 リップシンク — AIの返答中に口が動く 😊 クリックまたはEnterキーで反応 — スマイル、うなずき、アニメーションが発動 💬 カスタム吹き出しメッセージ — Messagesボタンから吹き出しのメッセージを編集 😂 ジョーク — Jokesボタンでアバターがジョークを言う 📸 ポーズキャプチャ — ウェブカメラで体のポーズを撮影し、VRMアニメーションJSONとして書き出し (v7) ❤️ ポジティブワード反応（VS Code限定）— ポジティブ/ネガティブワード検出時にハートカウンターとアニメーション (v7) 🔍 プロンプトチェッカー [Beta]（VS Code限定）— AIプロンプトの明確さをルールベースで即チェック (v7) 🦁 ジャイアントモード（Chrome限定）— ドラッグ・リサイズ可能なオーバーレイとしてアバターをどのページにも表示 (v7) 🤖 対応サイト 以下のサイトで自動反応します： - 🤖 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ボタンで4つの状態を切り替えます： - オフ：モーションクリップを再生しない - Animation: Default — 拡張機能に含まれるサンプルポーズを再生 - Animation: Random — 内蔵のゾーンパターンからランダムにポーズを生成 (v7) - 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 - 📸 ポーズキャプチャツール — ウェブカメラで体のポーズを撮影し、VRMアニメーションJSONとして書き出し - ❤️ ポジティブワード反応 — ポジティブワード検出時にハートカウンター・スマイル・ハートオーバーレイアニメーション；ネガティブワードには割れたハートと首振り - 🦁 ジャイアントモード（Chrome限定）— ドラッグ・リサイズ可能なオーバーレイとしてアバターをどのページにも表示 - 🎲 Animation: Randomモード — 内蔵のゾーンパターン（表情・体と腕・指・脚）からランダムにかわいいポーズを生成する新しい第4状態 (v7) - 😊 表情エディタ — アニメーションエディタのキーフレームにHappyまたはWink表情を追加可能 - 🖱️ ページのどこかをクリックで反応（Chrome限定）— ウェブページをクリックするとアバターがアニメーションで反応 - 🔍 プロンプトチェッカー [Beta]（VS Code限定）— AIプロンプトを貼り付けるだけで、曖昧すぎる・アクション動詞なし・代名詞で指示・余分な前置き・タスク過多・ファイル情報なし などをルールベースで即チェック v8 — 開発中！ - 🎉 お楽しみに