What I Built
Pixel Pal is a VS Code extension that turns your coding workflow into an RPG adventure. It creates a visual feedback loop where your "pal" reacts to your development habits in real-time.
But it does more than just look cute—it is designed to gamify the adoption of GitHub Copilot CLI.
Developers often forget to use CLI tools. Pixel Pal sits in your sidebar and watches for specific "Magic Keywords." When you use GitHub Copilot (e.g., typing gh copilot in the terminal or planning AI prompts in comments like // copilot explain), the Pixel Pal casts a Magic Spell and awards you XP.
It turns "asking for help" into a "power move."
Key Features:
- 🧙♂️ AI Detection: Detects
copilotoraikeywords in your code/terminal and triggers a "Cast Spell" animation to celebrate using the CLI. - ⚔️ Git Combat: Typing
git pushtriggers an "Attack" animation—you aren't just uploading code, you are slaying the backlog! - 🏃 Flow State: The pet runs when you type, mirroring your momentum.
- 🛡️ Save Streaks: Saving your file (
Ctrl+S) triggers a Jump animation and celebratory HUD message. - 🐛 Error Empathy: If you have syntax errors, the pet looks hurt, encouraging you to fix bugs quickly to "heal" him.
Demo
Here is Pixel Pal in action. Watch how the character reacts to typing, saving, and specifically using Copilot commands.
My Experience with GitHub Copilot CLI
Building Pixel Pal was a meta-experience. I wanted to build a tool for Copilot users, while using Copilot to build it.
I used the GitHub Copilot CLI to help me navigate the complex VS Code Extension API. Specifically, it helped me bridge the gap between the Extension Backend (TypeScript) and the React Webview Frontend.
- It generated the initial
useEffectlogic to handle the message passing system. - It suggested the "Debounce" logic to stop the running animation when I stopped typing.
The CLI allowed me to stay in my terminal workflow without constantly switching to documentation tabs. Pixel Pal is my tribute to that workflow—making the terminal feel like a magical place to build software.
Link to Source Code:
https://github.com/gbollybambam/pixel-pal