Update (2026/03/28): Added AI Avatar CodePen Demo
Intro
I am happy to announce that I have released version 2 of the AI Avatar!🎉 The AI Avatar will respond to Claude Code chatting, but you can also enjoy it without Claude Code. The avatar and animations are customizable, so you can use the ones you like. This time, I added a pose editor for animation. Also, my DEV Community friend @gramli joined and made lots of updates, like GitHub Copilot support. Thank you very much for updating! Please take a look at how the AI Avatar has improved.
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 VS Code extension version has a Pose Editor, so you can make the movements less awkward. ↓
How to Use the AI Avatar
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 ↓↓
Pose Editor
In the previous version, I suggested using the official VRoid animations. However, it has only seven patterns, so we will get bored of it soon. So I created a pose editor that lets you create as many pose animations as you like. You can now create poses graphically and easily using a GUI and save them as JSON files. I'm hoping users can enjoy this update even more.
You can adjust each part of the body: Z tilt, X forward, and Y rotation.
Ouch! Be careful not to tilt Z too much. Avatars are delicate and fragile.↓
Ouch! Be careful not to bend X too much. Treat the avatar like a newborn baby.↓
Ouch! Be careful not to rotate Y too much. Handle the avatar like a small animal.↓
Update from @gramli
Ever wish your VRoid avatar could keep up with multiple AI personalities? Well, now it can! My contribution adds Copilot as a watcher alongside Claude, tracks its chat activity, and even lets you switch between them like flipping TV channels. I also tweaked the UI so the buttons look nice in VS Dark theme. Behind the scenes, I refactored the watcher logic into a factory system, so adding future AI watchers will be like adding toppings to your favorite pizza, easy and satisfying! 😄
I’m not sure if I’m a “perfect” contributor, but I hope my CEO @webdeveloperhyper is happy with my work!
What I'm Struggling with in AI Avatar😿
To tell the truth, I want to make an AI animation generator from screenshots. However, I keep failing and end up creating zombie poses🧟, so I gave up for the second time and created a pose editor instead. Maybe I need to take more steps to convert images directly into animations, but I am skipping steps, so the AI cannot understand well. I will add an AI animation generator in version 3 if I succeed.
Version 3 Update
I am creating a Chrome extension version so more users can enjoy the AI Avatar more widely. So please stay tuned!😆
More Update Ideas💡
- Add more AI features.
- Add more adjustable parameters.
- Add more expressions and animations.
- Add more triggers for the avatar when it reacts.
If you have any update ideas, please let me know!
Collab Project in Progress
I'm now working on a collab project with my DEV Community friend @itsugo. 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 for dinner at a luxurious and fancy restaurant with my lovely avatar. I have to go now. How about having a party with you, me, and our lovable avatars next time. Thank you for reading. See you!🫡
Comments Welcome!
- Do you have any ideas to make animations easily?
- 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 (15)
The pose editor is the honest fix. You wanted AI to generate animations directly, but when it kept creating zombie poses, you built the tool that actually works instead of forcing the broken pipeline. That's building with the material you have, not the one you wish you had.
Thank you for your comment! 😀 Yes, the Pose Editor is one of the highlights of version 2. But I still want to make an AI screenshot animation generator that doesn’t create zombie-like poses in the future, if I find a way. 😅
This is a really fun idea, no more lonely devs! 😄 The pose editor is a great addition. I’m curious how far you plan to push animations in future versions. Nice work!
I’ve really enjoyed collaborating with you. I’ve only contributed a few small additions so far, but it’s been a great experience working with such a great CEO 😄
Thank you! 😺 My mission is to make more developers happy by providing an AI avatar. 🫡 This plan depends on our super CTO, @gramli! 😆
Great job buddy! Don't give up on the AI avatar. Welcome to the club! I prefer to use google colab than jupyter notebook.
Thank you for checking! 😀 Yes, I want to add more AI features. I might create a function where users can set an AI API key and the AI does something fun.
Great idea! I hadn’t even considered a project like that :).
I wonder if I can use Claude Code itself for a new AI feature. In that case, I wouldn’t need an API key, but maybe that’s not possible. 🤔
That is good question! I am not 100% sure.
Whats the engine behind it?
Thank you for checking!😀 This extension has structure as follows.
This is such a fun upgrade—love the pose editor idea, it makes the avatar feel way more alive and customizable! 🚀
Thank you for your comment! 😄 I would love to add an AI screenshot animation generator or a timeline animation editor if possible, and make the AI Avatar more lively! 💃
It’s amazing how you never run out of ideas! My favorite is still the Gold Fountain, the Mega Bazooka version 🔥
Thank you! The Gold Fountain with Mega Bazooka has gotten the most likes so far, but I'm trying to make AI Avatar exceed that record. Maybe I should add a fountain or something in the next update. 🪙🪙🪙
I'm looking forward to your next post too!😄