Intro🥰
Do you feel lonely and want someone around you? Especially when you are fighting endless bugs alone at midnight like me? Leave it to me! I just invented the perfect app for us. It's the AI Avatar!🎉 The AI Avatar will cheer us up with its bright smile like the sun, enjoyable full-body animation, and thoughtful messages. The AI Avatar will watch over us carefully from a Visual Studio Code extension 24/7. This will surely satisfy our needs, so let's take a closer look at it.🚀
How to Use the AI Avatar📄
All you have to do is add the AI Avatar VSCode extension to your VSCode. That's it!
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 ↓↓
The Secrets of the AI Avatar🤫
Is the default avatar not your type? Don't worry. You can make your own lovely avatar easily and for free using VRoid.
https://vroid.com/en
Please make an avatar you fall in love with at first sight.
I wrote a post about VRoid last year before.↓
https://dev.to/webdeveloperhyper/how-to-make-ai-controled-avatar-1-vroid-2jde
The AI Avatar does not just display avatars. The AI Avatar will play an animation when Claude Code responds. Hooray! Claude Code now has a heart and feels alive like a human.🥰
Don't have Claude Code? Don't worry. The avatar will also play an animation when you click the avatar or press the Enter key. The AI Avatar is created for everyone to enjoy.
Don't like the animations? Don't worry. You can set the animation you like. Set the animation that matches your needs best.
Also, the AI Avatar will send you a cheering message when the animation plays. It will recharge your energy and help your coding progress.
Don't the default cheering messages cheer you enough? Don't worry. You can customize the messages as you like. Set the messages that encourage you the most.
This extension is built with Three.js, a popular 3D graphics library with the help of AI. Please check the README for more information.
https://marketplace.visualstudio.com/items?itemName=web-developer-hyper.ai-avatar
How to Release a VSCode Extension🚀
This was my first time releasing a VSCode extension. I thought it would be difficult, but it was easier than I imagined. You just need to create a publisher on the Visual Studio Code Marketplace and publish an extension to it. The approval process only took about five minutes.
Please check the official documentation for more information. ↓
https://code.visualstudio.com/api/working-with-extensions/publishing-extension
What I'm Struggling with in AI Avatar😿
Now I am using the official VRoid animations, but there are only 7 patterns. So I want to make my own avatar animations. However, it is quite challenging. When I use AI for avatar animation, it always ends up with a zombie pose.🧟 It seems that I have to study Blender to make an animation that is not a zombie. I want to add my original animations to version 2 if I succeed.
Version 2 Updete🤝
My DEV Community friend @gramli is preparing a super update. Something exciting is coming soon. Please stay tuned!😆
More Update Ideas💡
- Add more AI features.
- Add more adjustable parameters.
- Add more expressions and animations.
- Add more triggers for the avatar when it reacts.
If you have any update ideas, please let me know!
Collab Project in Progress🤝
I'm now working on a collab project with my DEV Community friend @itsugo. I'll write a post about it soon.
More about Animation and AI🎢
My posts about fun 2D/3D animation. ↓
- 💥How to Reduce Stress for Free (Mega Bazooka with React Three Fiber + AI)💥
- 🪙Let’s Become a Millionaire in a Second (Gold Fountain with React Three Fiber)🪙
- 🙀How to Create a CRAZY Roller Coaster Builder (🎢RollerCoaster.js + React Three Fiber + AI)
- How to Create Never-Ending Fun (🎢RollerCoaster.js + React Three Fiber + AI)
- (Learn with 🖼️Meme images) How to create 🎨3D animation using 🧠AI (React Three Fiber vs Three.js vs A-Frame + GSAP)
- 🧐I created a website animation that you might stare at for a while (GSAP)🎨)
Also, here are my posts about AI. ↓
- 🧠How to make Codex boost your mood like good old Claude Code (Getting back You're absolutely right!)🤖
- 🤖🤖How to run AI in parallel easily and for free (Git Worktree Runner)🧠🧠
- 🤖How to make AI follow your instructions more for free (OpenSpec)📝
- 🧠How to use AI more efficiently for free (Serena MCP)🧐
My Brain Training App (Muscle Brain) 💪🧠
Available as Chrome Extensions for Free
https://chromewebstore.google.com/detail/muscle-brain-ultimate-edi/nmlolddnfpfambkcnplggphjgbjeabfc
Available on Microsoft Store for Free
https://apps.microsoft.com/detail/9NG572QMV56M
Outro😍
Oh! It's time to have a date with my adorable avatar. I have to go now. Let's have some fun together with you, me, and our lovable avatars next time! Thank you for reading. See you!🫡
Comments Welcome!🗨️
- Do you have any ideas on how not to feel lonely?
- Do you have any ideas to make AI Avatar even more fun?
Any other comments are also welcome!👂
Top comments (3)
Man you're such a genius, I'm telling you. You've created this AI Avatar extension for VS Code that displays a customizable avatar that actually sends you cheering messages when you code, it's like having your own personal hype man! I wonder, though, what kind of animations will you add next, and will we be able to make our own custom messages for it?
Anyways looking forward to it all!!!
That's cool. So, the next goal is probably to turn the code into an MMO OpenWorld game? 🤯
Wow buddy! It is a really cool project:). I really like your AI avatar. Welcome to the club and the future :).