BoothBit Documentation
Everything you need to build with BoothBit — the next-generation AI coding platform with multi-model AI, real-time collaboration, and one-click deploys.
Quick start: Run
npm install then npm run dev to get started in under 2 minutes.What is BoothBit?
BoothBit is a full-stack AI-powered coding platform that runs in the browser and as an Electron desktop app. It provides a complete development environment with a Monaco-based code editor, simulated terminal, visual Git integration, and AI chat that supports 6 different models.
Key Features
| Feature | Description |
|---|---|
| Multi-Model AI | Chat with Gemini Flash/Pro, Claude Sonnet/Opus, GPT-5, and DeepSeek R1 |
| Monaco Editor | VS Code editor experience with custom themes, bracket colorization, multi-tab |
| Integrated Terminal | Bash-like terminal, upgradeable to WebContainers for real Node.js |
| Visual Git | Source control with changes, commit history, branches, push/pull |
| Plugin Marketplace | 10 plugins across 6 categories with search and install |
| One-Click Deploy | Deploy to Cloudflare, Vercel, Netlify, or GitHub Pages |
| Light/Dark Themes | Premium theme system with animated toggle |
| Desktop App | Electron wrapper with local filesystem and real terminal |
| AI Memory | Persistent context that remembers project knowledge across sessions |
Tech Stack
| Layer | Technology |
|---|---|
| Framework | Next.js 15 (App Router, Turbopack) |
| UI | React 19 |
| Editor | Monaco Editor (@monaco-editor/react) |
| State | Zustand (4 stores) |
| Auth | Supabase Auth (OAuth + email) |
| Billing | Stripe (subscriptions + webhooks) |
| Execution | WebContainers API (in-browser Node.js) |
| Desktop | Electron 34 |
| Hosting | Cloudflare Pages |
| Styling | Vanilla CSS with custom properties |
Pages
| Route | Description |
|---|---|
/ | Landing page with hero, features, pricing, and footer |
/login | Login with GitHub/Google OAuth or email/password |
/signup | Create account with validation and email confirmation |
/projects | Project dashboard with grid layout and create new |
/settings | API keys, editor preferences, billing management |
/workspace/:id | Full IDE environment with all panels |
/docs | This documentation site |
Next Steps
- Installation — Set up your development environment
- Project Structure — Understand how the codebase is organized
- Design System — Learn the CSS token system and utility classes
- AI Models — Configure and use the 6 AI models