Cách sử dụng Open Lovable, giải pháp mã nguồn mở thay thế Loveable AI

Chào các bạn lập trình viên! Bạn đã bao giờ mơ ước nhân bản bất kỳ trang web nào và biến nó thành một ứng dụng React đẹp mắt chỉ trong vài giây chưa? Vậy thì hãy sẵn sàng, vì chúng ta sẽ cùng tìm hiểu về Open Lovable, một giải pháp mã nguồn mở tuyệt vời thay thế cho Lovable AI. Công cụ này cho phép bạn tận dụng AI để tái tạo các trang web thành ứng dụng React hiện đại, tất cả mà không phải trả mức giá cao cấp như đối thủ độc quyền của nó. Trong hướng dẫn này, chúng ta sẽ khám phá Open Lovable là gì, tại sao nó là một công cụ thay đổi cuộc chơi, và cách thiết lập nó bằng cách sử dụng các công nghệ cốt lõi: E2B Sandbox để thực thi mã an toàn, Firecrawl để cạo dữ liệu web, mô hình AI Kimi để suy luận nhanh, và nhân bản kho lưu trữ GitHub của nó. Đến cuối cùng, bạn sẽ sẵn sàng xây dựng các bản sao React của riêng mình—hãy bắt đầu!

💡

Bạn muốn một công cụ kiểm thử API tuyệt vời có thể tạo tài liệu API đẹp mắt?

Bạn muốn một nền tảng tích hợp, tất cả trong một để Nhóm phát triển của bạn làm việc cùng nhau với năng suất tối đa?

Apidog đáp ứng mọi yêu cầu của bạn và thay thế Postman với mức giá phải chăng hơn nhiều!

nút

Open Lovable là gì và tại sao nên chọn nó thay vì Lovable AI?

Open Lovable là một dự án mã nguồn mở từ Mendable AI cho phép bạn nhân bản và tái tạo bất kỳ trang web nào thành một ứng dụng React hiện đại bằng cách sử dụng các công cụ hỗ trợ AI. Được ra mắt như một giải pháp thay thế miễn phí cho Lovable AI—một dịch vụ độc quyền sử dụng AI để tạo mã React từ ảnh chụp màn hình hoặc mô tả trang web—Open Lovable trao quyền cho bạn mà không cần đăng ký hoặc giới hạn. Nó được lưu trữ trên GitHub tại github.com/mendableai/open-lovable, và được thiết kế dành cho các nhà phát triển muốn sự minh bạch, tùy chỉnh và không tốn chi phí ngoài việc sử dụng API tùy chọn.

Lovable AI, mặc dù đổi mới, yêu cầu một gói trả phí bắt đầu từ 25 USD/tháng để có quyền truy cập đầy đủ, với các giới hạn về số lần tạo và tính năng. Open Lovable, mặt khác, hoàn toàn miễn phí và mã nguồn mở, được cấp phép theo MIT, nghĩa là bạn có thể phân nhánh, sửa đổi và triển khai nó theo ý muốn. Đây là món quà của Mendable AI dành cho cộng đồng, được xây dựng để dân chủ hóa phát triển web dựa trên AI. Cho dù bạn là một nhà phát triển độc lập đang thử nghiệm với React hay một nhóm đang tạo mẫu ứng dụng, Open Lovable giúp tiết kiệm thời gian và tiền bạc trong khi mang lại kết quả chất lượng cao.

Một trong những khía cạnh nổi bật là sự tập trung vào quyền riêng tư và kiểm soát—chạy nó cục bộ, sử dụng khóa API của riêng bạn và tránh bị khóa nhà cung cấp. Ngoài ra, nó được thúc đẩy bởi cộng đồng, với những đóng góp được hoan nghênh để thêm các tính năng mới như hỗ trợ nhiều framework hơn hoặc các tùy chọn cạo dữ liệu nâng cao. Nếu bạn đã chán các công cụ độc quyền, Open Lovable là tấm vé dẫn đến tự do của bạn!

Tìm hiểu về Ngăn xếp Công nghệ của Open Lovable

Open Lovable được xây dựng trên một ngăn xếp thông minh kết hợp cạo dữ liệu web, suy luận AI và thực thi an toàn. Hãy cùng tìm hiểu từng thành phần một cách ngắn gọn:

E2B Sandbox: Thực thi mã an toàn trên đám mây

E2B Sandbox là một nền tảng dựa trên đám mây để chạy mã trong môi trường cô lập, hoàn hảo cho các tác vụ AI liên quan đến mã không đáng tin cậy hoặc tính toán nặng. Trong Open Lovable, nó xử lý việc thực thi mã React được tạo ra một cách an toàn, ngăn chặn các rủi ro bảo mật tiềm ẩn như các script độc hại. Bạn nhận được khóa API từ e2b.dev, và nó miễn phí cho việc sử dụng cơ bản (với các gói trả phí cho nhiều sandbox hơn). Hãy coi nó như sân chơi an toàn của AI của bạn—thiết yếu để nhân bản trang web mà không ảnh hưởng đến máy cục bộ của bạn.

Mô hình AI Kimi: Suy luận nhanh và hiệu quả

Mô hình AI Kimi, từ Moonshot AI, là một LLM hiệu suất cao được tối ưu hóa cho các tác vụ lập trình và ngữ cảnh dài, có sẵn thông qua các nhà cung cấp như Groq để suy luận cực nhanh. Trong Open Lovable, Kimi cung cấp sức mạnh cho AI phân tích các trang web đã được cạo và tạo mã React. Nó miễn phí trong giai đoạn beta (thông qua gói miễn phí của Groq) hoặc chi phí thấp khoảng ~0,0002 USD cho mỗi 1K token. Kimi vượt trội trong việc hiểu cấu trúc web và xuất các thành phần React sạch, làm cho nó trở nên lý tưởng cho công cụ này. Nếu bạn đang sử dụng Groq, hãy lấy khóa từ console.groq.com—nó rất nhanh và hỗ trợ tới 128K token.

Firecrawl: Cạo dữ liệu web mạnh mẽ để thu thập dữ liệu

Firecrawl là một API cạo dữ liệu web mạnh mẽ tạo thành nền tảng của quá trình thu thập dữ liệu của Open Lovable. Nó thu thập dữ liệu từ các trang web một cách hiệu quả, trích xuất nội dung có cấu trúc như HTML, văn bản, hình ảnh hoặc JSON trong khi xử lý các thách thức phổ biến như kết xuất JavaScript và các biện pháp chống bot. Trong quy trình của Open Lovable, Firecrawl tìm nạp bố cục và các phần tử của trang web mục tiêu, sau đó được Kimi AI phân tích để tạo ra các bản sao React chính xác. Lấy khóa API từ firecrawl.dev—nó có giá phải chăng khoảng ~0,0001 USD mỗi trang và rất quan trọng để tái tạo trang web đáng tin cậy, chất lượng cao mà không cần can thiệp thủ công.

Nhân bản Kho lưu trữ GitHub: Cốt lõi của Open Lovable

Trái tim của Open Lovable là kho lưu trữ GitHub của nó tại github.com/mendableai/open-lovable, mà bạn nhân bản để bắt đầu. Kho lưu trữ này chứa giao diện người dùng Next.js, các script tích hợp AI và các tệp cấu hình. Nhân bản nó cho phép bạn truy cập đầy đủ vào mã nguồn, cho phép tùy chỉnh như thêm các mô hình AI mới hoặc các tùy chọn cạo dữ liệu. Nó chỉ đơn giản là một lệnh git clone, và vì nó là mã nguồn mở, bạn có thể đóng góp lại cho cộng đồng.

Cùng nhau, ngăn xếp này tạo ra một quy trình liền mạch: cạo một trang web bằng Firecrawl (được tích hợp trong kho lưu trữ), phân tích bằng Kimi, thực thi an toàn trong E2B và xuất ra một ứng dụng React. Bây giờ, hãy thiết lập nó!

Hướng dẫn từng bước để thiết lập Open Lovable

Việc chạy Open Lovable rất đơn giản. Chúng ta sẽ nhân bản kho lưu trữ, cấu hình khóa và kiểm tra nó bằng một bản sao trang web. Hãy cùng thực hiện!

Bước 1: Nhân bản Kho lưu trữ

Mở Terminal của bạn:

Khởi động terminal yêu thích của bạn (ví dụ: terminal tích hợp của VS Code hoặc iTerm).

Nhân bản Kho lưu trữ:

Chạy:

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

Thao tác này sẽ kéo mã mới nhất từ GitHub, bao gồm ứng dụng Next.js và các script AI.

Cài đặt các phụ thuộc:

Cài đặt các gói Node.js:

npm install

Thao tác này thiết lập mọi thứ, từ React đến tích hợp AI.

Bước 2: Cấu hình khóa API trong .env.local

Open Lovable cần các khóa cho E2B, Firecrawl (để cạo dữ liệu), và nhà cung cấp AI của bạn (ví dụ: Groq cho Kimi).

Tạo .env.local:

Trong thư mục gốc của dự án, tạo .env.local và thêm:

# Required
E2B_API_KEY=your_e2b_api_key  # Từ e2b.dev
FIRECRAWL_API_KEY=your_firecrawl_api_key  # Từ firecrawl.dev để cạo dữ liệu web

# Nhà cung cấp AI tùy chọn (cần ít nhất một)
ANTHROPIC_API_KEY=your_anthropic_api_key  # Từ console.anthropic.com (Claude)
OPENAI_API_KEY=your_openai_api_key  # Từ platform.openai.com (GPT)
GROQ_API_KEY=your_groq_api_key  # Từ console.groq.com (cho mô hình Kimi)

Lấy khóa E2B: Đăng ký tại e2b.dev, tạo một khóa API—miễn phí cho các sandbox cơ bản.
Lấy khóa Firecrawl: Tại firecrawl.dev, đăng ký và tạo một khóa—thiết yếu để cạo nội dung trang web.
Lấy khóa Groq cho Kimi: Đăng ký tại console.groq.com, lấy một khóa API miễn phí. Kimi nhanh (lên đến 200 token/giây) và tuyệt vời cho việc tạo mã.

Lưu và Khởi động lại:

Lưu tệp. Các biến môi trường được tải tự động trong Next.js.

Bước 3: Chạy Open Lovable cục bộ

Khởi động Máy chủ phát triển:

Chạy:

npm run dev

Mở http://localhost:3000 trong trình duyệt của bạn.

Kiểm tra nhân bản một trang web:

Trong ứng dụng, nhập URL trang web (ví dụ: https://example.com. Thật sự bất kỳ trang web nào bạn muốn nhân bản).
Open Lovable sẽ cạo trang web bằng Firecrawl, phân tích nó bằng Kimi (thông qua Groq), và tạo một ứng dụng React trong E2B Sandbox.
Tải xuống mã React đã tạo và chạy nó cục bộ bằng npm start.

nhân bản trang web firecrawl với phong cách neobrutalist — Nhân bản trang web Firecrawl với phong cách Neobrutalist

Bước 4: Tùy chỉnh và mở rộng Open Lovable

Open Lovable có khả năng tùy chỉnh cao—đây là cách để bạn biến nó thành của riêng mình:

Chuyển đổi Mô hình AI:

Chỉnh sửa .env.local để sử dụng Claude (ANTHROPIC_API_KEY) để suy luận tốt hơn hoặc GPT (OPENAI_API_KEY) để sáng tạo.

2. Thêm tính năng:

Phân nhánh kho lưu trữ và sửa đổi src/pages/index.tsx để thêm các lời nhắc tùy chỉnh hoặc hỗ trợ đầu ra Vue.js.

3. Triển khai lên Vercel:

Đẩy lên GitHub và triển khai lên Vercel để có phiên bản trực tiếp: vercel --prod.

4. Mở rộng với Firecrawl: Nâng cấp lên gói trả phí của Firecrawl để cạo dữ liệu không giới hạn nếu bạn đạt giới hạn miễn phí.

Mẹo chuyên nghiệp: Nếu việc cạo dữ liệu thất bại (ví dụ: do các biện pháp chống bot), hãy sử dụng proxy trong cài đặt Firecrawl—kiểm tra tài liệu của họ để biết chi tiết.

Khắc phục sự cố thường gặp

Lỗi khóa API? Xác minh các khóa trong .env.local và đảm bảo chúng hoạt động trên bảng điều khiển của nhà cung cấp.
Cạo dữ liệu thất bại? Một số trang web chặn Firecrawl; hãy thử một URL khác hoặc thêm tiêu đề vào mã.
Tạo chậm? Kimi trên Groq rất nhanh, nhưng hãy chuyển sang mô hình nhẹ hơn như GPT-4o-mini nếu cần.
Giới hạn E2B Sandbox? Gói miễn phí có các hạn chế; hãy nâng cấp để có nhiều lượt chạy đồng thời hơn.
Sự cố nhân bản kho lưu trữ? Đảm bảo Git đã được cài đặt và kiểm tra kết nối internet của bạn.

So sánh Open Lovable với Lovable AI

Mặc dù Lovable AI được trau chuốt và thân thiện với người dùng, nhưng nó là độc quyền với các gói trả phí bắt đầu từ 25 USD/tháng cho số lần tạo không giới hạn. Open Lovable miễn phí mãi mãi, nhưng bạn phải quản lý chi phí API (ví dụ: gói miễn phí của Groq bao gồm các cơ bản, ~0,0002 USD cho mỗi 1K token đối với Kimi). Lovable AI cung cấp nhiều hướng dẫn hơn với các mẫu dựng sẵn, nhưng Open Lovable cung cấp cho bạn quyền truy cập mã đầy đủ để tùy chỉnh—lý tưởng cho các nhà phát triển muốn kiểm soát. Nếu quyền riêng tư là yếu tố then chốt, Open Lovable chạy cục bộ, trong khi Lovable AI dựa trên đám mây. Nhìn chung, Open Lovable thắng thế về chi phí và tính linh hoạt, đặc biệt với sự hỗ trợ từ cộng đồng.

Các trường hợp sử dụng thực tế cho Open Lovable

Tạo mẫu trang web: Nhân bản trang web của đối thủ cạnh tranh và điều chỉnh nó thành một ứng dụng React để thử nghiệm A/B.
Học React: Tạo mã React từ các trang web hiện có để nghiên cứu cấu trúc và thành phần.
Di chuyển các trang web cũ: Cạo dữ liệu các trang HTML cũ và chuyển đổi chúng thành React hiện đại để dễ bảo trì hơn.
Thử nghiệm thương mại điện tử: Nhân bản bố cục của một cửa hàng và xây dựng giao diện người dùng React tùy chỉnh với phần backend của bạn.

Với sự thông minh trong lập trình của Kimi và sự an toàn của E2B, nó đáng tin cậy cho các nguyên mẫu sản xuất.

Tương lai của Open Lovable và các đóng góp

Là một dự án mã nguồn mở, Open Lovable được thúc đẩy bởi cộng đồng—hãy gửi các vấn đề hoặc PR trên GitHub để thêm các tính năng như hỗ trợ Svelte hoặc xử lý lỗi tốt hơn. Mendable AI có kế hoạch cập nhật để có thêm các mô hình (ví dụ: tích hợp Claude) và khả năng cạo dữ liệu nâng cao. Theo dõi kho lưu trữ github để biết các bản phát hành!

Kết luận

Giờ đây bạn đã là một chuyên gia Open Lovable! Từ việc nhân bản kho lưu trữ đến tạo ứng dụng React với E2B, Kimi và Firecrawl, bạn đã có một công cụ miễn phí để cạnh tranh với Lovable AI. Hãy thử nghiệm với các trang web khác nhau, tùy chỉnh mã và chia sẻ các sáng tạo của bạn. Có câu hỏi hoặc các bản sao thú vị? Hãy để lại bình luận—tôi rất muốn nghe!

💡

nút