Intro
AI Avatar is a free app where your VRoid (VRM) avatar cheers you with all its might.๐ค It lives in your VS Code sidebar (reacts to Claude Code / GitHub Copilot) or browser side panel (reacts to ChatGPT / Claude). Animations and speech bubbles all run without AI too.
This time, I have 4 main topics.
- Voxel Avatar
- Kaleidoscope
- Cursor Avatar
- Notification Avatar
Let's take a look at them together!๐
Voxel Avatar
I want to add an idle game mode requested by one of my collaborators, Maximum Blue. An idle game is a game that runs automatically. AI Avatar is triggered by Claude Code or a click, so I thought it matched the idle game concept. Also, I chose flower gardening as the topic of this mode because one of my DEV Community friends, @shubhradev, loves gardening, and growing flowers looked perfect for an idle game.
I made it a simple, Minecraft-like voxel garden to start with. You can let the flower garden grow automatically with Claude Code or click and manually grow it by hand. You can level the land and plant flowers. You can set butterflies too. Sometimes it rains, but after that, you can see a rainbow. Please enjoy Voxel Avatar and create a garden full of beautiful flowers. I hope you have a cozy and relaxing coding time with it.
The hardest part was not coding but making 3D objects. I just wanted to make a simple 3D flower using Three.js, but AI couldn't make it at all. The first thing it made for a flower was a cylinder with a sphere stuck on it.๐คฃ So I had to explain how to make a flower in detail, one step at a time, like adding 5 thin oval petals using thin cylinders around the flower center.
Kaleidoscope
I added Kaleidoscope Mode. You can enjoy random-shaped backgrounds. Also, the kaleidoscope is adjustable, and you can adjust the shape as you like.
Piper TTS
I was using Kokoro as my TTS (text-to-speech). It is good quality, but it had a little delay and needed some settings to use it. So I added Piper TTS as an easier option for hearing the speech bubble.
AI Avatar Spin-Off
AI Avatar can only live inside VS Code and Chrome side panel because it is an extension. So I made a spin-off Electron desktop app. Now the avatar can live anywhere, even outside the side panel.
1. Cursor Avatar
Cursor Avatar. A VRM avatar pops up wherever you click, with animations and cheering bubbles.โ
https://github.com/webdeveloperhyper/cursor-avatar
2. Notification Avatar
I am using Claude Code and Codex at work. They don't have default stop and approval notifications. And I often don't notice when they stop. So I made Notification Avatar using Hooks.
First, I made a simple script and tested that it worked.โ
https://github.com/webdeveloperhyper/claude-code-codex-notification
Next, I integrated it into the avatar and created Notification Avatar.โ
https://github.com/webdeveloperhyper/notification-avatar
There seems to be more that Hooks can do, so I would like to learn more about them.
How to Use the AI Avatar VS Code Extension Version (Thank you 300+ installs!)
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 โโ
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 CCO (Chief Creative Officer) ๐คฃ, @annavi11arrea1 collaborated with Catbot and AI Avatar in version 17, and keeps supporting me. Thank you very much!
- My friend and CDO (Chief Design Officer)๐คฃ, @rutenveil helped create the cool effects in version 15. and keeps supporting me. Thank you very much!
- My DEV Community friend and CTO (Chief Technology Officer)๐คฃ, @gramli helped update AI Avatar in version 2, and keeps supporting me. Thank you very much!
- My DEV Community friend and CMO (Chief Marketing Officer)๐คฃ, @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 21 Update
I'm already working on the version 21 update. More fun updates, so please stay tuned!
Outro
Ah! It's time to water my beautiful flower garden, so I have to go now. I would love to add more fun features and also use the latest AI in my next updates. I hope you enjoy the new updates to AI Avatar. Thank you for reading, and have a wonderful 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 (26)
Even a desktop app? Itโs getting really big! ๐ฎ Now the only thing missing is a mobile app. ๐
Thank you for your idea! ๐ Yes, I thought about releasing mobile apps before. But releasing an Android app requires testers, and an iPhone app costs a lot, so I gave up. But if by any chance, AI Avatar becomes a big hit, I would love to release them too. ๐ฑ
I know the cost problem with iPhone apps, it stopped me a few times too. ๐ But I understand why Apple does it. What do you mean by the Android app needing testers?
BTW, it just came to my mind that this app actually connects a lot of community members, which I think is one of the core ideas behind DEV communities and you did a great job with it. ๐๏ธ I think it deserves a precious Gem! ๐ My precious... ๐๐
An Android app needs 12 testers to test it for 14 days before release. This is quite challenging, and I gave up in an instant. ๐คฃ
Thank you for the gem. I got a new gem badge. ๐ Yes, AI Avatar is supported by many DEV Community friends like you. Thank you for your continued support! ๐
This is such a fun update! ๐ And thank you so much for the mention! I definitely wasn't expecting my love for gardening to end up as a whole voxel flower garden. I really like the idea of connecting the idle-game concept with Claude Code and letting the garden grow while you work. The Notification Avatar is a really nice addition too. It's really nice to see how much AI Avatar has grown with each version.
Thank you! Without your post, I would not have come up with the gardening idea. Gardening seems perfect for an idle game and has a relaxing effect. Please stay tuned to see how the garden grows in future updates! ๐น๐ท๐ป
Nice update๐ The desktop app gives AI โโAvatar much more freedom and expanded capabilities, so it becomes more powerful๐ช
Thank you for checking! ๐ Yes, a desktop app can do different things from VS Code and Chrome extensions. So I would like to try new things to make the most of a desktop app.
Desktop app wow ๐ฎ I didnโt expect this! The avatar living outside the VS Code/browser side panel is such a cool idea ๐
Thank you for your comment! ๐ Yes, a desktop app can do things that VS Code and Chrome extensions cannot do. So I am thinking of making spin-off desktop apps to make the AI Avatar world wider. ๐
Cool โค๏ธ you are so creative!! ๐
Thank you for your comment! I would love to make more creative and fun things in the future! ๐
Awesome, thank you for the shout out! You are doing great things with this project!
๏ผผ(^-^)๏ผ
Thank you! I still love your CatBot. Magnificent design! ๐บ
Wowww this has really come a long way from where it started WDH!!! Proud to see the progress! Keep building and keep learning!
Again thank you for the mention hahaha๐ญ
Thank you for your comment! ๐ญ Yes, it's been a while since the avatar project started. But there are still many more things I want to build and learn! โ๏ธ
The part about AI failing at 3D flower geometry tracks with my experience โ LLMs are terrible at translating spatial reasoning into Three.js code. I spent 4 hours once trying to get an AI to generate a proper torus knot and ended up writing the vertex math myself. The voxel garden approach is smart though, since boxes are the one shape AI can reliably produce.
Thank you for your comment! ๐ Yes, normal AI was not so good at making 3D objects as I was expecting.
I would like to try the latest AI like "Astra" that is good at 3D, or 3D-specific AI like "Tripo" if I have a chance and find a better way to create 3D objects easily.
๐ง ๏ผจ๏ฝ๏ฝ๏ฝ ๏ฝ๏ฝ๏ฝ๏ฝ๏ฝ๏ฝ๏ฝ๏ฝ๏ฝ๐๐ญ๏ฝ๏ฝ๏ฝ๏ฝ ๏ฝ๏ฝ ๏ฝ๏ผ๏ผ๏ผ ๐
๐ฑ ๐ฅ๐ธ๐ง๐ฎ๐ต ๐๐ช๐ป๐ญ๐ฎ๐ท ๐ฅ๐ฒ๐ซ๐ฎ๐ผ: The cozy flower-growing idle mode is pure genius! Fighting Three.js for custom 3D petals sounds like an epic coding quest though! ๐ท๐
๐ฑ๏ธ ๐๐ป๐ฎ๐ช๐ด๐ฒ๐ท๐ฐ ๐๐พ๐ฝ: The Electron desktop app and Cursor Avatar stepping outside the side panel? Absolute game-changers!
โก ๐ข๐ถ๐ช๐ป๐ฝ ๐ค๐น๐ฐ๐ป๐ช๐ญ๐ฎ๐ผ: Piper TTS for smoother speech and those Notification Hooks for Claude Code are super handy.
โจ ๐๐ช๐ท'๐ฝ ๐๐ช๐ฒ๐ฝ ๐ฝ๐ธ ๐ผ๐ฎ๐ฎ ๐๐ฑ๐ช๐ฝ ๐๐ธ๐พ ๐ฌ๐ธ๐ธ๐ด ๐พ๐น ๐ฏ๐ธ๐ป ๐ฟ21! ๐๐ฎ๐ฎ๐น ๐ป๐ธ๐ฌ๐ด๐ฒ๐ท๐ฐ ๐ฒ๐ฝ! ๐โจ
Thank you for your comment! Haha! ๐คฃ Your font is unique and fashionable! I've never seen such a style.
really wow, man! you are really getting good with the avatar :)
Thank you for checking out AI Avatar! ๐ I will keep using avatars and making fun things!
Nice
Some comments may only be visible to logged-in visitors. Sign in to view all comments.