An AI-powered web application builder that generates working React apps from natural language descriptions. Describe what you want to build, and watch as the AI creates a fully functional application in real-time.
Lovable.1.mp4
- Natural Language to Code - Describe your app in plain English, AI generates the code
- Real-Time Preview - See your application update live as code is generated
- Isolated Sandboxes - Each project runs in its own secure E2B cloud environment
- Streaming Responses - Watch AI reasoning and code generation step-by-step
- Full Code Editor - Monaco-based editor with syntax highlighting and file explorer
┌─────────────────┐ ┌──────────────────────┐ ┌─────────────────────┐
│ Frontend │────▶│ Backend │────▶│ E2B Sandbox │
│ (Next.js) │◀────│ (Bun + Express) │◀────│ (Vite + React) │
│ Port 3000 │ SSE │ Port 8080 │ │ Live Preview │
└─────────────────┘ └──────────────────────┘ └─────────────────────┘
│
┌──────────────┐
│ AI SDK v5 │
│ + GLM-4.7 │
└──────────────┘
Flow:
- User submits a prompt describing what to build
- Backend creates an E2B sandbox with Vite + React template
- AI SDK agent plans and executes code generation steps
- Files are written to sandbox, Vite hot-reloads the preview
- Frontend streams AI progress and displays live preview
| Layer | Technologies |
|---|---|
| Frontend | Next.js 16, React 19, TailwindCSS, Monaco Editor, Radix UI |
| Backend | Bun, Express 5, AI SDK v5 |
| AI | Z.ai / ZhipuAI GLM-4.7 (via AI SDK v5) |
| Sandbox | E2B cloud sandboxes with Vite + React |
.
├── backend/
│ ├── src/
│ │ ├── graph.ts # AI SDK streaming chat orchestration
│ │ ├── project-service.ts # Sandbox lifecycle management
│ │ ├── prompt.ts # AI system prompts
│ │ └── tools.ts # AI tool definitions
│ ├── my-app/ # Template app for sandboxes
│ ├── index.ts # Express server entry point
│ ├── e2b.toml # E2B template config
│ └── e2b.Dockerfile # Sandbox Docker image
├── frontend/
│ └── src/
│ ├── app/ # Next.js App Router pages
│ ├── components/ # React components
│ └── lib/ # Utilities and API client
└── README.md
git clone <repository-url>
cd lovableCreate backend/.env:
# Required
E2B_API_KEY="your-e2b-api-key"
ZAI_API_KEY="your-zai-api-key"
E2B_TEMPLATE_ID="lovable-clone-dev"cd backend
bun install
bun run devBackend runs on http://localhost:3001
cd frontend
npm install
npm run devFrontend runs on http://localhost:3000
If you need to customize the sandbox environment:
cd backend
e2b template build| Method | Endpoint | Description |
|---|---|---|
GET |
/health |
Health check |
POST |
/project |
Create new project with sandbox |
GET |
/project/:id |
Get project details |
GET |
/projects |
List all projects |
POST |
/project/chat/:id |
Send chat message (SSE streaming) |
GET |
/project/:id/files |
List project files |
GET |
/project/:id/file?path= |
Read file content |
| Directory | Command | Description |
|---|---|---|
backend/ |
bun run dev |
Start backend (watch mode) |
backend/ |
bun run start |
Start backend (production) |
frontend/ |
npm run dev |
Start frontend dev server |
frontend/ |
npm run build |
Production build |
frontend/ |
npm run lint |
Run ESLint |
- TypeScript strict mode
- Double quotes, semicolons, 2-space indent
import typefor type-only imports- See
AGENTS.mdfor full conventions
MIT