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 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 → 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; 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. 💃 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 - Use the axis button to switch between X / Y / Z rotation - Drag the slider (or type a value) to rotate the bone - 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 - 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 — coming soon - 🎉 More fun updates