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.
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!
