Intro
AI Avatar is a VRM 3D character in your VS Code sidebar that reacts to Claude Code / GitHub Copilot AI activity and Enter key.
Hooray!π I released version 4 of AI Avatar! My last post was about version 2, and there have been 2 big updates since then. Version 3 is the release of the Chrome Extension version, and version 4 is the release of the Animation Editor. Now, AI Avatar has popped out of VS Code and into the web. Let's take a look at how they are.
Chrome Extension Version
AI Avatar was working only on VS Code. But wait. Users might want to stay with their beloved avatar and get cheered not only when coding but also when browsing websites. This is really a serious problem, and I rushed to create a Chrome extension version.
The Chrome extension also runs on Edge. I heard that about 70% of users use Chrome and about 10% use Edge, so making a Chrome extension version can cover most of the users waiting for website support.
Creating both the VS Code version and the Chrome version will be quite hard, but my mission is to make people happy, so I proceeded while imagining the smiles of the users. I tried to make the coding process efficient and not create two full versions, but only code the diff for Chrome since I had already created the VS Code version.
Animation Editor
The previous Pose Editor could only set one pose per animation, for example, the avatar could only extend its arms. But now, with the Animation Editor, the avatar can set several poses in one animation, so it can do things like bend its arms first and stretch them out later. The Animation Editor can make your avatar more lively! I rewrote all the default animations included in AI Avatar from a single pose to full animations, so please enjoy the moves. This is a sample animation demo.β
AI Avatar CodePen Demo
This is a minimal CodePen demo of the AI Avatar. Check out the angel-like smile and the avatarβs awkward movements! The actual AI Avatar has a Animation Editor, so you can make the movements less awkward. β
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 5 Update
I'm already working on the version 5 update. More fun is coming our way, so please stay tuned!
More Update Ideas
- Add more AI features.
- Add more adjustable parameters.
- Add more expressions and animations.
- Add more triggers for when the avatar reacts.
If you have any update ideas, please let me know!
Collab Project in Progress
I'm working on a collab project with my DEV Community friend @itsugo. It's progressing slowly, but it's 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 a concert with my dearest avatar. I have to go now. Let's go to another concert with you, me, and our avatars next time. Thank you for reading. See you!π«‘
Comments Welcome!
- Do you have any ideas to make animations easier and more realistic?
- Do you have any ideas to add more AI features?
- Do you have any ideas to make AI Avatar even more fun?
Any other comments are also welcome!
Top comments (17)
γγ£γ‘γγγγγΌ!!! Looking forward to more!! Also I will finally get to work on our project this weekend!
γγγγ¨γοΌπ Iβll make AI Avatar even more fun. Also, letβs make our project even more fun too!
Good work!
Thank you for your message! π It really cheers me up!
nice man :)
Thank you for your comment! π I enjoy creating AI Avatar. π€― I have many more ideas in mind.
nice :). I can't wait.heheh
I couldn't wait for this version. NICE! π
Thank you for testing! π Ah! My lovely avatar is in such an acrobatic pose. π€£ She is ultra-flexible, so she never gets hurt. π
When I was playing with poses, I thought it could display the actual time like a human clock π The left arm as the big hand, the right arm as the small hand, and the legs as the seconds hand π€£π€£
If you want to create a clock-like animation, I think you need to make a lot of frames. But thatβs pretty tedious. I wish I could make the Animation Editor more useful. π€
i've been playing with some local llms for code analysis and while the results are impressive the latency is still pretty hgih. surprised to see this is a chrome extension
Thank you for checking! π AI Avatar only does simple things so far, so it can work quickly. I hope I can add more cool AI features in the future.
Some comments may only be visible to logged-in visitors. Sign in to view all comments.