Open Lovable

Giới thiệu

Open Lovable là một dự án mã nguồn mở được phát triển bởi đội ngũ Firecrawl, đóng vai trò là giải pháp thay thế miễn phí cho Lovable.dev. Repository này giải quyết vấn đề khởi tạo giao diện người dùng (Frontend) nhanh chóng bằng cách cho phép người dùng ‘trò chuyện’ với AI để xây dựng ứng dụng. Điểm đặc biệt nhất là khả năng sử dụng Firecrawl để quét (scrape) một website bất kỳ và biến nó thành code React/Next.js sạch, giúp các lập trình viên tiết kiệm hàng giờ code giao diện thủ công. Ứng dụng thực tế bao gồm việc tạo nhanh các bản mẫu (prototype), học hỏi cách xây dựng UI từ các trang web nổi tiếng, hoặc dựng khung sườn cho dự án mới.

Tính năng chính

Website Cloning: Nhập URL của bất kỳ trang web nào, hệ thống sẽ dùng Firecrawl để phân tích và AI sẽ viết lại code React tái tạo giao diện đó.
Chat-to-App: Giao diện hội thoại cho phép bạn ra lệnh bằng ngôn ngữ tự nhiên (ví dụ: ‘Thêm nút đăng nhập màu xanh’, ‘Sửa lại header’) để chỉnh sửa ứng dụng theo thời gian thực.
Sandbox an toàn: Tích hợp môi trường Sandbox (E2B hoặc Vercel) để chạy và xem trước code do AI tạo ra một cách an toàn, cô lập.
Hỗ trợ đa mô hình AI: Tương thích với nhiều LLM mạnh mẽ như GPT-4o, Claude 3.5 Sonnet, Gemini, hoặc các model mã nguồn mở khác.
Tech Stack hiện đại: Code được tạo ra sử dụng Next.js, React, Tailwind CSS và Shadcn UI, đảm bảo chất lượng và dễ bảo trì.

Hướng dẫn cài đặt Local (macOS)

Để chạy Open Lovable trên macOS, bạn cần cài đặt sẵn Node.js (khuyên dùng bản LTS) và Git.

Clone repository:

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

Cài đặt dependencies: Khuyên dùng pnpm để cài đặt nhanh hơn:
```
npm install -g pnpm
pnpm install
```
Cấu hình biến môi trường: Copy file mẫu và điền API Key:
```
cp .env.example .env.local
```
Mở file .env.local và điền các thông tin quan trọng:
- FIRECRAWL_API_KEY: Lấy tại firecrawl.dev (để tính năng clone web hoạt động).
- OPENAI_API_KEY (hoặc Anthropic/Gemini key): Để AI sinh code.
- Cấu hình Sandbox (chọn E2B hoặc Vercel).
Chạy ứng dụng:
```
pnpm dev
```
Truy cập http://localhost:3000 để bắt đầu sử dụng.

Hướng dẫn Docker

Dự án hiện tại chưa cung cấp sẵn Dockerfile chính thức trong root, nhưng bạn có thể tạo một Dockerfile cơ bản cho ứng dụng Next.js như sau:

Tạo file Dockerfile trong thư mục gốc:

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]

Build Docker Image:
```
docker build -t open-lovable .
```

Run Container (nhớ truyền file env):

docker run -p 3000:3000 --env-file .env.local open-lovable

Ví dụ Code (Cấu hình .env)

Phần quan trọng nhất để Open Lovable hoạt động là cấu hình đúng các API Key. Dưới đây là ví dụ nội dung file .env.local tiêu chuẩn:

# Cấu hình AI Provider (Ví dụ dùng OpenAI)
OPENAI_API_KEY="sk-proj-xxxxxxxxxxxxxxxxxxxxxxxx"

# Cấu hình Firecrawl (Bắt buộc để clone website)
FIRECRAWL_API_KEY="fc-xxxxxxxxxxxxxxxxxxxxxxxx"

# Cấu hình Sandbox (Ví dụ dùng E2B - Khuyên dùng cho trải nghiệm tốt nhất)
SANDBOX_PROVIDER="e2b"
E2B_API_KEY="e2b_xxxxxxxxxxxxxxxxxxxxxxxx"

# Tùy chọn: Chọn model mặc định
NEXT_PUBLIC_DEFAULT_MODEL="gpt-4o"

Sources

Github Page

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

Tags: github