DEV Community

Cover image for ๐ŸŽฅAI Chat, AI Cheering Messages, and Animation Editor Hyper (AI Avatar v10: VS Code and Chrome Extension)
Web Developer Hyper
Web Developer Hyper

Posted on

๐ŸŽฅAI Chat, AI Cheering Messages, and Animation Editor Hyper (AI Avatar v10: VS Code and Chrome Extension)

Gemini and local LLM support via Ollama

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 updating AI Avatar since March. This time, I made two big updates: new AI functions and a complete renewal of the Animation Editor. Let's take a look at them.

1. New AI Functions

1-1. AI Chat

AI Avatar triggers 3D avatar animations through Claude Code and GitHub Copilot chat as an AI feature. However, I haven't integrated API-based AI or local LLMs yet. My DEV.to friends @gramli used local LLMs, and @benjamin_nguyen_8ca6ff360 used API-based AI in their posts. So I was inspired by them to add these features and started with a simple AI chat.

I chose the Gemini API for API-based AI because there is a free plan, so users can get their own API key and test it easily for free. I selected the lightweight model Gemini 3.1 Flash-Lite as the default since I considered the use case to be simple AI chat. Users can change the model in the settings.

I chose Ollama for handling local LLMs. First, I tried Qwen3.5:2b because it is a small model and requires only about 2GB of memory. My laptop has 8GB of memory without a GPU๐Ÿ˜“, but I thought this lightweight model would work. However, it timed out after 2 minutes even if I only sent "hi" as a test. Next, I changed to a lighter model, Qwen3.5:0.8b, but it still timed out. I tested these models directly in the Ollama app and found that Qwen3.5 is a thinking model, so it overthinks and responds too much even to a simple "hi". Here is what it was thinking in the background. โ†“๐Ÿคฃ

"Hello! ๐Ÿ‘‹ How's your day going? Anything I can help you with?"
Or just: "Hi! How are you doing?"
Let's combine friendliness with a call to action.
"Hi! ๐Ÿ‘‹ How's it going? Anything I can help you with today?"
Wait, I need to make sure I don't sound too robotic.
"Hey! ๐Ÿ‘‹ How's your day going? Anything I can help you with?"
Okay, final choice.
"Hi! ๐Ÿ‘‹ How are you doing today? Is there anything I can help you with?"
Or more concise: "Hi! ๐Ÿ‘‹ How can I help you today?"
Let's go with: "Hi! ๐Ÿ‘‹ How's your day going? Is there anything I can help you with?"
Wait, looking at the instruction again, just "hi". Simple is best.
"Hi! ๐Ÿ‘‹ How's your day going? Anything I can help you with?"
Enter fullscreen mode Exit fullscreen mode

Next, I changed to Qwen2.5:3b, which is not a thinking model, and finally the chat worked without a 2-minute timeout. Users can switch to other models from the settings.

Local LLMs are quite slow on the first call because they need to be loaded into memory, but they get much faster afterward. So I added a warm-up feature to make the initial call faster.

It depends on your PC specifications, but usually local LLMs are slower and less capable than API-based AI. However, local LLMs are free and safe because they run on your PC. So please choose between API-based AI and local LLMs based on your needs.

1-2. AI Cheering Messages

AI Avatar triggers not only animations but also cheering messages when you press the Enter key and send prompts to AI. Although you can customize the messages as you like, they were previously selected randomly from a registered list. Since I had just added Gemini API and Ollama for AI chat, I also updated the cheering messages to be generated by AI according to your prompts. AI Cheering Messages make AI Avatar more lively and feel closer to you.

2. Animation Editor Hyper

AI Avatar has an Animation Editor for creating avatar animations. However, it might be a little complicated for beginners to make animations. So this time, I updated the Animation Editor with 8 improvements so that everyone, including beginners and children, can enjoy animation. It's the all-in-one Animation Editor Hyper! I think it is easier than making animations in Blender. Let's take a quick look at how the new Animation Editor Hyper is beginner-friendly.

2-1. Full Tab Display

Detail
Before The editor was inside a small side panel. Users needed to switch between buttons, sliders, and inputs every time they edited. Users needed many clicks for editing.
After I made a new full tab only for animation editing. All the buttons, sliders, and inputs are on one screen. Users need fewer clicks and less movement for editing.

2-2. 3-Side Display

Detail
Before The editor only displayed the avatar from the front. Users needed to rotate it to see side views.
After The editor displays right, front, and left views in one tab. Users do not need to rotate and can see all the views at once.

2-3. Image Holder

Detail
Before The editor had no image holder. Users needed to open the reference image in another window.
After The editor has an image holder next to the avatar. Users can easily refer to a sample pose image.

2-4. Bone Trail

Detail
Before The editor had no bone trail. It was hard for beginners to understand how the bones move.
After The editor has a bone trail. Beginners can easily understand how each bone moves with the support of the bone trail.

2-5. Pose Presets

Detail
Before The editor had no presets. Users had to make animations from the beginning.
After The editor has presets. Users can create animations from presets and speed up the animation process.

2-6. VRMA Export of Animations

Detail
Before The editor saved animations only as JSON. Users could only use the JSON in this app.
After The editor saves animations as JSON and VRMA. Users can use VRMA in other apps.

2-7. Random Animation Custom Mode

Detail
Before The app had only preset random animations. Although there were 256 patterns, users might get tired of them soon.
After The app has custom random animations. Users can enjoy random animations as they like by setting custom files.

2-8. Random Animation Editor

Detail
Before It was not implemented in the editor. Users could only use preset random animations.
After It is included in the editor. Users can easily create random animations in the editor.

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.

How to Use the AI Avatar Chrome Version

Install from Chrome Web Store: โ†“โ†“
https://chromewebstore.google.com/detail/ai-avatar/afmcfaeaaojalninahhhjnonhmlmiidi

Special Thanks

My DEV Community friend and CTO๐Ÿคฃ, @gramli helped update AI Avatar in version 2 and keeps supporting me. Thank you very much!
My DEV Community friend and CMO๐Ÿคฃ, @itsugo. Our avatar collaboration project was the beginning of AI Avatar and keeps supporting me. Thank you very much!
My colleague Maximum Blue helped make unique avatars in version 6 and keeps supporting me. Thank you very much!

Version 11 Update

I'm already working on the version 11 update. More fun updates, so please stay tuned!

Outro

This is just the beginning of AI features, and Iโ€™m thinking of adding more fun AI features in the future! Also, I added everything I could imagine to make creating animations easier in Animation Editor Hyper. I hope its user experience has gotten better than before. Please have a fun time creating animations for your favorite avatar. Thank you for reading, and have a great AI Avatar life.

Comments Welcome!

  • Do you have any ideas to make AI Avatar even more fun?
  • Do you have any ideas to add more AI features?
  • Do you have any ideas for making cool avatars and animations?
  • Do you have any ideas to improve the user experience?
  • Do you have any ideas for increasing the number of users of AI Avatar?

Any other comments are also welcome!

Top comments (31)

Collapse
 
itsugo profile image
Aryan Choudhary

It's honestly wild seeing how far AI Avatar has come since the early versions ๐Ÿ˜„

One thing that stood out to me in this update wasn't even the AI chat, it was Animation Editor Hyper. The full-tab editor, multi-view layout, image references, presets, and bone trails all feel like improvements aimed at reducing friction for creators, which is something I think a lot of tools overlook.

Also the Qwen story had me laughing ๐Ÿคฃ

Spending two minutes internally debating how to reply to "hi" is probably the most relatable AI behavior I've seen all week.

Congrats on v10, WDH! It's been fun watching AI Avatar grow from a fun avatar idea into a full ecosystem with VS Code, Chrome, AI features, and animation tools. Looking forward to seeing what kind of chaos you add in v11 ๐Ÿš€

Collapse
 
webdeveloperhyper profile image
Web Developer Hyper

Thank you for your comment! ๐Ÿ˜€ Yes, thinking models take time because they think more deeply. So they werenโ€™t a good fit for my use case of simple AI chat and messaging, since I wanted fast responses. However, when you need to solve difficult problems, that extra thinking becomes an advantage and can provide more well-considered responses. So I learned that choosing the right type of AI for each situation is important.

Collapse
 
itsugo profile image
Aryan Choudhary

That's actually a really interesting lesson to learn firsthand.

I think a lot of people (including me at times ๐Ÿ˜…) get caught up chasing the "smartest" model, but in practice the best model is often the one that fits the problem.

If the task is simple and speed matters, waiting 30 seconds for a deep reasoning chain is probably overkill. But for debugging something nasty at 2am or solving a complex architecture problem, that extra thinking can be worth it.

It's cool seeing how many of these tradeoffs you've had to learn while actually shipping AI Avatar instead of just theorizing about it.

Thread Thread
 
webdeveloperhyper profile image
Web Developer Hyper

Yes, I'm testing many AI models to find the ones that fit AI Avatar's needs. The next version will come with a new AI feature, so please stay tuned! ๐Ÿซก

Collapse
 
francistrdev profile image
FrancisTRแด…แด‡แด  (ใฃโ—”โ—กโ—”)ใฃ

Peek update! Great for from you both!

Collapse
 
webdeveloperhyper profile image
Web Developer Hyper

Thank you for checking! ๐Ÿ˜„ More AI and animation updates are coming. Stay tuned for future improvements!

Collapse
 
shubhradev profile image
Shubhra Pokhariya

The Qwen story is relatable. A thinking model doing exactly what it was designed for, just completely wrong fit for the use case. I have hit that same thing where the model is technically working but just feels off in practice.

The warm-up feature is smarter than it looks too. That first load delay is usually where people assume something broke and never try again.

The 3-view layout and bone trails in the editor stood out more to me than the AI parts. Those are the kind of changes that actually make a tool easier to use instead of just adding more options.

Nice update.

Collapse
 
webdeveloperhyper profile image
Web Developer Hyper

Thank you for your message!๐Ÿ˜Š I have many new update ideas for AI Avatar and lots of fun new features to add. But I also want to improve the existing features to provide a better user experience. This part isnโ€™t flashy, but itโ€™s important.

Collapse
 
varsha_ojha_5b45cb023937b profile image
Varsha Ojha

This looks like a pretty ambitious mix of features.

The hard part will probably be making the whole experience feel focused, because chat, avatar, cheering messages, and animation editing can easily become too much if the core use case isnโ€™t clear.

Collapse
 
webdeveloperhyper profile image
Web Developer Hyper

Thank you for checking! ๐Ÿ˜ƒ Yes, I feel the same way. I keep adding new features to AI Avatar because they look fun and interesting. However, the more features I add, the more time I need to spend balancing them with the existing ones, and sometimes I get confused myself. AI Avatar's mission is to support and cheer on developers, so Iโ€™d like to do both: add new fun features and continue improving the existing ones.

Collapse
 
effnd profile image
Marat Sabitov

Great article!๐Ÿ‘

Recently, I also fell into the trap of the Qwen model thinking and almost decided that it was time to buy a more powerful laptop๐Ÿ˜…

And by the way the progress of AI Avatar seems to me, that a link to Steam or Epic Games Store will appear soon. That would be very interesting!

Collapse
 
webdeveloperhyper profile image
Web Developer Hyper

Thank you for checking! I want AI Avatar to become famous enough for me to graduate from my 8GB, no-GPU laptop. ๐Ÿคฃ The more I learn about local LLMs, the more I want a better PC. Adding versions for platforms like Steam and the Epic Games Store is a good idea. Iโ€™d like to try that when the main version becomes popular enough.

Collapse
 
hemapriya_kanagala profile image
Hemapriya Kanagala

Wow, this looks like a lot of work went into a single update. I like how you did not just add new AI features but also spent time improving the animation editor itself. Reading through all the changes, it feels like you were constantly thinking about how to make things easier for users, especially beginners.

The part about testing different local models was interesting too. It is always nice to hear about the challenges behind the scenes and how you solved them. Great update, and I am excited to see what version 11 brings.

Collapse
 
webdeveloperhyper profile image
Web Developer Hyper

Thank you for your comment! ๐Ÿ˜„ Yes, creating avatar animations is fun, but it can be a little complicated, especially for beginners. So I wanted to make it more beginner-friendly and provide a better user experience. I also wanted to make it easy to use for myself, since Iโ€™m an animation beginner too.

Collapse
 
zep1997 profile image
Self-Correcting Systems

The Qwen story stuck with me but not just for the laugh. A thinking model is doing
exactly what it was designed to do, just not for a use case that needed it. That gap
between "most capable model" and "right model for this specific job" is something I've
been running into building my own agent setup. For interactive and responsive work a
fast lightweight model beats a deep reasoner every time. The warm up feature is a smart
touch too that first load latency is the silent UX killer for local LLMs and most
people just ship around it instead of solving it. Good build.

Collapse
 
webdeveloperhyper profile image
Web Developer Hyper

Thank you for your comment! ๐Ÿ˜ƒ I just started using local LLMs, and there are so many models with different characteristics. Iโ€™d like to try many of them and find the one that best fits my app.

Collapse
 
advids profile image
avilash behera

๐Ÿš€ The local LLM debugging section cracked me up thinking models really do overthink the simplest things. Adding the Gemini API as a lightweight default makes total sense for a smooth out-of-the-box experience.

Also, the Animation Editor Hyper upgrade looks massive. The 3-side view and image holder are such smart UI choices for anyone trying to tweak a pose without fighting the camera. Keep up the awesome work!

Collapse
 
webdeveloperhyper profile image
Web Developer Hyper

Thank you for checking! ๐Ÿ˜ƒ Yes, I want to add more trendy AI features to stay up to date. But I also want to make the other core part of AI Avatar, the animation features, even better and more fun.

Collapse
 
gramli profile image
Daniel Balcarek

Amazing update! ๐Ÿš€

It's crazy how detailed the animation editor has become and the AI features are great too!

It feels like you're building a new Blender right inside the browser, but for avatars. ๐Ÿ˜„

Collapse
 
webdeveloperhyper profile image
Web Developer Hyper

Thank you for your comment! ๐Ÿ˜„ Yes, Blender is too complicated for beginners. It takes many steps to do even simple things. I gave up on Blender many times because of its complexity. On the other hand, Animation Editor Hyper has minimal functions focused on avatar animation, so it might help beginners enjoy creating animations.

Collapse
 
benjamin_nguyen_8ca6ff360 profile image
Benjamin Nguyen • Edited

Great job, buddy! It looks good.

Collapse
 
webdeveloperhyper profile image
Web Developer Hyper

Thank you for checking! ๐Ÿ˜„ I finally implemented the Gemini API. Iโ€™m surprised that we can use Gemini for free. It seems that Gemini can do a lot more, so Iโ€™m thinking about adding more Gemini features. Please stay tuned for future Gemini updates!

Collapse
 
benjamin_nguyen_8ca6ff360 profile image
Benjamin Nguyen

Nice! They are free except for geminie 3 pro. You have to paid fort the model. I like Gemini compare to other models.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.