DaveLovable: UI/UX Code Agents

An AI powered web app builder that transforms natural language descriptions into fully functional React app with real-time preview, code editing, and version control. All running in your browser.

Comment

DaveLovable Platform

Demo del proyecto

Inspiration

The inspiration for DaveLovable came from observing a critical gap in the AI-powered development tool ecosystem: while platforms like Lovable.dev, v0 by Vercel, and Figma Maker are revolutionizing how developers build applications, they all share a fundamental limitation—they're proprietary, closed-source systems that lock users into specific workflows and vendor dependencies.

For enterprises, startups, and development teams seeking to leverage AI for rapid prototyping and development, this creates several challenges:

  1. Vendor Lock-in: Dependency on proprietary platforms limits flexibility and control
  2. Cost Scalability: Enterprise usage at scale becomes prohibitively expensive
  3. Workflow Customization: Inability to modify the tool to match specific development processes
  4. Design System Integration: Cannot adapt the AI to company-specific design languages and component libraries
  5. Data Privacy: Concerns about code and project data being processed by third-party services

I asked myself: "What if teams could have the power of AI-assisted development without sacrificing control, customization, or cost-efficiency?"

This question led me to build DaveLovable—an open-source, self-hostable alternative that puts the power back in developers' hands. By leveraging Google Gemini 3 Flash, I found the perfect balance: cutting-edge AI capabilities at a fraction of the cost of competitors, making enterprise-scale usage economically viable.

What It Does

DaveLovable is an open-source AI-powered web development platform inspired by Lovable.dev, v0 by Vercel, and Stitch by Google Labs. It combines cutting-edge AI orchestration with browser-based execution to deliver the most advanced open-source alternative for rapid frontend prototyping.

Unlike other tools, DaveLovable leverages:

  • Multi-agent AI orchestration (Microsoft AutoGen 0.7) with 40+ tools
  • Google Gemini-3 Flash Preview (1M input tokens, 64K output) for blazing-fast code generation
  • WebContainers (StackBlitz) for true Node.js runtime in the browser
  • Visual editor mode with click-to-edit and drag-to-adjust controls
  • Full Git version control with LLM-generated commit messages
  • Real-time streaming of agent thought processes

Focus: Frontend-only development (React + TypeScript + Tailwind CSS). No backend code generation.

🚀 Full Platform Overview (2-3 minutes)

[DaveLovable Overview

  • Quick intro: "Build React apps with AI in minutes"
  • Create new project from landing page
  • AI generates initial landing page (show chat → agent execution → preview)
  • Quick code edit in Monaco editor
  • Switch between different device previews (mobile, tablet, desktop)

🎨 Visual Editor Mode

Visual Code Editor

Visual editing mode in action - click elements directly in the preview, modify styles in real-time with the style panel, and see changes instantly reflected in both the preview and code. Switch to custom prompt mode to use AI for complex style transformations.

📦 Git Version Control & Time Travel

Git Integration

Built-in version control with complete commit history, diff viewer, and time-travel functionality. Every AI-generated change creates a commit with descriptive messages. Restore to any previous version instantly.

⚡ Editor & Live Preview

Editor Interface

The main editor interface featuring Monaco code editor with syntax highlighting, multi-file management, and live preview powered by WebContainers. True Node.js running in your browser with instant HMR updates and responsive device modes.

🖼️ Multimodal Input

Multimodal AI

Upload design mockups, screenshots, or PDFs and ask the AI to recreate them. The AI understands images and documents, extracting layouts, styles, and data to generate accurate React components.

🏆 Comparison: DaveLovable vs. Competitors

Feature DaveLovable Lovable.dev v0 (Vercel) Stitch (Google)
Open Source ✅ MIT License ❌ Proprietary ❌ Proprietary ❌ Proprietary
Multi-Agent System ✅ 2 agents (Planner + Coder) ❌ Single agent ❌ Single agent ❌ Single agent
Agent Tools ✅ 40+ tools (filesystem, git, terminal, web) ⚠️ Limited ⚠️ Limited ⚠️ Limited
Visual Editor ✅ Click-to-edit + drag controls Click-to-edit + drag controls ❌ Text-based only ⚠️ Limited
WebContainer Execution ✅ Browser-based Node.js ❌ Server-side preview ❌ Server-side preview ⚠️ Unknown
Git Version Control ✅ Full git workflow + history ❌ No git ❌ No git ❌ No git
LLM-Generated Commits ✅ Auto-generated from diffs ❌ N/A ❌ N/A ❌ N/A
Gemini-3 Flash ✅ 1M input tokens ❌ Claude/GPT-5 ❌ GPT-5 ✅ Gemini (likely)
State Persistence ✅ Per-project agent memory ⚠️ Session-based ⚠️ Session-based ⚠️ Unknown
Real-Time Streaming ✅ SSE with agent interactions ⚠️ Polling-based ⚠️ Polling-based ⚠️ Unknown
Multimodal Input ✅ Images + PDFs ✅ Images ✅ Images ⚠️ Unknown
Backend Generation ❌ Frontend-only ✅ Full-stack ✅ Full-stack ⚠️ Unknown
Authentication ⚠️ In progress ✅ Full auth ✅ Full auth ✅ Full auth
Deployment ⚠️ Manual ✅ Vercel/Netlify ✅ Vercel ✅ Google Cloud

Legend: ✅ Full support • ⚠️ Partial/In progress • ❌ Not supported

📸 Example Projects Built with DaveLovable

DaveLovable can generate complete, production-ready React applications in minutes. Here are some examples:

Project Management Dashboard

All Projects View

Multi-project workspace where you can manage all your AI-generated applications. Each project includes full Git history, file management, and live preview capabilities.

Social Media Platform (Facebook Clone)

Facebook Clone Example

A fully functional social media platform with modern UI, built entirely by AI in minutes. Features include responsive design, component-based architecture, and Tailwind CSS styling.

Generated features:

  • News feed layout
  • Post components with interactions
  • Navigation sidebar
  • Responsive design for mobile/tablet/desktop
  • Modern UI with gradients and shadows

Real Estate Rental Platform

House Rental Example

Complete rental property marketplace application with search, filters, and property listings. Demonstrates AI's ability to create complex, multi-section layouts.

Generated features:

  • Property search and filters
  • Card-based listing layouts
  • Hero sections with CTAs
  • Responsive grid systems
  • Professional color schemes

Why Gemini 3 Flash?

We chose Gemini 3 Flash Preview as our AI foundation because it offers:

  • 1M input tokens: Massive context window for complex projects
  • 64K output tokens: Generate complete applications in single responses
  • Blazing-fast inference: Reduced latency for responsive user experience
  • Cost-effective: ~90% cheaper than GPT-5, making enterprise usage sustainable
  • Advanced reasoning: Strategic planning and adaptive problem-solving capabilities

Enterprise Value Proposition

DaveLovable solves the vendor lock-in problem by being:

  • Open Source (MIT License): Complete transparency and freedom to modify
  • Self-Hostable: Deploy on your own infrastructure for maximum control
  • Customizable: Adapt agent behaviors, workflows, and UI to your needs
  • Design System Agnostic: Train the AI on your component library and design language
  • Cost-Predictable: Use your own Gemini API key with transparent, scalable pricing

How We Built It

Architecture Overview

Frontend (React + TypeScript + Vite)
    ↓ REST API + SSE
Backend (FastAPI + Python)
    ↓
Multi-Agent System (AutoGen 0.7)
    ├── Planner Agent (Strategy)
    └── Coder Agent (40+ Tools)
        ↓
    Gemini 3 Flash API
        ↓
Physical File System + Git
    ↓
WebContainers (Browser Node.js)

Technical Stack

Frontend:

  • React 18.3 with TypeScript 5.8 for type safety
  • Vite 5.4 for fast builds and HMR
  • Tailwind CSS 3.4 + shadcn/ui for modern UI
  • Monaco Editor for code editing with syntax highlighting
  • WebContainers for browser-based Node.js runtime
  • TanStack Query 5.83 for state management
  • html2canvas for screenshot capture

Backend:

  • FastAPI 0.115 for high-performance async API
  • Microsoft AutoGen 0.7 for multi-agent orchestration
  • SQLAlchemy 2.0 + SQLite for data persistence
  • GitPython for version control operations
  • Server-Sent Events (SSE) for real-time streaming

AI Infrastructure:

  • Google Gemini 3 Flash Preview via official API
  • Per-project agent memory persistence (.agent_state.json)

Development Process

Phase 1: Foundation

  1. Backend Architecture: Built FastAPI service with SQLAlchemy models for projects, files, chat sessions
  2. Agent System: Implemented AutoGen multi-agent orchestration with Planner and Coder agents
  3. Tool Development: Created 40+ tools for filesystem operations (read, write, edit), Git operations (commit, history, restore), terminal commands, and web search

Phase 2: Frontend Core

  1. Editor Interface: Integrated Monaco editor with multi-file tab support
  2. Chat Panel: Built real-time SSE chat with agent message streaming
  3. File Explorer: Created tree-view file navigation with CRUD operations
  4. Project Management: Implemented multi-project workspace

Phase 3: WebContainers Integration

  1. Browser Runtime: Integrated StackBlitz WebContainers for in-browser Node.js
  2. Bundle System: Created backend endpoint to package all files for WebContainer API
  3. Dev Server: Configured Vite to run in WebContainer with HMR support
  4. Preview Panel: Built responsive preview with mobile/tablet/desktop modes

Phase 4: Advanced Features

  1. Visual Editor: Implemented click-to-select element feature with style panel
  2. Git Integration: Added commit history UI, diff viewer, and version restore
  3. Multimodal Input: Enabled image and PDF upload with AI vision processing
  4. Agent Memory: Implemented persistent state across sessions per project

Phase 5: Gemini 3 Optimization

  1. Tessting: Test Gemini 3 Flash
  2. Context Optimization: Leveraged 1M token context for entire project analysis
  3. Output Enhancement: Utilized 64K output for complete component generation
  4. Cost Reduction: Achieved 90% cost savings vs GPT-5

Key Technical Innovations

1. Physical Filesystem + Git Architecture

Unlike competitors that store code in databases, I implemented a hybrid approach:

  • SQLite stores only metadata (filename, filepath, language, timestamps)
  • Physical filesystem stores actual content at backend/projects/project_{id}/
  • Git repository per project for full version control

This enables:

  • True Git workflow (branches, merges, history)
  • LLM-generated commit messages from diffs
  • Efficient file serving to WebContainers
  • Standard development tool compatibility (IDEs, linters)

2. Smart Agent Routing

My SelectorGroupChat router analyzes request context and routes efficiently:

  • Visual edits → Direct to Coder (no planning needed)
  • Bug fixes → Direct to Coder (execution-focused)
  • Complex features → Planner → Coder (strategic approach)

This reduces latency and token usage while maintaining quality.

3. WebContainer Synchronization

Seamless sync between backend filesystem and browser runtime:

  1. Agent modifies files on backend disk
  2. Git auto-commits changes
  3. Frontend polls for file updates
  4. WebContainer receives delta updates
  5. Vite HMR reflects changes instantly in preview

Challenges We Faced

1. Agent Hallucination & Tool Misuse

Problem: Agents would sometimes generate invalid file paths, use tools incorrectly, or produce incomplete code.

Solution:

  • I enhanced system prompts with explicit constraints and examples
  • Implemented validation layer before tool execution
  • Added feedback loop where tool errors guide agent correction
  • Created specialized agents (Planner vs Coder) to separate concerns

Learning: Multi-agent systems with specialized roles perform better than generalist single agents.

2. Real-Time Streaming Architecture

Problem: Traditional request-response didn't provide transparency into agent thinking; users saw long waits with no feedback.

Solution:

  • Migrated to Server-Sent Events (SSE) for real-time streaming
  • Intercepted agent messages at HTTP level to stream incremental responses
  • Built frontend queue system to handle rapid message bursts
  • Added message types (thinking, tool_call, result, final_answer) for rich UI

Learning: User experience dramatically improves when AI "thinking" is visible, even if it takes the same time.

2. File System Race Conditions

Problem: Concurrent file operations (AI writing, user editing, Git committing) caused conflicts and lost changes.

Solution:

  • Implemented file locking mechanism at service layer
  • Added transaction-like semantics for multi-file operations
  • Created operation queue to serialize conflicting requests
  • Built conflict resolution UI for user intervention when needed

Learning: Treating filesystem operations as database transactions prevents many concurrency issues.

3. Git Auto-Commit Message Quality

Problem: Auto-generated commit messages were generic ("Updated files") and not descriptive.

Solution:

  • Feed full Git diff to Gemini to analyze changes
  • Prompt: "Analyze this diff and write a conventional commit message (type: description)"
  • Include context about what user requested
  • Result: High-quality messages like "feat: Add user authentication with JWT tokens"

Learning: LLMs excel at summarization tasks when given proper context and output format constraints.

4. Monaco Editor Memory Leaks

Problem: Opening many files in Monaco editor caused browser memory to spike and eventually crash.

Solution:

  • Implemented editor instance pooling (reuse instead of create new)
  • Added cleanup lifecycle to properly dispose models
  • Limited active editor instances to 5 max
  • Used virtual scrolling for file tree with 100+ files

Learning: Rich browser-based editors require careful resource management; dispose patterns are critical.

5. Visual Editor Element Selection

Problem: Needed to identify which React component rendered a clicked DOM element in preview iframe.

Solution:

  • Injected helper script into WebContainer preview
  • Added data attributes to elements during render (component name, props)
  • Implemented iframe message passing for click events
  • Built reverse mapping from DOM element → source file/line

Learning: Cross-iframe communication and DOM instrumentation enable powerful visual editing features.

Technical Learnings

  1. Multi-Agent > Single Agent: Specialized agents (Planner, Coder) with clear roles outperform generalist agents. The separation allows each to focus and excel at their task.

  2. Context is King: Gemini 3's 1M token context fundamentally changes architecture. Instead of complex RAG systems and context pruning, you can just include everything. This leads to better AI output quality.

  3. Streaming UX Matters: Real-time visibility into AI thinking transforms user experience. Even if generation takes 30 seconds, seeing incremental progress feels much faster than waiting.

  4. Physical Files > Database: Storing code as actual files (not database BLOBs) enables:

    • Standard dev tools (Git, linters, IDEs)
    • Better performance (OS filesystem optimizations)
    • Easier debugging and inspection
    • WebContainers integration

  5. Browser-Based Execution Scales: WebContainers eliminate backend compute for previews. This is not just cost-effective—it's architecturally superior for scalability.

AI/LLM Learnings

  1. Prompt Engineering is Critical: Small changes in system prompts cause large quality variations. Explicit constraints, examples, and output format specifications are essential.

  2. Function Calling Reliability: Gemini 3's function calling is robust but requires careful schema design. Clear parameter descriptions and validation prevent misuse.

  3. Cost-Performance Tradeoffs: Gemini 3 Flash offers the best price/performance ratio we tested. For development tools where speed matters more than perfect accuracy, it's ideal.

  4. Multimodal is Underrated: Image understanding for design mockups works remarkably well. Users love uploading screenshots and seeing them recreated as code.

Product Learnings

  1. Open Source is a Competitive Advantage: For enterprise users, being able to self-host and customize is not just nice-to-have—it's a requirement. Open source unlocks this market.

  2. Customization Demand is High: Different teams have different workflows, design systems, and preferences. A customizable platform has wider appeal than one-size-fits-all.

  3. Transparency Builds Trust: Showing agent thought processes and tool executions makes users trust the AI more. "Black box" systems feel risky.

  4. Git Integration is Essential: Developers expect version control. Auto-generated commit messages that actually make sense delight users.

Process Learnings

  1. Iterative Development Works: I built and tested features incrementally, getting feedback as a solo developer testing my own work before adding complexity.

  2. Documentation as You Go: Writing technical docs (WEBCONTAINERS_IMPLEMENTATION.md, CLAUDE.md) during development—not after—saves time and improves code quality.

  3. Performance Testing Early: I tested with large projects (50+ files) early on, which exposed memory leaks and performance issues when they were easier to fix.

What's Next for DaveLovable

Short-Term Roadmap (Next 3 Months)

  1. Authentication & Multi-User

    • Complete JWT-based authentication
    • User registration and login flows
    • Project sharing and permissions
    • Team workspaces

  2. Deployment Integration

    • One-click deploy to Vercel, Netlify, Cloudflare Pages
    • GitHub repository sync
    • Automated CI/CD pipelines
    • Production build optimization

  3. Enhanced Visual Editor

    • Drag-and-drop component positioning
    • Style panel improvements (color picker, spacing controls)
    • Layout templates (flex, grid presets)
    • Component library integration

  4. Advanced Git Features

    • Branch management UI
    • Pull request workflow
    • Merge conflict resolution with AI assistance
    • Collaborative code review

Medium-Term Roadmap (6-12 Months)

  1. Backend Code Generation

    • Expand beyond frontend-only
    • Database schema design and ORM code

  2. Component Library Training

    • Allow teams to train AI on custom design systems
    • Generate code matching company style guides
    • Fine-tuning on codebase patterns

  3. Collaborative Features

    • Real-time multi-user editing (OT or CRDT)
    • Live cursor presence
    • Shared chat sessions

  4. Testing & Quality

    • AI-generated unit tests (Vitest, Jest)
    • E2E test generation (Playwright, Cypress)
    • Accessibility audit and auto-fix

  5. Advanced AI Agents

    • Dedicated Testing Agent for QA
    • DevOps Agent for deployment and infrastructure
    • Documentation Agent for auto-generated docs
    • Security Agent for vulnerability scanning

Research & Exploration

  1. Gemini 3 Advanced Features

    • Explore Gemini 3 Pro for complex reasoning tasks
    • Implement code execution validation with Gemini
    • Test multimodal video understanding for UI animations
    • Experiment with Gemini's native tool use enhancements

  2. Agent Autonomy

    • Long-running autonomous agents that work while you sleep
    • Goal-driven development (describe outcome, agent plans and executes)
    • Self-healing code (agents monitor errors and auto-fix)

  3. Code Understanding

    • Codebase graph analysis (dependency trees, impact analysis)
    • AI-powered code search (semantic, not just text)
    • Architecture visualization and recommendations

Why DaveLovable Matters

In a world increasingly dominated by proprietary AI tools, DaveLovable represents a different path forward:

For Developers

  • Freedom: No vendor lock-in; you own your tools and data
  • Customization: Adapt the platform to your workflow, not vice versa
  • Learning: Understand how AI development tools work by reading the code
  • Control: Self-host for maximum privacy and compliance

For Enterprises

  • Cost-Effective: Gemini 3 Flash makes AI-powered development economically viable at scale
  • Secure: Self-hosting keeps proprietary code on your infrastructure
  • Adaptable: Train agents on your design systems and coding standards
  • Predictable: Transparent pricing (your Gemini API costs) with no surprises

For the Ecosystem

  • Open Innovation: Community contributions accelerate feature development
  • Standardization: Establishes patterns for AI-powered development tools
  • Accessibility: MIT license means anyone can use, modify, distribute
  • Competition: Pushes proprietary tools to improve and innovate

Conclusion

DaveLovable is more than a hackathon project—it's a vision for the future of open, customizable, cost-effective AI development tools. By combining Google Gemini 3's powerful capabilities with open-source principles, we're empowering developers and enterprises to build faster without sacrificing control.

The era of vendor lock-in for AI development tools is ending. DaveLovable proves that world-class AI-powered development can be open, accessible, and economically sustainable.

I'm excited to share this with the community and see how teams adapt, extend, and build upon this foundation. The future of software development is collaborative—between humans and AI, and between developers worldwide contributing to open tools.

Built With

Share this project:

Updates