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 (1)
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😭