VibeApps
中文 | English
Imagine a desktop that lives in your browser — and an AI that knows how to use every app on it.
Website · X / Twitter
https://github.com/user-attachments/assets/adb176a3-02db-41e0-ba71-c9f9cece13d5
What is VibeApps?
VibeApps brings a full desktop experience into your browser — windows you can drag and resize, apps you can open side by side, all wrapped in a clean macOS-inspired interface. But what makes it different is the AI Agent sitting inside.
Instead of clicking through menus, just tell it what you want:
"Play some jazz" — and the Music app starts playing.
"Write a diary entry about today's hiking trip" — Diary opens, a new entry appears.
"Let's play chess" — the board is ready.
The Agent doesn't just launch apps — it operates them. It reads data, triggers actions, and updates state, all through a structured Action system that every app speaks.
Everything runs locally in your browser. No backend, no accounts, no setup headaches. Your data stays in IndexedDB, right where it belongs.
Built-in Apps
Out of the box, you get a suite of apps ready to explore:
| App | Description |
|---|
| 🎵 Music | Full-featured player with playlists, playback controls, and album art |
| ♟️ Chess | Classic chess with complete rule enforcement |
| ⚫ Gomoku | Five-in-a-row — simple rules, deep strategy |
| 🃏 FreeCell | The solitaire game that's all skill, no luck |
| 📧 Email | Inbox, sent, drafts — a familiar email experience |
| 📔 Diary | Journal with mood tracking to capture your days |
| 🐦 Twitter | A social feed you actually control |
| 📷 Album | Browse and organize your photo collections |
| 📰 CyberNews | Stay informed with a curated news aggregator |
Each app is fully integrated with the AI Agent — meaning you can interact with any of them through natural language.
Getting Started
Prerequisites
| Tool | Version | Check | Install |
|---|
| Node.js | 18+ | node -v | nodejs.org |
| pnpm | 9+ | pnpm -v | npm install -g pnpm@9 |
In China? Uncomment the mirror lines in .npmrc for faster downloads via npmmirror.
Up and Running in 60 Seconds
# Clone & enter the project
git clone https://github.com/MiniMax-AI/OpenRoom.git
cd OpenRoom
# Install dependencies
pnpm install
# (Optional) Set up environment variables
cp apps/webuiapps/.env.example apps/webuiapps/.env
# Launch
pnpm dev
Open http://localhost:3000 — you'll see a desktop with app icons. Double-click to open any app.
Meet the AI Agent (In-App Chat)
Click the chat icon in the bottom-right corner. A panel slides open — that's your Agent.
Type naturally: "play the next song", "show me my emails", "start a new chess game". The Agent figures out which app to talk to, what action to take, and makes it happen.
Note: You'll need an LLM API key. Configure it in the Chat Panel settings.
This chat panel is for using existing apps. To create new apps, see the Vibe Workflow section below — that runs in Claude Code CLI.
Build Your Own Apps — Just Describe Them
This is where it gets interesting. With the Vibe Workflow, you can generate a complete, fully-integrated app just by describing what you want. No boilerplate, no scaffolding — Claude Code handles the entire process.
Important: The Vibe Workflow runs in Claude Code (CLI terminal), not in the browser's chat panel. The in-app chat panel is for operating existing apps; creating new apps happens in your development environment.
Create from Scratch
/vibe WeatherApp Create a weather dashboard with 5-day forecasts and temperature charts
Behind the scenes, the workflow runs through 6 stages — each one building on the last:
Requirement Analysis → What exactly are we building?
Architecture Design → Components, data models, state shape
Task Planning → Breaking it down into implementable chunks
Code Generation → Writing the actual React + TypeScript code
Asset Generation → Creating icons and images
Project Integration → Registering the app so it shows up on the desktop
When it's done, your new app is live — complete with AI Agent integration.
Evolve Existing Apps
Already have an app but want more? Describe the change:
/vibe MusicApp Add a lyrics panel that shows synced lyrics during playback
This triggers a focused 4-stage change workflow: Impact Analysis → Planning → Implementation → Verification.
Resume or Replay
# Pick up where you left off
/vibe MyApp
# Jump to a specific stage
/vibe MyApp --from=04-codegen
Under the Hood
Project Layout
OpenRoom/
├── apps/webuiapps/ # The main desktop application
│ └── src/
│ ├── components/ # Shell, window manager, chat panel
│ ├── lib/ # Core SDK — file API, actions, app registry
│ ├── pages/ # Where each app lives
│ └── routers/ # Route definitions
├── packages/
│ └── vibe-container/ # iframe communication SDK (stub in open-source mode)
├── .claude/ # AI workflow engine
│ ├── commands/vibe.md # Workflow entry point
│ ├── workflow/ # Stage definitions & rules
│ └── rules/ # Code generation constraints
└── .github/workflows/ # CI pipeline
Note on vibe-container: In the open-source standalone version, the real iframe SDK is replaced by a local mock (src/lib/vibeContainerMock.ts) that uses IndexedDB for storage and a local event bus for Agent communication. The package under packages/vibe-container/ provides type definitions and the client-side SDK interface. See its README for details.
Anatomy of an App
Every app follows the same structure — consistent, predictable, easy to navigate:
pages/MusicApp/
├── components/ # UI building blocks
├── data/ # Seed data (JSON)
├── store/ # State management (Context + Reducer)
├── actions/ # How the AI Agent talks to this app
│ └── constants.ts # APP_ID + action type definitions
├── i18n/ # Translations (en.ts + zh.ts)
├── meta/ # Metadata for the Vibe workflow
│ ├── meta_cn/ # guide.md + meta.yaml (Chinese)
│ └── meta_en/ # guide.md + meta.yaml (English)
├── index.tsx # Entry point
├── types.ts # TypeScript definitions
└── index.module.scss # Scoped styles
Development
| Command | Description |
|---|
pnpm dev | Start dev server → http://localhost:3000 |
pnpm build | Production build |
pnpm run lint | Lint + auto-fix |
pnpm run pretty | Format with Prettier |
pnpm clean | Clean build artifacts |
Tech Stack
| |
|---|
| Framework | React 18 + TypeScript + Vite |
| Styling | Tailwind CSS + CSS Modules + Design Tokens |
| Icons | Lucide React |
| State | React Context + Reducer |
| Storage | IndexedDB (standalone) / Cloud NAS (production) |
| i18n | i18next + react-i18next |
| Monorepo | pnpm workspaces + Turborepo |
| CI | GitHub Actions |
Environment Variables
cp apps/webuiapps/.env.example apps/webuiapps/.env
| Variable | Required | Description |
|---|
CDN_PREFIX | No | CDN prefix for static assets |
VITE_RUM_SITE | No | RUM monitoring endpoint |
VITE_RUM_CLIENT_TOKEN | No | RUM client token |
SENTRY_AUTH_TOKEN | No | Sentry auth token (enables error tracking when set) |
SENTRY_ORG | No | Sentry organization slug |
SENTRY_PROJECT | No | Sentry project slug |
All optional. The app runs fine without any of them.
Contributing
We'd love your help. Whether it's fixing a bug, building a new app, or improving docs — check out CONTRIBUTING.md to get started.
License
MIT — Copyright (c) 2025 MiniMax
