LLM Wiki

Open Lovable

4 min read

Open Lovable

Firecrawl 팀이 만든 오픈소스 웹사이트 클로너 — URL을 입력하면 React 앱으로 자동 변환. Lovable.dev의 오픈소스 버전.

개요

Open Lovable은 Firecrawl 팀이 내부 개발 속도를 높이기 위해 만든 도구를 오픈소스로 공개한 프로젝트입니다. URL을 입력하면 Firecrawl의 웹 스크래핑 + AI 코드 생성 파이프라인을 통해 현대적인 React 애플리케이션으로 변환합니다.

  • GitHub Stars: 25,700+
  • Forks: 4,900+
  • License: MIT
  • Primary Language: TypeScript (94.9%)
  • Created: 2025-08-08
  • Last Commit: 2025-11-20 (v3)

주요 기능

  • URL → React 앱: 웹사이트 URL을 입력하면 React + TypeScript + Tailwind CSS 기반의 완전한 코드베이스 생성
  • 다중 AI 모델 지원: Claude, GPT-4, Gemini, Groq 중 선택 가능
  • 실시간 스트리밍: SSE(Server-Sent Events)를 통한 실시간 코드 생성 진행 상황 스트리밍
  • 사브박스 환경: Vercel 또는 E2B 사브박스에서 코드 실행 및 미리보기
  • Morph Fast Apply: Morph API를 통한 빠른 코드 적용 (선택사항)
  • 에이전트 모드: AI가 파일을 탐색하고 수정할 수 있는 자율적 코드 편집 기능
  • 대시보드: 생성된 앱 목록, 검색, 브랜드 확장 모드 지원

기술 스택

레이어기술
FrontendReact 18+, TypeScript, Vite
StylingTailwind CSS, Shadcn/ui
FrameworkNext.js (App Router)
AI SDKVercel AI SDK
ScrapingFirecrawl API
SandboxVercel (OIDC/PAT) 또는 E2B
AI ProvidersAnthropic, OpenAI, Google Gemini, Groq

아키텍처 핵심

코드 생성 파이프라인 (/api/generate-ai-code-stream)

  1. URL 분석: Firecrawl로 웹사이트 렌더링 및 HTML 추출
  2. 파일 선택: AI가 수정/생성할 파일 intelligent하게 선택
  3. 코드 생성: Vercel AI SDK를 통해 다중 모델 지원, SSE 스트리밍
  4. 사브박스 적용: Vercel/E2B 사브박스에서 코드 실행 및 빌드
  5. 실시간 미리보기: 생성된 앱을 사브박스에서 즉시 확인

대화 상태 관리

  • global.conversationState를 통한 상태 추적
  • 대화 히스토리 및 컨텍스트 유지
  • 실시간 진행 상황 업데이트

설정 방법

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

필수 환경변수:

  • FIRECRAWL_API_KEY (스크래핑용)
  • AI Provider: ANTHROPIC_API_KEY 또는 OPENAI_API_KEY 또는 GEMINI_API_KEY 또는 GROQ_API_KEY
  • Sandbox: VERCEL_OIDC_TOKEN (권장) 또는 E2B_API_KEY

선택사항:

  • MORPH_API_KEY (빠른 코드 적용)

사용 사례

  • 클라이언트 프로젝트 랜딩페이지 클론
  • 스타트업 빠른 프로토타이핑
  • 실제 사이트 구조 학습 (React 패턴)
  • 포트폴리오 웹사이트 제작

관련 프로젝트

  • Lovable.dev — 상용 클라우드 버전
  • Firecrawl — 웹사이트 스크래핑 API

그래프 뷰

백링크