VibeApps

中文 | English

想象一下，一个驻留在浏览器中的桌面——以及一个知道如何使用其中每一个应用的 AI。

网站 · X / Twitter

https://github.com/user-attachments/assets/adb176a3-02db-41e0-ba71-c9f9cece13d5

什么是 VibeApps？

VibeApps 将完整的桌面体验带入您的浏览器中——您可以拖拽和调整窗口大小，可以并排打开多个应用，这一切都封装在简洁的 macOS 风格界面中。但它与众不同的地方在于内置的 AI Agent。

无需点击各种菜单，只需告诉它您的需求：

“播放一些爵士乐” — 音乐应用随即开始播放。

“写一篇关于今天徒步旅行的日记” — 日记应用打开，并创建了一个新条目。

“我们下盘棋吧” — 棋盘已经准备就绪。

Agent 不仅仅是启动应用，它还能够操作应用。它通过每个应用都能识别的结构化 Action 系统，读取数据、触发操作并更新状态。

一切都在您的浏览器中本地运行。没有后端，无需账号，没有复杂的设置。您的数据保存在 IndexedDB 中，存放在它该在的地方。

内置应用

开箱即用，您将获得一系列可供探索的应用：

应用	描述
🎵 音乐	功能齐全的播放器，支持播放列表、播放控制和专辑封面
♟️ 国际象棋	经典的国际象棋，内置完整的规则判定
⚫ 五子棋	五子连珠——简单的规则，深奥的策略
🃏 空当接龙	纯技巧性纸牌游戏，无需运气
📧 电子邮件	收件箱、已发送、草稿——熟悉的电子邮件体验
📔 日记	带有心情追踪功能的日记本，记录您的每一天
🐦 Twitter	您可以真正掌控的社交动态流
📷 相册	浏览并管理您的照片收藏
📰 赛博新闻	通过精选的新闻聚合器随时了解资讯

每个应用都与 AI Agent 深度集成，这意味着您可以通过自然语言与它们中的任何一个进行交互。

快速开始

前置条件

工具	版本	检查命令	安装
Node.js	18+	node -v	nodejs.org
pnpm	9+	pnpm -v	npm install -g pnpm@9

在中国？ 取消 .npmrc 中镜像源行的注释，以便通过 npmmirror 加速下载。

60 秒内启动运行

# 克隆并进入项目
git clone https://github.com/MiniMax-AI/OpenRoom.git
cd OpenRoom

# 安装依赖
pnpm install

# (可选) 配置环境变量
cp apps/webuiapps/.env.example apps/webuiapps/.env

# 启动
pnpm dev

打开 http://localhost:3000 — 您将看到一个带有应用图标的桌面。双击即可打开任何应用。

认识 AI Agent (应用内聊天)

点击右下角的聊天图标。一个面板会滑出——那就是您的 Agent。

使用自然语言输入：“播放下一首歌”、“显示我的邮件”、“开始一局新的国际象棋”。Agent 会自行判断与哪个应用对话、采取什么操作，并完成任务。

注意： 您需要一个 LLM API Key。请在聊天面板设置中进行配置。

这个聊天面板用于使用现有应用。要创建新应用，请参阅下方的 Vibe 工作流 部分——该功能在 Claude Code CLI 中运行。

构建您自己的应用——只需描述它们

这才是最有趣的部分。通过 Vibe 工作流，您只需描述您的需求，即可生成一个完整且深度集成的应用。无需样板代码，无需脚手架——Claude Code 会处理整个过程。

重要提示： Vibe 工作流在 Claude Code (CLI 终端) 中运行，而不是在浏览器的聊天面板中。应用内聊天面板用于操作现有应用；创建新应用是在您的开发环境中进行的。

从零开始创建

/vibe WeatherApp Create a weather dashboard with 5-day forecasts and temperature charts

在后台，工作流会经历 6 个阶段 —— 每个阶段都建立在前一个阶段的基础上：

需求分析   →  我们到底要构建什么？
架构设计    →  组件、数据模型、状态形状
任务规划    →  将其拆解为可执行的片段
代码生成    →  编写实际的 React + TypeScript 代码
资源生成    →  创建图标和图像
项目集成    →  注册应用，使其出现在桌面上

完成后，您的新应用即可直接使用——并完整集成了 AI Agent 功能。

演进现有应用

已经有了一个应用但想要更多功能？描述您的变更：

/vibe MusicApp Add a lyrics panel that shows synced lyrics during playback

这将触发一个专注的 4 阶段变更工作流：影响分析 → 规划 → 实现 → 验证。

恢复或重放

# 从上次中断的地方继续
/vibe MyApp

# 跳转到特定阶段
/vibe MyApp --from=04-codegen

技术架构

项目