Intro
I created an AI avatar, a VRM 3D character that reacts when you chat with AI or press Enter, and I keep updating it. I have been using the same avatar (Ninja Girl) as the default avatar from the beginning. Although you can change the avatar to your own, it would be more fun if there were several default avatars and each had its own animations and stories. We can change the avatars based on our mood. This time, my coworker Maximum Blue helped me make avatars. Thanks a lot!
Version 6 Update
Joyful Colors is a group that is gathered with a mission to cheer developers and other people up and make them feel happy. They will cheer you up 24/7 through VS Code extension and Chrome (Edge) extension. Let's take a look at the superhero characters!
Sweet Purple (Creater: Blue) ↑
Bright and cheerful.
Wants to be a famous pop star and eat yummy things.
Makes cute poses.
Candy Pink (Creater: Hyper) ↑
Another face of the sample avatar (Ninja Girl).
kind and considerate.
Good at making fake smiles.
Makes cute poses.
Maximum Blue (Creater: Blue) ↑
Active and full of energy.
Girls fall in love when their eyes meet his.
Makes cool poses.
Hyper Yellow (Creater: Blue) ↑
Always trying to make a cool app, but always ends up making a silly app.
He thinks Purple and Pink like him, but they are just using him.
Makes silly poses.
You can download all the avatars and animations for free from GitHub Releases. ↓
https://github.com/webdeveloperhyper/ai-avatar/releases
Version 5 Updates
I also made several updates, fixes and adjustments.
Added bones to the fingers. In the previous versions, the hands were always open. Now we can make peace signs and close the hands. This makes the avatar more lively.
Changed the values of animation from radians (e.g., 1.57) to degrees (e.g., 90), so that we can understand them intuitively. I also kept backward compatibility for the old files.
Made the background gray. I realized that when the avatar is wearing black gloves, we cannot see them well because the background is black. Now users can choose the background color from black or gray.
Fixed the Enter key in the terminal to trigger animations (VS Code). Users can enjoy the animations in more situations with this update.
How to Use the AI Avatar Chrome Version
Install from Chrome Web Store: ↓↓
https://chromewebstore.google.com/detail/ai-avatar/afmcfaeaaojalninahhhjnonhmlmiidi
How to Use the AI Avatar VS Code Extension Version
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!
Version 7 Update
I'm already working on the version 7 update. More fun updates, so please stay tuned!
Update Ideas
- Add more AI features.
- Add more triggers for when the avatar reacts.
- Add more adjustable parameters.
- Add more avatars and animations.
- Update the animation editor to make it 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. Slowly, but still moving forward. I'll write a post about it soon.
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 almost time to go to Sweet Purple's concert with Maximum Blue. I have to go now. Let's go to the concert with you, me, and our avatars next time. Thank you for reading. See you!🫡
Comments Welcome!
- 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 (42)
Oh wow you launched an extension for both chrome AND vs code??? Crazyyyyy
Awesome creativity man!!! Always here cheering you on!!!
Thank you for your comment! Yes, I made both VS Code and Chrome versions. I mainly develop the VS Code version and only implement the differences for Chrome to reduce the workload.
I’m looking forward to our project too! It’s getting better. ☺️
Yes I'm thinking what to add next, where do we decide that "Ok this is enough for v2"?
Yes, we’ve already made many updates, so maybe we should complete it and release it as v2! 🚀
Okayyy!!! Let's do just one more thing like if we can make the dialogues better and more versatile?
Good idea! The dialogue part still has room for improvement. Let’s make it better. 😄
This is quite neat! I saw your other post about this development, but haven't got the chance to get to read more about it. Looks very creative! Great work :D
Thank you for checking! 😃 I have many update ideas flowing out of my head 🤯 I’ll give them a try one by one.
didn't know I needed a superhero pep talk every time I press Enter. downloading the VS Code one.
Thank you for checking! 😄 I hope you get energized by the superheroes and can code more productively!🦸 More updates are coming soon.
haha yeah, 3pm debugging sessions hit different with a cape. curious what features are coming next
At first, I thought you were debugging at 3 a.m. 😱 But I felt relieved when I realized it was 3 p.m. Anyway, I’m trying to create an app that supports users 24/7. 🦸
haha 3am would be a very different story. 24/7 support is honestly the harder problem - most apps quietly drop to 8/5 without anyone noticing
Yes, it is hard for services using real people to run 24/7, but my app just runs locally, so it will cheer you up even at 3 a.m. 🦸
fair enough, local apps have a real edge there. no pager duty, no uptime monitoring, just your machine and your 3am self
Ah! I’ll try to create a helpful app that won’t make users debug at 3 a.m. from the beginning. 😪
haha the 3am test is real - if local doesn't wake you up, that's already a win.
You're always so creative.
Thank you for your comment! 😄 I’m really enjoying creating AI Avatar. Don’t miss the next update!
This is such a fun idea AI for morale instead of just productivity. 🙌
We've got plenty of tools to help us ship faster. Not enough tools to help us feel better while shipping.
Love that you built for both Chrome and VS Code.
Quick question: can users customize the avatars or add their own?
Really cool project thanks for sharing something different. 🚀
Thank you for your comment! 😄 Yes, this app is customizable. You can use your own VRM for avatars and VRMA for animations. Also, you can create animations with the built-in Animation Editor. More updates are scheduled.
Nice addition! I’m choosing Candy Pink! 😁
Thank you for checking! Candy Pink is a good choice. She’s a good girl. Be careful not to get too addicted to her! 💘
great job, buddy! I enjoy that you are adding more avatar. Keep up the good work!
Thank you for your message! 😄 Yes, I'd love to keep updating and make AI Avatar more fun! 🦸
nice :)
Top stuff. Have met an Indian dev at the Google Chrome Hackathon who created something similar last year. Also open-source. Could find the link if you're interested.
Thank you for checking! 😀 I still have plenty of update ideas, so I’m good for now. Maybe I’ll ask you when I run out of ideas.
cool😁
Thank you for checking! 😁 Please stay tuned for the next update!
I WILL DO 😁
Love the superhero avatars idea! 🎭
Thank you for your message! 😁 Maybe more superheroes will join to support us in the future. Please wait until then.
Some comments may only be visible to logged-in visitors. Sign in to view all comments.