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 |
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
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 |
The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.
Claude Code is an agentic coding tool that lives in your terminal, understands your codebase, and helps you code faster by executing routine tasks, explaining complex code, and handling git workflows - all through natural language commands.
