DOCSEARCHbyAlgolia
Submit Docs

Open Lovable

repository·main·Indexed 12 days ago

https://github.com/firecrawl/open-lovable

An open-source AI-powered tool by the Firecrawl team that enables users to build React applications instantly through chat. It supports multiple AI providers including OpenAI, Anthropic, Google, and Groq, and integrates with E2B and Vercel sandboxes for ephemeral Linux VM execution.

Tokens
15.2K
Snippets
43
Records
73
Agent score
99%

What's inside Open Lovable

  2. Setup Open Lovable with E2B Sandbox

    main

    To set up the Open Lovable project configured for E2B sandboxes, follow these steps:

    1. Obtain an E2B API key from https://e2b.dev.
    2. Obtain a Firecrawl API key from https://firecrawl.dev.
    3. Create a .env file by copying .env.example and populate it with your API keys.
    4. Install dependencies using npm install.
    5. Start the development server with npm run dev.
    npm install
npm run dev

  3. Setup Open Lovable - Vercel Sandbox

    main

    To set up the Vercel Sandbox version of Open Lovable, follow these steps:

    1. Configure Vercel authentication (see Vercel Authentication section).
    2. Obtain a Firecrawl API key from https://firecrawl.dev.
    3. Create a .env file by copying .env.example and adding your credentials.
    4. Install dependencies using npm install.
    5. Start the development server with npm run dev.
    npm install
npm run dev

  4. Install and run Open Lovable

    main

    To set up Open Lovable locally, clone the repository, install dependencies using pnpm, npm, or yarn, and then start the development server. After running the dev command, the application will be available at http://localhost:3000.

    git clone https://github.com/firecrawl/open-lovable.git
cd open-lovable
pnpm install
pnpm dev

  5. Configure Open Lovable environment variables

    main

    Open Lovable requires a .env.local file with several configuration keys. You must provide a FIRECRAWL_API_KEY and choose an AI provider by providing one of the following keys: GEMINI_API_KEY, ANTHROPIC_API_KEY, OPENAI_API_KEY, or GROQ_API_KEY.

    You must also select a SANDBOX_PROVIDER (either vercel or e2b) and provide the corresponding credentials.

    # REQUIRED
FIRECRAWL_API_KEY=your_firecrawl_api_key

# AI PROVIDER (Choose one)
GEMINI_API_KEY=your_gemini_api_key
ANTHROPIC_API_KEY=your_anthropic_api_key
OPENAI_API_KEY=your_openai_api_key
GROQ_API_KEY=your_groq_api_key

# FAST APPLY (Optional)
MORPH_API_KEY=your_morphllm_api_key

# SANDBOX PROVIDER (Choose one: 'vercel' or 'e2b')
SANDBOX_PROVIDER=vercel

# If SANDBOX_PROVIDER=vercel:
# Method A: OIDC (Recommended)
VERCEL_OIDC_TOKEN=auto_generated_by_vercel_env_pull

# Method B: Personal Access Token
# VERCEL_TEAM_ID=team_xxxxxxxxx
# VERCEL_PROJECT_ID=prj_xxxxxxxxx
# VERCEL_TOKEN=vercel_xxxxxxxxxxxx

# If SANDBOX_PROVIDER=e2b:
E2B_API_KEY=your_e2b_api_key

  6. Configure the Vercel Sandbox provider

    main

    When using SANDBOX_PROVIDER=vercel, you can authenticate using one of two methods:

    1. OIDC Token (Recommended for development): Run vercel link followed by vercel env pull to automatically generate the VERCEL_OIDC_TOKEN.
    2. Personal Access Token: Provide VERCEL_TEAM_ID, VERCEL_PROJECT_ID, and VERCEL_TOKEN (obtained from the Vercel dashboard).

  8. Configure Vercel Authentication

    main

    Authentication for Vercel Sandboxes depends on your environment:

    Automatic (Vercel Deployments)

    When running directly in a Vercel environment, authentication is handled automatically via OIDC tokens. No manual configuration is required.

    Manual (Local Development)

    For local development, you must use a Personal Access Token (PAT). You will need to provide the following environment variables in your .env file:

    1. VERCEL_TOKEN: Created in your Vercel account settings.
    2. VERCEL_TEAM_ID: Found in your team settings.
    3. VERCEL_PROJECT_ID: Obtained from your specific project settings.
    VERCEL_TOKEN=your_personal_access_token
VERCEL_TEAM_ID=your_team_id
VERCEL_PROJECT_ID=your_project_id

  9. How the AI context selection process works

    main

    The context selection process follows a specific hierarchy to ensure the AI has enough information to perform precise edits without being overwhelmed by irrelevant data:

    1. Intent Analysis: The user prompt is first analyzed to determine the EditType (e.g., UPDATE_COMPONENT, FIX_ISSUE, REFACTOR).
    2. File Categorization:
      • Primary Files: The direct targets of the edit.
      • Context Files: Files provided for reference. The system prioritizes App.jsx/tsx (structure), tailwind.config (styling), index.css (global styles), and package.json (dependencies).
    3. Prompt Augmentation: A complex system prompt is built that includes:
      • Edit Examples: To guide the style of editing.
      • File Structure: A list of all project files and component relationships.
      • Component Relationships: Details on what components import, what they are imported by, and what they render.
      • Surgical Instructions: Type-specific instructions (e.g., UPDATE_COMPONENT triggers "SURGICAL EDIT INSTRUCTIONS" requiring the AI to preserve 99% of original code and return the complete file).

  10. Use VercelProvider to manage sandboxes

    main

    The VercelProvider implements the SandboxProvider interface to manage remote execution environments on Vercel. It uses a node22 runtime and defaults to port 5173 for Vite-based applications.

    Key Capabilities:

    • Lifecycle Management: Create, terminate, and check the status of sandboxes.
    • File Operations: Write files (with a fallback to shell echo if the SDK fails) and read files using cat.
    • Command Execution: Run arbitrary shell commands via runCommand.
    • Package Management: Install npm packages using installPackages.
    • Vite Integration: Includes specialized methods to setupViteApp and restartViteServer to maintain a live development environment.