Instantly make your own small multi-user apps, without a backend. With Vibes, The front-end is the app.
Vibes is a vibe coding framework made for coding agents. It collapses application code and application state into a single HTML file that runs anywhere.
Why does this matter? AI doesn't make apps - it makes text. By embedding the database in JavaScript (via Fireproof), your coding agent can describe an entire app - including its persistence layer - in one shot. No server setup, no schema imports. Just a working app.
Your data lives locally in the browser, encrypted and portable. It syncs across users automatically. Share your creations with a simple link and friends can jump in immediately.
In Claude Code, register the marketplace first:
/plugin marketplace add popmechanic/vibes-cli
Then install the plugin:
/plugin install vibes@vibes-cli
Restart Claude Code after installation.
After installation, open Claude Code and enter /launch, then choose the Editor option. Claude will then open a web GUI designed to help you produce secure, vibe coded apps.
It's still Claude Code under the hood, we just help you with a nice user interface. Use the GUI to turn your ideas into simple deployable multiplayer apps that don't require a server. (So you don't have to be a Linux genius to run a great app.)
Verify Installation:
/help
# Should see vibes skills like:
# /vibes:vibes - Generate React web apps
# /vibes:riff - Generate app variations
# /vibes:sell - Transform to multi-tenant SaaS
Skills are model-invoked - Claude automatically uses them when your task matches the skill's purpose. Just describe what you want to build.
Generate a complete, working app from a prompt. Perfect when you have a clear idea and want to see it working quickly.
Creates a single HTML file with inline JavaScript, Fireproof database for local-first persistence, and Tailwind CSS styling. No build step - just open and run.
Example prompts:
- "Make a chore chart for my roommates"
- "Build a potluck sign-up for Friendsgiving"
- "Create a trivia game about reality TV"
Have a design mockup or static HTML file? This skill mechanically transforms it into a working Vibes app while preserving the design exactly.
The transformation is deterministic: CSS is copied verbatim, HTML structure is preserved, only syntax changes (class→className) and dynamic content bindings are added. No interpretation, no "improvements" - pixel-perfect fidelity to your design.
Example prompts:
- "Use design.html as the reference for my app"
- "Match this mockup exactly"
- "Convert this static HTML to a Vibes app"
Not sure what to build? Riff generates 3-10 completely different interpretations of your idea in parallel.
Each variation is a genuinely different concept - not just styling changes. You'll get ranked variations with business model analysis to help you pick the winner. Great for exploring a broad idea before committing.
Example prompt: "Make me an app that could make money"
Output:
./
├── index.html # Gallery showcasing all variations
├── RANKINGS.md # Scored rankings with recommendations
├── riff-1/
│ ├── index.html # App variation 1
│ └── BUSINESS.md # Business model canvas
├── riff-2/
│ └── ...
Ready to monetize? Sell transforms your app into a multi-tenant SaaS with Pocket ID authentication, subscription billing, and isolated databases per customer.
Each user gets their own subdomain (alice.yourapp.com) with their own data. Includes a marketing landing page, admin dashboard, and subscription gating - everything you need to start charging.
The philosophy: Most SaaS turns every community into rows in one database. Sell turns every community into its own world. This is horizontal scaling where the unit is the tenant database—not the server fleet.
Output: A single unified index.html that handles all routes:
yourdomain.com → Landing page with pricing
*.yourdomain.com → Tenant app with auth gate
admin.yourdomain.com → Admin dashboard
Example flow:
- Build an app with
/vibes - Run
/sellto transform it - Configure pricing
- Deploy with
/cloudflare
End-to-end integration test for plugin developers. Assembles a pre-written fixture, deploys to Cloudflare Workers (Connect auto-provisioned), and presents a live URL for browser verification.
Walks you through each step interactively: credentials, fixture selection, assembly, deploy, and verification.
Example prompt: "Test the plugin" or "Run an integration test"
Commands are user-invoked — run them explicitly when you want a specific skill.
| Command | What it does |
|---|---|
/vibes |
Generate a React web app with Fireproof database |
/sell |
Transform an app into multi-tenant SaaS with Pocket ID auth and billing |
/cloudflare |
Deploy a Vibes app to Cloudflare Workers (auto-configures Connect) |
/launch |
Build and deploy a SaaS app end-to-end using Agent Teams |
/test |
Run end-to-end integration test with real deployment |
Every vibe-coded project starts in the vibe zone - the AI understands you, progress is fast, each change moves the app forward.
Then something small goes wrong. A fix that mostly works. An edge case layered on top. You correct it, then correct the correction, and suddenly progress slows to a crawl.
You've drifted out of the vibe zone.
Vibes DIY keeps things simple enough that you stay in the vibe zone. Single-file apps. Local-first data. No server complexity. The AI can see and understand everything it needs to help you.
Vibes apps use Fireproof, a local-first database:
- Offline-first: Apps work without internet, sync when connected
- Encrypted: Data is encrypted before leaving the browser
- Shareable: Real-time sync across users via cloud relay
- Portable: Export your data anytime
The hidden settings menu (gear icon) lets you configure sync for collaboration.
Traditional SaaS multi-tenancy requires backend code, database configuration, tenant isolation logic, and DevOps expertise. Setup takes weeks.
Vibes eliminates these categories of work entirely.
Each subdomain creates a separate database namespace. Tenant isolation happens automatically—tenant A cannot query tenant B's data because the databases are physically separate. Data leaks become architecturally impossible.
The implementation:
const subdomain = window.location.hostname.split('.')[0];
const { database } = useFireproofOIDC(`app-${subdomain}`);Three lines. No backend. No database configuration. No tenant middleware.
Note: Auth credentials are managed automatically. No user-provided OIDC configuration needed.
- Indie hackers: Ship commercial apps in hours, not weeks
- Designers who code: Build SaaS without learning DevOps
- Domain experts: Package expertise as subscription software
- Rapid validation: Deploy real infrastructure for customer pilots
The architecture works best for per-user tools, white-label dashboards, customer portals, and micro-SaaS with independent tenants. Each tenant gets their own world.
You cannot run global queries across all tenants. Some ideas won't fit. This is groupware—tools for communities, not platforms that own them. No one can be Zuckerberg over a Vibes app. That's the point.
- vibes.diy - Try the web builder
- Discord - Join the community
- GitHub - Open source
- Substack - Updates and tutorials
- CONTRIBUTING.md - Development guide
MIT