MiniMax-AI/OpenRoom

MiniMax-AI/OpenRoom

Description: A browser-based desktop where AI Agent operates every app through natural language.

Language: TypeScript

License: MIT

Stars: 1208

Forks: 153

Open issues: 7

Created: 2026-03-03T04:01:01Z

Pushed: 2026-06-03T23:15:42Z

Default branch: main

Fork: no

Archived: no

README:

VibeApps

[中文](./README_zh.md) | English

> Imagine a desktop that lives in your browser — and an AI that knows how to use every app on it.

[Website](https://www.openroom.ai) · [X / Twitter](https://x.com/openroom_ai_)

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](#build-your-own-apps--just-describe-them) 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](./packages/vibe-container/README.md) 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 #…