{"slug": "ai-avatar-v20-cursor-avatar-notification-avatar-voxel-avatar", "title": "AI Avatar v20, Cursor Avatar, Notification Avatar (Voxel Avatar)🧊", "summary": "A developer released AI Avatar v20, a free VS Code extension and Chrome side-panel app that displays an animated VRoid (VRM) avatar reacting to Claude Code, GitHub Copilot, ChatGPT, and Claude. The update adds a Minecraft-style voxel idle gardening game, a Kaleidoscope mode, Piper text-to-speech alongside Kokoro, and a new Electron desktop app, plus spin-off Cursor Avatar and Notification Avatar tools built on Claude Code and Codex Hooks.", "body_md": "**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.\n\nThis time, I have 4 main topics.\n\nLet's take a look at them together!😆\n\nI 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](https://dev.to/shubhradev), loves gardening, and growing flowers looked perfect for an idle game.\n\nI 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.\n\nThe 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.\n\nI added Kaleidoscope Mode. You can enjoy random-shaped backgrounds. Also, the kaleidoscope is adjustable, and you can adjust the shape as you like.\n\nI 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.\n\nAI 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.\n\nCursor Avatar. A VRM avatar pops up wherever you click, with animations and cheering bubbles.↓\n\n[https://github.com/webdeveloperhyper/cursor-avatar](https://github.com/webdeveloperhyper/cursor-avatar)\n\nI 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`.\n\nFirst, I made a simple script and tested that it worked.↓\n\n[https://github.com/webdeveloperhyper/claude-code-codex-notification](https://github.com/webdeveloperhyper/claude-code-codex-notification)\n\nNext, I integrated it into the avatar and created Notification Avatar.↓\n\n[https://github.com/webdeveloperhyper/notification-avatar](https://github.com/webdeveloperhyper/notification-avatar)\n\nThere seems to be more that Hooks can do, so I would like to learn more about them.\n\nYou can download the AI Avatar VS Code extension in two ways.\n\nOption 1: Install from VS Code: `Extensions` button in the left sidebar > Search **AI Avatar** > `Install` ↓↓\n\nOption 2: Install from the VS Code Marketplace: [https://marketplace.visualstudio.com/items?itemName=web-developer-hyper.ai-avatar](https://marketplace.visualstudio.com/items?itemName=web-developer-hyper.ai-avatar) ↓↓\n\nInstall from Chrome Web Store: ↓↓\n\n[https://chromewebstore.google.com/detail/ai-avatar/afmcfaeaaojalninahhhjnonhmlmiidi](https://chromewebstore.google.com/detail/ai-avatar/afmcfaeaaojalninahhhjnonhmlmiidi)\n\nI'm already working on the version 21 update. More fun updates, so please stay tuned!\n\nAh! 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!\n\nAny other comments are also welcome!", "url": "https://wpnews.pro/news/ai-avatar-v20-cursor-avatar-notification-avatar-voxel-avatar", "canonical_source": "https://dev.to/webdeveloperhyper/ai-avatar-v20-cursor-avatar-notification-avatar-voxel-avatar-4dd2", "published_at": "2026-09-13 23:30:12+00:00", "updated_at": "2026-09-13 23:51:19.521846+00:00", "lang": "en", "topics": ["ai-tools", "ai-products", "developer-tools", "generative-ai"], "entities": ["AI Avatar", "VS Code", "Claude Code", "GitHub Copilot", "ChatGPT", "Claude", "Cursor Avatar", "Electron"], "alternates": {"html": "https://wpnews.pro/news/ai-avatar-v20-cursor-avatar-notification-avatar-voxel-avatar", "markdown": "https://wpnews.pro/news/ai-avatar-v20-cursor-avatar-notification-avatar-voxel-avatar.md", "text": "https://wpnews.pro/news/ai-avatar-v20-cursor-avatar-notification-avatar-voxel-avatar.txt", "jsonld": "https://wpnews.pro/news/ai-avatar-v20-cursor-avatar-notification-avatar-voxel-avatar.jsonld"}}