Mở Hướng dẫn Lovable: Chạy v3 Cục bộ và Xác thực bản sao
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.
Nstdata 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ã đó. Nstdata 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ữ 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.
Giao diện Next.js, tuyến đường, lời nhắc, thao tác tệp
Bạn
Nhà cung cấp ghi nhận
HTML nguồn, ảnh chụp màn hình, kiểu dáng và bối cảnh trang
Firecrawl theo mặc định
Nhà cung cấp AI
Tạo ban đầu và sửa đổi sau đó
Nhà cung cấp bạn chọn
Nhà cung cấp hộp cát
Cài đặt cô lập, xây dựng, xem trước và thực thi lệnh
Vercel Sandbox hoặc E2B
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.
Quyết định
Open Lovable
Lovable.dev
Điểm khởi đầu
URL công khai hoặc được ủy quyền hiện có cộng với trò chuyện
Mô tả sản phẩm và trò chuyện
Mô hình lưu trữ
Chạy máy chủ tự mình
Dịch vụ được quản lý
Quyền sở hữu mã
Kho lưu trữ và dự án được tạo ra có sẵn cho bạn
Xuất mã và tích hợp phụ thuộc vào quy trình làm việc sản phẩm hiện tại
Dịch vụ yêu cầu
Cung cấp thông tin xác thực ghi nhận, mô hình và hộp cát
Các dịch vụ được đóng gói bởi nền tảng
Mô hình thanh toán
Máy chủ mã nguồn mở cộng với phụ thuộc dựa trên sử dụng
Giới hạn đăng ký và sử dụng
Phù hợp nhất
Tạo mẫu, học tập, tái tạo UI nội bộ
Phát triển ứng dụng mới với công cụ sản phẩm được quản lý
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.
Nhìn qua nhanh
Kiểm tra việc ghi lại trang một cách độc lập trước khi gửi một tài liệu nguồn lớn vào một lời nhắc tạo mã. Nstdata Crawl có thể trả về HTML đã được kết xuất, Markdown, liên kết và các tài sản hình ảnh cho bước xác thực đó.
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--versionpnpm--versiongit--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
pnpminstall --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.
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 Nstdata 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
Nstdata 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 Nstdata 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 Nstdata 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.
Triệu chứng
Ranh giới có thể
Những gì cần kiểm tra
Trang chính không xây dựng
Ứng dụng chủ
Tệp khóa, móc cài đặt gốc, thoát Google Fonts, đầu ra lint
Thu thập URL thất bại
Nhà cung cấp thu thập
Khóa phía máy chủ, URL được ủy quyền, trạng thái nhà cung cấp, nội dung lỗi trả về
Chat không trả về mã
Nhà cung cấp AI
Mô hình đã chọn, khóa nhà cung cấp, hạn ngạch, nhật ký máy chủ, cắt ngắn phản hồi
Xem trước không bao giờ bắt đầu
Nhà cung cấp sandbox
Nhà cung cấp rõ ràng, khóa OIDC hoặc API, định danh dự án, giới hạn sandbox
Xem trước biên dịch nhưng trông sai
Hợp đồng tạo ra
Ảnh chụp màn hình nguồn, phông chữ đã tải, trạng thái đáp ứng, tài sản bị thiếu
Xuất hoạt động nhưng triển khai thất bại
Dự án đã tạo
Cài đặt sạch, biến môi trường, phiên bản Node, biên dịch sản xuất
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 Nstdata.
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 Nstdata 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, Nstdata 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.
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: Nstdata Crawl có thể thay thế Firecrawl trong Open Lovable không?
Nstdata 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 Nstdata 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.
Lena Zhou
Sep. 24th 2026
Trải nghiem Nstdata -
Bat dau dung thu mien phi ngay
110M+ IP that voi ti le truy cap thanh cong 99.9%
Truy cap ngay cac pool proxy residential, datacenter, IPv6 va ISP cao cap.
Phan hoi trung binh ~0.5s cho tac vu dong thoi cao
