😊How to Get Cheered Up 24/7 (AI Avatar v4 with Animation Editor (Chrome Extension + VS Code Extension))

#ai #webdev #javascript #discuss

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: Extensions button 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. ↓

Also, here are my posts about AI. ↓

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