EllisShang

ケーススタディ

VibeBud

クリエイター & フルスタック AI プロダクトエンジニア · オープンソースプロジェクト · 2026年5月

ライブプロジェクトを表示https://github.com/Shellishack/vibebud
VibeBud media 1
VibeBud media 2
VibeBud media 3

概要

Codex、Claude Code、その他のコーディングエージェントに、デスクトップ、Web、Android 上で見える存在感を与えるオープンソースの浮遊 AI バディ VibeBud を作成。

主要技術

Next.js 16React 19TypeScriptTailwind CSS v4ElectronCapacitorAndroidlottie-reactOpenAIAnthropicOpenRouter

成果

  • 週末プロジェクトとして約2-3日で構築。
  • GitHub で 80+ stars を獲得。
  • 異なるキャラクター向けに 2D 生成スプライトシートを追加。
  • 実際にリギングされたキャラクターの 3D レンダリングをサポート。

ストーリーとプロセス

VibeBud は、AI コーディングエージェントの作業を追いやすく、管理しやすく、より身近に感じられるようにするためのオープンソース実験です。

Codex、Claude Code、その他のエージェントに、浮遊する仮想バディという見える形を与えます。デスクトップ上に常駐し、Web プレビューで動作し、Android オーバーレイ対応にも向かっています。

機能

  • 複数の Codex または Claude Code エージェントに接続。
  • コーディング中にバディをドラッグ、ドック、チャット、整理できる。
  • タスク割り当てと、エージェントが注意を必要とするときの通知に対応。
  • Helper、Tactician、Researcher、Skeptic、Cheerleader、Empath などの組み込み人格を用意。
  • 近くにいるバディ同士が小さなチームを形成し、より適した専門役割に処理を任せられる。

プロダクトの方向性

AI コーディングエージェントは日常開発に入りつつありますが、そのインターフェースはまだ抽象的です。VibeBud は、ターミナルセッションの中にエージェント作業を隠すのではなく、軽量なキャラクターを通じて状態を見える化し、管理するモデルを探っています。

複数エージェント開発、デスクトップコンパニオン、遊び心のある生産性ツール、よりアンビエントな開発ワークフローを試す開発者に向いたプロジェクトです。

アーキテクチャ

リポジトリは 3 つの面に分かれています：

  • core/：Web とデスクトップバンドルに使う共有 Next.js 16 App Router UI。
  • desktop/：透明・常時最前面・クリック透過を扱う Electron 33 ラッパー。
  • mobile/：Android オーバーレイモジュールを前景サービスで動かす Capacitor 8 シェル。

コアアプリは React 19、TypeScript、Tailwind v4、lottie-react を使用しています。チャット機能は OpenAI、Anthropic、OpenRouter の API key 持ち込みに対応し、キーはクライアント側に保存されます。

← 経験に戻る