Tóm tắt

• Open Lovable v3 là một ứng dụng Next.js tự lưu trữ, ghi lại một trang nguồn được ủy quyền, yêu cầu một mô hình AI tạo mã và chạy kết quả trong một hộp cát Vercel hoặc E2B.
• Ứng dụng chủ hiện tại sử dụng Next.js 15 và React 19, trong khi khung xem trước được tạo ra vẫn sử dụng Vite và React 18; việc coi chúng như một ngăn xếp dẫn đến các sửa chữa gây hiểu lầm.
• Kho lưu trữ chính thức yêu cầu một khóa Firecrawl, ít nhất một nhà cung cấp AI và một nhà cung cấp hộp cát. “Mã nguồn mở” không có nghĩa là các dịch vụ phụ thuộc là miễn phí hoặc tự lưu trữ.
• Một bản sao là một triển khai khởi đầu, không phải bằng chứng về độ chính xác hình ảnh, hành vi đáp ứng, khả năng tiếp cận, phụ thuộc sạch sẽ, hoặc quyền tái sử dụng thiết kế của người khác.
• Nstproxy Crawl có thể đóng vai trò là lớp ghi nhận và xác thực trong một nhánh tùy chỉnh, nhưng nó không phải là bộ thay thế cho các tuyến đường đặc thù Firecrawl hiện tại của Open Lovable.

---

Giới thiệu: Open Lovable có ba hệ thống để hoạt động

Open Lovable chỉ hoạt động khi việc ghi lại trang, tạo AI và thực thi trong hộp cát đồng ý với một hợp đồng sử dụng. Bản trình bày tinh xảo che giấu những ranh giới đó: một trình thu thập thông tin phải trả về đủ bối cảnh nguồn, mô hình phải phát ra mã có thể biên dịch, và hộp cát phải cài đặt và chạy mã đó. Nstproxy Crawl có thể thay thế lớp ghi nhận trong một nhánh, nhưng việc thay đổi một tên biến môi trường sẽ không chuyển dây ứng dụng.

Hướng dẫn này sử dụng ảnh chụp nhanh kho lưu trữ chính thức tại cam kết 69bd93b, bản cam kết mới nhất được gán nhãn là v3. Chúng tôi đã cài đặt các phụ thuộc đã khóa của nó, xây dựng ứng dụng Next.js, khởi động máy chủ phát triển và yêu cầu trang chủ trước khi viết các bước bên dưới.

Open Lovable là gì?

Open Lovable là một ứng dụng ví dụ có giấy phép MIT từ đội ngũ Firecrawl, biến một URL nguồn và hướng dẫn trò chuyện thành một giao diện React được tạo ra. Kho lưu trữ Open Lovable chính thức mô tả nó như một công cụ xây dựng ứng dụng React hỗ trợ AI, chứ không phải là một hệ thống di chuyển sản xuất.

Kiến trúc hiện tại có bốn lớp khác biệt:

Sự phân biệt này quan trọng vì việc thu thập thành công không chứng minh rằng dự án được tạo ra hoạt động. Tương tự, một bản xem trước hộp cát có thể biên dịch trong khi vẫn thiếu hành vi tương tác, điểm gãy đáp ứng, phông chữ, phân tích, hoặc trạng thái backend. Để biết thêm thông tin về việc ghi lại trang đã được kết xuất, xem giải thích trình duyệt headless.

Tại sao sử dụng Open Lovable thay vì Lovable.dev?

Open Lovable hữu ích khi bạn muốn có sự nhìn thấy và kiểm soát đối với ứng dụng chủ; Lovable.dev là một sản phẩm được quản lý để xây dựng và vận hành các ứng dụng thông qua một quy trình làm việc được lưu trữ. Tên gọi tương tự của chúng không khiến chúng có thể thay thế cho nhau.

Sự lựa chọn thực tiễn liên quan đến quyền sở hữu. Open Lovable cho bạn nhiều mã và cơ sở hạ tầng để kiểm tra; Lovable.dev loại bỏ nhiều thiết lập hơn. Không có con đường nào biến một ngôn ngữ hình ảnh đã sao chép thành tài sản trí tuệ có thể tái sử dụng tự động.

## Hướng Dẫn Chi Tiết

Luồng công việc Open Lovable an toàn nhất kiểm tra từng ranh giới một cách riêng biệt trước khi bạn yêu cầu mô hình tái tạo một trang đã được ủy quyền.

Phương Pháp 1: Chạy kho mã nguồn chính thức Open Lovable v3

Bước 1: Xác nhận chuỗi công cụ địa phương

Sử dụng một bản phát hành Node.js LTS hiện đang được hỗ trợ thay vì khuyến nghị Node.js 18 cũ mà một số hướng dẫn tìm thấy; Node.js hiện đã đánh dấu phiên bản 18 là hết hạn trên trang tải về chính thức. Bạn cũng cần Git và một trình quản lý gói. Chúng tôi đã xác minh kho lưu trữ với Node.js 24, pnpm 11 và Git 2.39.

node --version
pnpm --version
git --version

Bước 2: Nhân bản kho mã nguồn và tôn trọng lockfile

Nhân bản mã nguồn chính thức, sau đó cài đặt đồ thị phụ thuộc chính xác được ghi nhận bởi kho lưu trữ.

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

Trên một trình chạy không cho phép các kịch bản xây dựng phụ thuộc, pnpm có thể đánh dấu các gói như sharp hoặc một trình phân giải gốc. Đừng chấp thuận mọi kịch bản toàn cầu. Xem xét gói được nêu, phiên bản đã khóa của nó và lý do dự án cần móc cài đặt của nó, sau đó chỉ chấp thuận những kịch bản cần thiết theo chính sách của tổ chức bạn.

Bước 3: Tạo tệp môi trường tối thiểu

Sao chép .env.example vào .env.local, nhưng chỉ giữ một đường dẫn đã cấu hình cho lần chạy đầu tiên. Mã nguồn hiện tại chấp nhận một khóa AI Gateway hoặc các thông tin xác thực cá nhân từ Anthropic, OpenAI, Gemini hoặc Groq. Nó cũng bao gồm các chỉnh sửa tùy chọn được hỗ trợ bởi Morph.

FIRECRAWL_API_KEY=YOUR_FIRECRAWL_KEY

ANTHROPIC_API_KEY=YOUR_ANTHROPIC_KEY

SANDBOX_PROVIDER=vercel
VERCEL_OIDC_TOKEN=YOUR_VERCEL_OIDC_TOKEN

Không bao giờ cam kết .env.local. Giữ các khóa nhà cung cấp ở phía máy chủ và tránh dán cookie sản xuất, trang riêng tư hoặc dữ liệu khách hàng vào một lời nhắc tái tạo.

Bước 4: Chọn rõ ràng sandbox

Đặt SANDBOX_PROVIDER=vercel hoặc SANDBOX_PROVIDER=e2b; đừng dựa vào một mặc định ngầm. README và .env.example gọi Vercel là mặc định, trong khi một nhà máy sandbox chia sẻ trong mã nguồn đã kiểm tra vẫn quay lại E2B khi biến không có. Một giá trị rõ ràng xóa bỏ sự mơ hồ đó.

Đối với xác thực phát triển Vercel, kho mã hướng dẫn bạn liên kết dự án và kéo cấu hình môi trường. Đối với E2B, cung cấp E2B_API_KEY thay vì; Tài liệu chính thức của E2B xác nhận rằng SDK của nó tạo ra các sandbox riêng biệt bằng cách sử dụng biến môi trường đó.

Bước 5: Xây dựng trước khi mở UI

Một bản dựng sản xuất bắt kịp các import bị thiếu, các vấn đề về kiểu dữ liệu và sự cố biên dịch đường dẫn máy chủ sớm hơn so với một công việc tạo tương tác.

pnpm build
pnpm dev

Sau đó xác minh shell địa phương một cách riêng biệt:

curl -I http://127.0.0.1:3000/

Chạy của chúng tôi đã trở về HTTP 200 và tiêu đề HTML là Open Lovable v3. Một bản dựng hạn chế ban đầu đã thất bại vì next/font không thể truy cập Google Fonts; cho phép lối ra đó, tự lưu trữ các phông chữ hoặc thay thế cấu hình phông chữ từ xa trong CI đã được kiểm soát.

Bước 6: Tái tạo một mục tiêu được ủy quyền và có giới hạn

Bắt đầu với một trang bạn sở hữu, một yếu tố đang kiểm thử hoặc một thiết kế được cấp phép rõ ràng để tái sử dụng. Chọn một trang đích thay vì một ứng dụng đã xác thực. Gửi URL HTTPS đầy đủ, để Open Lovable tạo ra bản xem trước ban đầu và giữ cho lời nhắc đầu tiên hẹp lại: duy trì thứ tự nội dung, tái tạo kiểu dáng đáp ứng và tránh phát minh ra hành vi backend.

Đừng đánh giá kết quả từ một ảnh chụp màn hình desktop đơn lẻ. Kiểm tra viewport nhỏ nhất và lớn nhất được hỗ trợ, điều hướng bàn phím, menu, biểu mẫu, tải hình ảnh, liên kết nội bộ và bất kỳ hoạt ảnh nào truyền đạt trạng thái.

Bước 7: Xuất mã và áp dụng cổng chấp nhận

Xem mã xuất như đầu vào được tạo ra không đáng tin cậy. Kiểm tra package.json, các cuộc gọi mạng, truy cập biến môi trường, kịch bản nội tuyến, tài sản từ xa, giấy phép và lệnh xây dựng trước khi chạy hoặc triển khai nó. Thay thế thương hiệu nguồn, bản sao, hình ảnh và mã theo dõi bằng các tài sản mà bạn được phép sử dụng.

Chạy một bản dựng sản xuất và một kiểm toán trang tự động sau các chỉnh sửa của bạn. Tài liệu Lighthouse của Google bao gồm các kiểm toán hiệu suất, khả năng tiếp cận, thực hành tốt nhất và SEO, nhưng vẫn cần thử nghiệm bàn phím và chức năng thủ công.

Phương Pháp 2: Sử dụng Nstproxy Crawl trong một nhánh Open Lovable tùy chỉnh

Bước 1: Giữ cho ranh giới tích hợp trung thực

Nstproxy Crawl là một dịch vụ quản lý thu thập có thể xử lý JavaScript và trả về Markdown, HTML, JSON, liên kết và tài liệu PDF. Nó hữu ích khi một nhóm muốn truy cập qua proxy, khám phá có giới hạn và đầu ra trang lặp lại mà không cần vận hành các trình duyệt. Chi phí sử dụng được tính theo từng URL đã thu thập thành công. Open Lovable hiện không cung cấp công tắc nhà cung cấp thu thập tổng quát, vì vậy Nstproxy Crawl không thể thay thế biến môi trường một cách đơn giản; một nhánh phải điều chỉnh các tuyến máy chủ và các trường phản hồi liên quan.

Bước 2: Thay thế hợp đồng thu thập, không phải nhãn

Kho lưu trữ đã thử nghiệm gọi nhà cung cấp thu thập từ các tuyến đường để thu thập URL nâng cao, chụp màn hình, trích xuất kiểu thương hiệu, thu thập dữ liệu trang web và tìm kiếm. Một bộ chuyển đổi đáng tin cậy phải ánh xạ mỗi người tiêu dùng thay vì chỉ vá tuyến đường thu thập đầu tiên.

• Nguồn đã xử lý: Yêu cầu HTML được làm sạch hoặc định dạng khác bảo tồn DOM cho việc tạo mã; riêng Markdown có thể bỏ qua các tín hiệu bố cục mà prompt cần.
• Bằng chứng trực quan: Chụp lại một ảnh chụp màn hình hoặc PDF để xem xét bên cạnh nhau thay vì giả định rằng cấu trúc DOM được tạo ra ngụ ý độ trung thực trực quan.
• Khám phá có ranh giới: Khi tái tạo nhiều hơn một trang, hãy đặt độ sâu rõ ràng, giới hạn trang và loại trừ để các trang tìm kiếm, lịch và các biến truy vấn không mở rộng công việc một cách bất ngờ.

Hướng dẫn khởi động Nstproxy Crawl giải thích quy trình làm việc được quản lý, trong khi hướng dẫn AI web scraping đề cập đến cách nội dung trang vào các đường ống mô hình phía dưới.

Bước 3: Xác thực một bộ chuyển đổi với các vật phẩm đã ghi lại

Lưu một trang nguồn được ủy quyền, phản hồi thu thập của nó và đối tượng đã chuẩn hóa mà nhánh Open Lovable của bạn tiêu thụ. Kiểm tra hợp đồng các trường bắt buộc và trạng thái lỗi trước khi gọi mô hình. Bộ chuyển đổi nên phân biệt yêu cầu từ nhà cung cấp đã được chấp nhận với một trang thực sự đã được thu thập, và nó nên bảo toàn trạng thái HTTP, URL cuối cùng và thông điệp chẩn đoán mà không làm lộ thông tin đăng nhập.

Những gì mà xác minh buồng sạch của chúng tôi phát hiện

Kho lưu trữ Open Lovable hiện tại xây dựng và phục vụ, nhưng con đường không dễ dàng như một khởi động nhanh ba lệnh gợi ý. Tệp khóa đã thử nghiệm chứa 650 mục và cài đặt 600 gói. Một lớp chính sách gói đã dừng cài đặt đầu tiên vì các kịch bản xây dựng gốc không được chấp thuận; sau khi xem xét ranh giới đó và khôi phục các gói bị khóa, quá trình biên dịch sản xuất Next.js đã hoàn thành.

Quá trình xây dựng cũng đã cố gắng tải xuống Inter và Roboto Mono thông qua next/font. Với DNS outbound bị chặn, quá trình biên dịch thất bại; với quyền truy cập phông chữ được cho phép, nó đã tạo ra 33 trang tĩnh hoặc tuyến đường và hoàn thành thành công. ESLint báo cáo rằng nó không thể giải quyết eslint-plugin-react-hooks, nhưng Next.js vẫn tiếp tục và trả về mã thoát bằng không. Điều đó có nghĩa là "xây dựng đã qua" không đủ cho một cổng phát hành: thu thập và thất bại trên chẩn đoán lint một cách riêng biệt.

Cuối cùng, máy chủ phát triển đã sẵn sàng trong khoảng hai giây, biên dịch trang đầu tiên theo yêu cầu và trả về HTTP 200. Không có thu thập, tạo AI, hoặc tạo sandbox nào được thử nghiệm vì những hoạt động đó yêu cầu thông tin đăng nhập thuộc về người dùng và các dịch vụ bên ngoài tính phí. Đây là ranh giới chân thực giữa việc xác minh vỏ nguồn mở và xác minh một phiên bản sao hoàn chỉnh.

Khắc phục sự cố Open Lovable theo ranh giới thất bại

Các lỗi Open Lovable dễ sửa hơn khi bạn xác định được hệ thống bên ngoài nào trong ba hệ thống đã thất bại.

Tránh ghi lại các khóa API hoặc tiêu đề nhà cung cấp đầy đủ trong khi gỡ lỗi. Ghi lại các ID yêu cầu không bí mật, URL mục tiêu, lựa chọn nhà cung cấp, dấu thời gian và trạng thái lỗi đầu cuối. Để có cái nhìn tổng quát hơn về các ranh giới phản hồi API, hãy xem Bảng thuật ngữ API của Nstproxy.

Các giới hạn và việc sử dụng có trách nhiệm

Open Lovable không thể sao chép một cách đáng tin cậy mọi trang web vì một trang có thể nhìn thấy trên trình duyệt không phải là toàn bộ ứng dụng. Xác thực, cơ sở dữ liệu, hành động từ máy chủ, API riêng tư, logic thanh toán, cá nhân hóa, phân tích và cấu hình dịch vụ bên thứ ba không được phục hồi một cách an toàn từ mã được hiển thị. Các tương tác được tạo ra có thể trông hợp lý trong khi không làm gì hoặc gọi sai điểm cuối.

Giấy phép MIT áp dụng cho nguồn của Open Lovable, không áp dụng cho mọi trang web được nộp cho nó. Bản quyền, nhãn hiệu, quyền riêng tư, hợp đồng và điều khoản trang vẫn áp dụng cho tài liệu nguồn. Sử dụng các trang web bạn sở hữu hoặc có quyền sao chép, tối thiểu hóa dữ liệu được thu thập, loại bỏ theo dõi từ bên thứ ba, và xem xét hướng dẫn pháp lý và tuân thủ về web scraping trước khi vượt ra ngoài một nguyên mẫu nội bộ.

Kết luận: coi Open Lovable như một trình tạo với các hợp đồng có thể kiểm tra

Open Lovable v3 hữu ích trong việc chuyển đổi một tài liệu tham khảo trực quan được ủy quyền thành mã React có thể chỉnh sửa, miễn là bạn vận hành các lớp thu thập, AI và sandbox một cách có chủ ý. Ghim commit của kho lưu trữ, chọn nhà cung cấp một cách rõ ràng, xây dựng trước khi tạo, và từ chối bất kỳ xuất khẩu nào không hoàn thành kiểm tra phụ thuộc, kiểm tra chức năng, so sánh đáp ứng, hoặc kiểm tra khả năng truy cập.

Bắt đầu với một trang bạn kiểm soát và giữ một cơ sở kiểm tra cộng với danh sách kiểm tra. Nếu lớp thu thập là gánh nặng hoạt động diễn ra lặp đi lặp lại, hãy kiểm tra Nstproxy Crawl trên cùng một trang và đo độ hoàn thiện trước khi viết một adapter. Đối với các nhánh giữ crawler riêng nhưng cần định tuyến proxy tập trung và chẩn đoán, Nstproxy Proxy Manager là khả năng khác liên quan để đánh giá.

Kiểm tra lớp thu thập trước khi tạo mã

Sử dụng một trang nhỏ được ủy quyền để xác nhận nội dung được hiển thị, các đối tượng và xử lý lỗi trước khi bạn chi tiêu việc sử dụng mô hình và sandbox cho một sự tái tạo hoàn chỉnh.

Thử Nstproxy miễn phí →

Câu hỏi thường gặp

Hỏi: Open Lovable là gì?

Open Lovable là một ứng dụng Next.js được cấp phép theo MIT, ghi lại một trang nguồn được ủy quyền, gửi ngữ cảnh cho một mô hình AI, và chạy mã React được tạo ra trong một sandbox cách ly. Đây là một ứng dụng mẫu từ nhóm Firecrawl chứ không phải phiên bản mã nguồn mở của Lovable.dev.

Hỏi: Open Lovable có miễn phí để vận hành không?

Mã nguồn Open Lovable có sẵn theo giấy phép MIT, nhưng một quy trình tạo hoạt động sử dụng các dịch vụ thu thập, AI và sandbox bên ngoài với bảng giá dựa trên mức sử dụng hoặc theo thuê bao riêng của chúng. Hoạt động ứng dụng host cũng tiêu tốn thời gian tính toán và kỹ thuật của bạn.

Hỏi: Open Lovable có thể chạy cục bộ mà không cần khóa API không?

Giao diện host có thể bắt đầu cục bộ mà không cần khóa nhà cung cấp, như kiểm tra HTTP 200 của chúng tôi đã xác nhận, nhưng việc thu thập trang, tạo AI và xem trước trong sandbox yêu cầu các thông tin xác thực tương ứng. Một trang chủ đã tải không phải là bằng chứng rằng quy trình làm việc end-to-end đã được cấu hình.

Hỏi: Tại sao Open Lovable lại đề cập cả Next.js và Vite?

Host Open Lovable hiện tại sử dụng Next.js 15 và React 19, trong khi tuyến sandbox Vercel của nó xây dựng trước xem trước được tạo ra như một ứng dụng Vite sử dụng React 18. Khắc phục sự cố host và dự án đã tạo thành các đồ thị phụ thuộc riêng biệt.

Hỏi: Nstproxy Crawl có thể thay thế Firecrawl trong Open Lovable không?

Nstproxy Crawl có thể thay thế lớp thu thập chỉ thông qua một adapter tùy chỉnh. Mã nguồn Open Lovable hiện tại gọi các tuyến và hình dạng phản hồi cụ thể của Firecrawl, vì vậy việc đặt một mã thông báo Nstproxy dưới FIRECRAWL_API_KEY sẽ không hoạt động.

Hỏi: Việc sao chép bất kỳ trang web công khai nào bằng Open Lovable có hợp pháp không?

Không. Truy cập công khai không cấp quyền sao chép mã, tài sản thiết kế, văn bản, nhãn hiệu hoặc dữ liệu cá nhân được bảo vệ của một trang web. Hạn chế sử dụng cho các trang web mà bạn sở hữu, các mẫu được cấp phép, kiểm tra nội bộ được phép hoặc các trường hợp khác được xem xét theo pháp luật và điều khoản áp dụng.