{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "返回经验",
"item": "https://ellisshang.me/zh/experience"
},
{
"@type": "ListItem",
"position": 2,
"name": "VibeBud",
"item": "https://ellisshang.me/zh/experience/vibebud"
}
]
}
概述
创建 VibeBud，一个开源的漂浮 AI 小伙伴，让 Codex、Claude Code 和其他编程智能体在桌面、网页和 Android 上拥有可见存在感。
关键技术
Next.js 16React 19TypeScriptTailwind CSS v4ElectronCapacitorAndroidlottie-reactOpenAIAnthropicOpenRouter
成果
- 作为周末项目在约 2-3 天内完成。
- GitHub 获得 80+ stars。
- 为不同角色加入 2D 生成 spritesheets。
- 支持带真实骨骼绑定角色的 3D 渲染。
故事与流程
VibeBud 是一个开源实验项目，目标是让 AI 编程智能体更容易被跟踪、管理，并在工作时拥有更强的存在感。
它会给 Codex、Claude Code 和其他智能体一个可见形态：一个漂浮虚拟小伙伴，可以置顶在桌面上，也可以在 Web 预览中运行，并逐步支持 Android 悬浮窗。
功能
- 连接多个 Codex 或 Claude Code 智能体。
- 支持拖动、停靠、聊天，并在编程时组织多个小伙伴。
- 支持分配任务，并在智能体需要关注时发出提醒。
- 内置 Helper、Tactician、Researcher、Skeptic、Cheerleader 和 Empath 等角色人格。
- 当两个小伙伴靠近时，可以组成小团队，让智能体知道队友是谁，并在合适时交给更擅长的角色处理。
产品方向
AI 编程智能体正在进入日常开发，但围绕它们的交互界面仍然很早期。VibeBud 探索一种更个人化、更可见的交互方式：不再把智能体工作完全藏在终端会话里，而是通过轻量虚拟角色展示和管理智能体状态。
这个项目适合开发者探索多智能体编程、桌面陪伴应用、趣味生产力工具和更具氛围感的开发工作流。
架构
仓库分为三个部分：
- core/：共享的 Next.js 16 App Router UI，用于 Web 和桌面端打包渲染。
- desktop/：Electron 33 外壳，支持透明、始终置顶和点击穿透交互。
- mobile/：Capacitor 8 外壳，通过前台服务搭建 Android 悬浮窗模块。
核心应用使用 React 19、TypeScript、Tailwind v4 和 lottie-react。聊天功能支持用户自带 OpenAI、Anthropic 或 OpenRouter API key，并保存在本地客户端。