EllisShang

Case Study

VibeBud

Creator & Full-Stack AI Product Engineer · Open Source Project · May 2026

VibeBud media 1
VibeBud media 2
VibeBud media 3

Overview

Created VibeBud, an open-source floating AI buddy that gives Codex, Claude Code, and other coding agents a visible desktop, web, and Android presence.

Key Technologies

Next.js 16React 19TypeScriptTailwind CSS v4ElectronCapacitorAndroidlottie-reactOpenAIAnthropicOpenRouter

Achievements

  • Built the project as a weekend build over roughly two to three days.
  • Reached 80+ stars on GitHub.
  • Added 2D generated sprite sheets for different characters.
  • Supported 3D renders with actual rigged characters.

Story & Process

VibeBud is an open-source experiment in making AI coding agents easier to follow, manage, and feel present while working.

The product gives Codex, Claude Code, and other agents a visible form: a floating virtual buddy that can stay on top of the desktop, run in a web preview, and move toward Android overlay support.

What It Does

  • Connects to multiple Codex or Claude Code agents.
  • Lets users drag, dock, chat with, and organize buddies while coding.
  • Supports assigning tasks and surfacing notifications when an agent needs attention.
  • Includes built-in buddy personalities such as Helper, Tactician, Researcher, Skeptic, Cheerleader, and Empath.
  • Allows nearby buddies to form small teams, so agents can understand who else is available and defer to a better-suited specialist.

Product Direction

AI coding agents are becoming part of everyday development, but their interfaces still feel abstract. VibeBud explores a more personal and visible interaction model: instead of hiding agent work in terminal sessions, the user can see and manage agent state through lightweight characters.

This makes the project useful for developers experimenting with multi-agent coding, desktop companions, playful productivity tools, and more ambient development workflows.

Architecture

The repo is split into three surfaces:

  • core/: shared Next.js 16 App Router UI for web and bundled desktop rendering.
  • desktop/: Electron 33 wrapper with transparent, always-on-top behavior and click-through interaction.
  • mobile/: Capacitor 8 shell with an Android overlay module scaffolded through a foreground service.

The core app uses React 19, TypeScript, Tailwind v4, and lottie-react. Chat features support bring-your-own API keys for OpenAI, Anthropic, or OpenRouter, stored locally in the client.