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:

Each app is fully integrated with the AI Agent — meaning you can interact with any of them through natural language.

Getting Started

Prerequisites

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

Tech Stack

Environment Variables

cp apps/webuiapps/.env.example apps/webuiapps/.env

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