lovable

Capabilities

Lovable empowers agents to build complete web applications from natural language descriptions. Agents can create full-stack applications with frontend, backend, database, authentication, and integrations—all backed by editable code. The platform supports the entire product lifecycle from exploration and prototyping to deployment and ongoing operation, with enterprise-grade security and governance built in.

Skills

Application Development

Natural Language App Generation

• Describe what you want to build in plain language and Lovable generates a working application
• Support for SaaS applications, consumer-facing web apps, marketplaces, internal tools, websites, educational tools, and games
• Full-stack generation including frontend, backend, database, and authentication

Agent Mode (Autonomous Execution)

• Lovable implements changes directly in projects with end-to-end execution
• Handles feature implementation, bug fixes, code refactoring, and multi-file coordinated changes
• Visible task tracking shows progress through implementation steps
• Automatic verification and error resolution during development
• Prompt queue system for batching work and automating repetitive workflows
• Usage-based pricing based on complexity and file modifications

Plan Mode (Strategic Planning)

• Explore ideas and debug issues before any code is written
• Compare multiple architectural approaches and understand tradeoffs
• Design database schemas and system architecture
• Investigate bugs safely without making code changes
• Generate formal implementation plans that can be reviewed and edited before approval
• Fixed cost of one credit per message

Code Editor

• Browse full project file structure and search across files
• View and manually edit source code directly (paid plans only)
• Reference specific files in chat for targeted edits
• Download individual files or entire project codebase as ZIP
• Format code and copy file content

Design and Customization

Visual Design Tools

• Apply and customize themes for consistent branding
• Visual editing mode for layout, spacing, colors, and typography
• Multi-select elements for batch edits
• Replace images and generate AI images with prompts
• No credits required for visual customization (except dynamic elements)
• Design templates available for quick starting points

Design Systems

• Create and share design systems across workspace
• Maintain consistent branding across multiple projects
• Import custom CSS files as themes
• Customize colors, typography, spacing, and border radius

Backend and Data Management

Lovable Cloud (Full-Stack Hosting)

• Built-in database with automatic schema generation from natural language descriptions
• User authentication with email, phone, and Google Sign-in (OAuth 2.0)
• File storage with support for files up to 2 GB
• Edge Functions for serverless logic, APIs, and custom workflows
• Real-time database updates and live data synchronization
• Automatic scaling from prototypes to millions of users
• Usage-based pricing with $25/month free Cloud usage per workspace

Database Management

• Generate database schemas automatically from descriptions
• Manage records directly in UI without writing SQL
• View, edit, and organize data tables
• Fine-grained access controls and security policies
• Real-time data synchronization

Authentication and User Management

• Built-in user authentication backed by Lovable Cloud
• Support for email/password, phone, and Google OAuth
• User account management and activity tracking
• Password reset functionality
• Session management with configurable duration

Edge Functions

• Create serverless functions for custom logic without provisioning servers
• Common use cases: AI features, email/notifications, payment processing, scheduled tasks
• Automatic scaling with traffic
• Built-in logging and debugging
• Direct function calls for testing and verification

Integration and Connectivity

Shared Connectors (App Functionality)

• Lovable Cloud: full-stack hosting and backend services
• Lovable AI: advanced AI capabilities for app features
• ElevenLabs: text-to-speech and audio generation
• Firecrawl: website scraping and content extraction
• Perplexity: AI-powered web research and question answering
• Shopify: e-commerce operations management
• Stripe: payment processing and subscriptions
• Supabase: alternative backend with authentication and storage

Personal Connectors (MCP Servers)

• Connect to personal tool accounts for context during app creation
• Support for Linear, Notion, Jira, Confluence, Miro, n8n
• Custom MCP servers for internal systems
• Provide real data context without including in deployed app

Custom API Integration

• Integrate any external API, public or private
• Automatic handling of authentication (API keys, Bearer tokens, OAuth)
• Secure credential storage using Lovable Cloud secrets
• Edge Functions automatically protect sensitive credentials
• Support for APIs without authentication

Lovable API: Build with URL

• Programmatically create applications via shareable URLs
• Pass prompts and images via URL parameters
• Base URL: https://lovable.dev/?autosubmit=true#prompt=YOUR_PROMPT
• Support up to 10 reference images per URL
• Automatic authentication flow for logged-in and new users
• Use Lovable Link Generator for easy URL construction
• Max 50,000 characters for prompts

Testing and Verification

Browser Testing

• Interact with app in real browser environment
• Navigate pages, click buttons, fill forms, submit requests
• Capture screenshots and inspect UI elements
• Observe console logs and network activity
• Verify multi-step user flows and workflows

Frontend Testing

• Write and run UI tests using Vitest and React Testing Library
• Test conditional rendering and complex state management
• Fast feedback without running full app
• Tests stored as .test.tsx files alongside components

Backend Verification

• Direct edge function calls with specific inputs
• Automated edge tests using Deno test runner
• Inspect request/response data and logs
• Verify business logic and permissions
• Regression protection for backend changes

Collaboration and Governance

Project-Level Collaboration

• Invite collaborators via email to specific projects
• Role-based permissions: Viewer, Editor, Admin, Owner
• Real-time change visibility as team members build
• Magic link sharing for easy access
• Collaborators use project owner’s workspace credits

Workspace Collaboration

• Invite team members to entire workspace
• Workspace-level roles: Viewer, Editor, Admin, Owner
• Granular permission control on paid plans
• Unlimited workspace members on all plans
• Shared access to all projects in workspace
• Workspace settings customization (name, avatar, description)

GitHub Integration

• Sync code to GitHub repositories
• Iterate on code in GitHub or preferred IDE
• Keep Lovable and GitHub in sync
• Full code ownership and portability
• Integrate into existing engineering workflows

Project Visibility and Access Control

• Public projects: anyone can view and remix
• Private projects: only invited collaborators can access
• Separate controls for project editor access and published app access
• Workspace-level default website access settings
• Business/Enterprise plans: restrict published app access to workspace members only

Deployment and Publishing

Publishing and Hosting

• Deploy projects to live URLs with one click
• Auto-generated URLs at [name].lovable.app
• Publish snapshots that remain unchanged until updated
• Unpublish projects to remove public access
• Website access controls on Business/Enterprise plans

Custom Domains

• Add custom domains to published apps
• Support for Entri, Netlify, Vercel, Namecheap
• On-brand experience with custom domain
• Available on paid plans

Site Metadata and SEO

• Customize favicon, site title, and meta description
• Configure Open Graph (OG) images for social sharing
• Control how site appears in search results and link previews
• SEO and GEO optimization best practices

Analytics

• Real-time visitor tracking
• Pageview and bounce rate metrics
• Visit duration analysis
• Traffic source identification
• Device usage breakdown
• Page-level performance insights

Security and Compliance

Built-in Security Features

• API key detection in chat with warnings before sharing
• AI-powered security review before publishing
• Identify potential vulnerabilities in apps
• Secure credential storage for API keys and secrets
• Encrypted environment variables for sensitive data

Enterprise Security

• SOC 2 Type II certification
• ISO 27001:2022 compliance
• GDPR compliance
• Single Sign-On (SSO) support
• SCIM user provisioning for identity management
• Two-factor authentication (2FA)
• Workspace-level roles and permissions
• Data usage controls and opt-out options

Data Protection

• Data Processing Agreement (DPA) available
• Privacy Policy and Terms of Service
• Platform Rules and Abuse Policies
• Secure trust portal for compliance reports

Knowledge and Context Management

Custom Knowledge

• Add project guidelines and constraints
• Define user personas and target audience
• Store design assets and coding conventions
• Document security practices and compliance requirements
• External references to APIs, design systems, and style guides
• Remembered and applied across all project edits

Project Settings

• View project details and edit history
• Manage custom knowledge base
• Connect GitHub repositories
• Adjust project visibility
• Manage Lovable badge display
• Rename and delete projects

Workflows

Building a Full-Stack Application

1. Start with a prompt: Describe the application in natural language (e.g., “Create a CRM tool to manage clients, track deals, and handle invoices”)
2. Enable Lovable Cloud: When prompted, enable Cloud for backend functionality
3. Define data structure: Ask Lovable to create database tables for clients, deals, and invoices
4. Add authentication: Request login functionality with email/password or Google Sign-in
5. Implement file handling: Add file upload for contracts and invoice PDFs
6. Create edge functions: Set up automated workflows (email notifications, AI analysis, scheduled tasks)
7. Add integrations: Connect Stripe for payments, configure secrets for API keys
8. Test and verify: Use browser testing to validate user flows, edge function calls for backend logic
9. Publish: Deploy to live URL, configure custom domain and site metadata
10. Monitor: Track analytics and user behavior on published app

Debugging and Fixing Issues

1. Switch to Plan mode: Pause execution and investigate safely
2. Describe the issue: Explain the problem and expected behavior
3. Use browser testing: Reproduce the issue in a real browser environment
4. Inspect logs: Review console output and network requests
5. Call edge functions directly: Test backend logic with specific inputs
6. Approve fix plan: Review proposed solution before implementation
7. Switch to Agent mode: Execute the fix
8. Verify with tests: Add automated tests to prevent regression

Integrating External APIs

1. Identify the API: Gather endpoint URLs, authentication method, and documentation
2. Enable Lovable Cloud: Required for authenticated APIs
3. Add secrets: Store API keys securely in Cloud → Secrets
4. Request integration: Ask Lovable to integrate the API with specific endpoints and examples
5. Verify integration: Test the API call with browser testing or direct function calls
6. Add UI: Create interface for users to interact with the API

Collaborating with a Team

1. Create workspace: Set up shared workspace for team
2. Invite collaborators: Add team members with appropriate roles
3. Assign permissions: Set Viewer, Editor, Admin, or Owner roles
4. Connect GitHub: Enable code collaboration in preferred IDE
5. Monitor usage: Track credits and activity in workspace settings
6. Manage integrations: Configure shared connectors at workspace level
7. Control publishing: Set default website access policies

Integration

Lovable integrates with external tools and services through three mechanisms:

Shared Connectors extend deployed app functionality with services like Stripe, Shopify, and ElevenLabs. Configured once at workspace level, available to all projects.

Personal Connectors (MCP Servers) provide context during app creation from tools like Notion, Linear, and Jira. Only used during building, not included in deployed app.

Custom APIs connect any external service using secure credential management. Lovable automatically handles authentication and protects sensitive keys through Edge Functions.

GitHub enables code collaboration by syncing projects to repositories, allowing teams to review, extend, and maintain generated code through existing workflows.

Context

Full-Stack Architecture: Lovable generates complete applications with frontend (React/TypeScript), backend (Edge Functions), database (PostgreSQL via Supabase), and authentication. Understanding this architecture helps agents request appropriate features.

Credit System: Workspace credits are separate from Cloud/AI usage. Credits pay for building (Agent mode messages, Plan mode messages). Cloud and AI usage is billed separately with $25/month free Cloud and $1/month free AI per workspace.

Deployment Model: Publishing creates a snapshot of the project. Changes remain unpublished until explicitly updated. This allows safe iteration without affecting live users.

Security by Default: Lovable includes built-in security checks, API key detection, and vulnerability scanning. Always review security before publishing production apps.

Code Ownership: Generated code is fully owned by users and can be synced to GitHub, exported, or self-hosted. This enables integration into existing engineering workflows and long-term portability.

Visual-First Development: Lovable supports multiple input methods (prompts, Figma screenshots, sketches, website clones) and visual editing tools, making it accessible to non-technical users while maintaining code quality.

For additional documentation and navigation, see: https://docs.lovable.dev/llms.txt