Intro
AI Avatar is a completely free app that lets your VRoid (VRM) 3D avatar animate in response to AI chat and the Enter key in VS Code and Chrome (Edge). I have been creating and updating AI Avatar with the mission of cheering, supporting, and making everyone feel happy. There was a long holiday called Golden Week in Japan. So I committed myself to updating AI Avatar and made many updates. I hope you will enjoy them, so let's take a quick look.🚀
Pose Capture 📸
AI Avatar has a built-in Animation Editor, and I'm keeping updating it to make animation easier. However, it takes time to make an animation. We need to set each part of the body’s XYZ axis degrees. So this time, I tried motion capture. You can take a picture of your pose with a web camera and convert it to JSON data for animation. I used a famous library, Google's MediaPipe, for this. I tried many things to improve the accuracy, like adding calibration, removing abnormal values, capturing not only one frame but many frames and averaging them, and others. I skipped face and finger motion capture to make it simple this time. Also, I couldn't capture the legs. My room is too small, and I cannot capture the legs in the frame... Motion capture is deep and fun, so I might try face capture, real-time capture, or animation capture another time!
Positive/Negative Checker (VS Code Only) ❤️
Keeping our mental health is hard as a developer. Especially when fighting bugs every day like me. I created a positive/negative word checker. When you send Claude Code a request that includes positive words like "good," the avatar smiles, a heart is displayed, and the heart count increases. On the other hand, when you send a Claude Code request that includes negative words like "bad," the avatar makes a sad face, a broken heart is displayed, and the heart count decreases. You can customize the positive/negative words as you like. Let's feel positive and happy with the positive/negative word checker!
Prompt Checker (Beta) (VS Code Only) 🧐
AI responses, including Claude Code, are quite affected by the prompt you send. So I added a prompt checker to the app. When you input a prompt and push the check button, you can get improvement advice instantly. It does not use AI, so the running cost is free. I just used pattern matching for the check. It will give advice like making the prompt less vague and more specific. I might make the pattern matching editable and add more patterns in the future. Otherwise, I might use AI to make this function better. I hope this function will help with better prompt creation and lead to more efficient use of AI.
Giant Mode (Chrome (Edge) Only)
The avatar is trapped in the side panel by default and looks cramped. So this time, I made Giant Mode and let the avatar be free from the side panel, move around the web page, and resize larger. I first used a popup to implement this. However, if I touch the web page, the popup gets hidden and disappears. Also, I could not click the background links of the popup. These seemed to be a bad user experience. So I tried to use an overlay. Using this, I could avoid the drawbacks above. However, when I move to the next page, the overlay disappears, so I made it recreate the overlay every time I move to the next page. I hope you can feel the avatar closer to you with this new function.
Random Animation Player
I preset 4 default animations for the avatar, and you can add more with the built-in Animation Editor. However, I thought it would be more fun if there were more animation patterns available easily. So I made a random animation play button. I split the patterns into 4 blocks: expression, body + arms, legs, and fingers, and made templates for each of them. This way, I could make the poses more natural than making everything completely random. Now the random animation mode has 3 expressions * 4 body + arms * 4 legs * 4 fingers = 256 patterns. I want to make this random animation pattern editable and add more patterns in the future.
Expressions in Animation Editor
In the previous version, there were no expression settings in the Animation Editor. Expressions change the mood of the avatar a lot, so I added expressions. I only added default (straight face), happy, and wink this time, because I want users to feel happy. I might add more expressions later.
Click Triggers Animation (Chrome (Edge) Only)
In the previous version, only the Enter key triggered animations in Chrome (Edge) mode. However, I realized that users click more than they press the Enter key on web pages. So I added clicking as a trigger for animations. Now, I hope users can enjoy the avatar's animations better than before.
How to Use the AI Avatar Chrome Version
※ Chrome v7 is currently under review. I will announce when it is released. → Released on 5/9! 🎉
Install from Chrome Web Store: ↓↓
https://chromewebstore.google.com/detail/ai-avatar/afmcfaeaaojalninahhhjnonhmlmiidi
How to Use the AI Avatar VS Code Extension Version (Thank you 100+ installs!)
You can download the AI Avatar VS Code extension in two ways.
Option 1: Install from VS Code:
Extensionsbutton in the left sidebar > Search AI Avatar >Install↓↓
Option 2: Install from the VS Code Marketplace: https://marketplace.visualstudio.com/items?itemName=web-developer-hyper.ai-avatar ↓↓
Special Thanks
My DEV Community friend @gramli helped update AI Avatar in version 2 and keeps supporting me. Thank you very much!
My colleague Maximum Blue helped make unique avatars in version 6. Thank you very much!
Version 8 Update
I'm already working on the version 8 update. More fun updates, so please stay tuned!
Update Ideas
- Add or update more helpful functions.
- Add or update more AI features.
- Add or update more avatars and animations.
- Update the Pose Capture, Prompt Checker, and Animation Editor to make them more convenient.
If you have any update ideas, please let me know!
Collab Project in Progress
I'm also working on a collab project with my DEV Community friend @itsugo. Version 2 is almost ready!
More about Animation and AI
My posts about fun 2D/3D animation. ↓
- 💥How to Reduce Stress for Free (Mega Bazooka with React Three Fiber + AI)💥
- 🙀How to Create a CRAZY Roller Coaster Builder (🎢RollerCoaster.js + React Three Fiber + AI)
Also, here are my posts about AI. ↓
- 🤖How to make AI follow your instructions more for free (OpenSpec)📝
- 🧠How to use AI more efficiently for free (Serena MCP)🧐
My Brain Training App (Muscle Brain) 💪🧠
Available as Chrome Extensions for Free
https://chromewebstore.google.com/detail/muscle-brain-ultimate-edi/nmlolddnfpfambkcnplggphjgbjeabfc
Available on Microsoft Store for Free
https://apps.microsoft.com/detail/9NG572QMV56M
Outro
Ah! It's time to update and make AI Avatar better. I have to go now. Let's meet again next time with you, me, and our avatars. Thank you for reading. See you!🫡
Comments Welcome!
- Do you have any ideas to make AI Avatar more helpful for users?
- Do you have any ideas for making cool avatars and animations?
- Do you have any ideas to add more AI features?
- Do you have any ideas to make AI Avatar even more fun?
- Do you have any ideas for increasing the number of users of AI Avatar?
Any other comments are also welcome!
Top comments (22)
The overlay change for Giant Mode is a nice call. That’s one of those things you only notice after actually using it.
The Pose Capture idea is also interesting. I think ease of use will matter more than perfect accuracy there. If it’s quick and works “well enough,” people will use it.
Overall this feels like a project where small UX decisions will matter more than adding more features.
Thank you for your comment! 😺 I’m glad to hear an informative comment from a frontend expert like you. I’ll try to make an app that is not only fun but also provides a good user experience.
Appreciate that 🙂
Feels like one of those products where the small interaction details will make the biggest difference. Curious to see how you shape it.
Wow, so many updates?! You’re on fire! 🔥 I can’t wait to try it.
Thank you for checking! 😄 There was a long holiday in Japan called Golden Week, so I had time for many updates. I’m looking forward to your feedback. Updates from you are always welcome too. You can try anything you like.
I’m still waiting for the new version in Chrome 🚀😅 Is the Chrome extension review always this slow?
Thank you for waiting! Chrome v7 got released 🎉
Chrome extension reviews take more time than VS Code extension reviews. VS Code only takes a few minutes, but Chrome takes 2–4 days in my case. I usually adjust the timing for my DEV.to posts. But this time, my Chrome extension was rejected, and I had to submit it for review once again. So I posted even though the Chrome version was not ready yet. I want the Chrome extension to be safe, but it would be better if the review process were faster.
Super cool!
Thank you for testing! 😊 You can resize and move the avatar around in Giant Mode. There might be more I can do with Giant Mode, and I’ll update it when I come up with ideas.
Your approach to MediaPipe pose capture accuracy - averaging frames and calibration - caught my eye. We tackle similar challenges interpreting subtle, real-world data, though for health information across diverse languages, not avatars.\n\nMapping a drug interaction graph requires not just translating molecules, but also connecting Indian brand...
Thank you for checking! 😀 I just started motion capture, and it’s quite interesting, so I would like to try more another time. Wow! You seem to be trying difficult things. Good luck with your project too!
Wow! great job buddy. I am curious. It is getting easier for you to do an AI Avatar?
Thank you for your comment! 😊 I’m always trying new things, and they don’t always go as I imagine… but it’s fun, so I keep moving forward. Already struggling with the next update! 😅
Cool! I know the feeling:). I start a project but I get stuck for coding on a project. I will come to the project the following day with new ideas.
Wow! Looking forward to your new project! 😊
Thank you! You will see the project shortly :)
That shift from popup to overlay for Giant Mode caught my attention — not because of the technical swap itself, but because of what it says about how we design for presence. You had something working, but the moment you actually used it alongside a webpage, the seams showed. The popup hides, links become unreachable, and suddenly the avatar feels like it's fighting the browser rather than inhabiting it.
What's interesting is that this same tension shows up in the Pose Capture feature too. You mentioned your room is too small to capture legs in the frame. That's not really a software limitation — it's the physical world refusing to cooperate with the digital one. It makes me wonder if we're always going to be negotiating this boundary, where the avatar exists in our space but also has to obey the rules of whatever container it's trapped in (browser, IDE, webcam frame).
I'm curious how you think about that long-term. Do you see the avatar eventually becoming more ambient — something that floats across tools rather than being anchored to one panel or window? Or does the constraint of a specific container actually make the interaction feel more intentional?
Thank you for your comment! 😀 It was a good chance to learn about popups and overlays. I would like to make both patterns: an avatar in the side panel and an avatar that moves around and is resizable, so users can choose which one they prefer. I’m not sure where AI Avatar is going myself, but I’m thinking of trying many things and enjoying creating it!
This is cool! Installed, Im going to play around with it the rest of the week. ☺️
Thank you for checking! 😄 Also, thank you for the comment on the Chrome Extension! It really motivates me. I always love to hear feedback and ideas.
Some comments may only be visible to logged-in visitors. Sign in to view all comments.