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.
Let's take a look at them together!😆
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.
I added Kaleidoscope Mode. You can enjoy random-shaped backgrounds. Also, the kaleidoscope is adjustable, and you can adjust the shape as you like.
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 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.
Cursor Avatar. A VRM avatar pops up wherever you click, with animations and cheering bubbles.↓
https://github.com/webdeveloperhyper/cursor-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.
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 ↓↓
Install from Chrome Web Store: ↓↓
https://chromewebstore.google.com/detail/ai-avatar/afmcfaeaaojalninahhhjnonhmlmiidi
I'm already working on the version 21 update. More fun updates, so please stay tuned!
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!
Any other comments are also welcome!