General Introduction
Lovable (formerly known as GPT Engineer) is an AI software engineer tool designed to help users quickly build real websites and web applications. By talking to AI, users can easily create interactive prototypes and deploy them to the hosting service of their choice in seconds.Lovable offers full process support from code editing to one-click deployment, and is suitable for beginners and experienced developers alike.
Optional tech stack:
shadcn/ui + typescript: building a frontend + Supabase database with React, Tailwind, vite and TpeScript
shadcn/ui + javascript: Building a Frontend + Supabase Database with React, Tailwind and Vite
For newbies like me who can't read the code at all, the Cursor Lovable, Windsurf Editor cap (a poem) Bolt It's all worth trying, but it's still not quite enough for "liberal arts students" to actually build applications that are versatile and include front- and back-end services.
The above tools categorized as "AI IDE" still have certain thresholds, starting from 1. describing the functions that need to be implemented 2. debugging and executing the code locally 3. deploying the program, which constrains the majority of people from trying to "write their own apps using natural language descriptions! "This is the only way to write your own application in natural language description.
If you only want to build simple, purely front-end single pages, relying on cloudflare workers is probably a better option, at least to avoid the three thresholds mentioned above. It's not hard to understand, just as it's always easy to get big language models to generate markup languages like markdown or Mermaid.
Function List
- Chat builds websites and applications: Rapidly generate websites and web applications by talking to AI.
- Code ownership: The user has the generated code and can edit it using AI or their favorite IDE.
- One-Click Deployment: Supports one-click deployment to a hosting service of the user's choice.
- GitHub Synchronization: Synchronize with your GitHub account for easy code management.
- Advanced Features: Provides advanced features such as AI-driven back-end generation and team collaboration tools.
Using Help
- Register & Login::
- Visit the GPT Engineer website, click on the "Register" button, and fill out the necessary personal information to complete your registration.
- Once registration is complete, log in with your registered email and password.
- Create a project::
- After logging in, click on the "Create New Project" button and enter the project name and description.
- Select the project type (website or web application) and click "Create".
- Dialog Building with AI::
- On the project page, click the "Start a conversation" button to have a conversation with the AI.
- Describe the functionality and design of the website or application you want to build, and AI will generate code based on your description.
- You can review and edit the generated code at any time to make sure it meets your needs.
- Code editing and management::
- The generated code can be modified in the site's built-in code editor.
- You can also sync the code to your GitHub account and edit it using your favorite IDE.
- One-Click Deployment::
- Once you have finished editing the code, click the "Deploy with a click" button and select your hosting service (e.g. Vercel, Netlify, etc.).
- The system will automatically deploy your project to the chosen hosting service and it will be live within seconds.
- Advanced Features::
- GPT Engineer offers advanced features such as AI-driven back-end generation and team collaboration tools.
- These features can be unlocked by upgrading to a Pro or Team account, as described in the upgrade guide on the website.
- Synchronizing to git and build backend services
Authorize and sync the project to GitHub, then authorize Supabase and start building the backend code.
Tips for use
- Utilizing the dialogue function to the fullest extent: Describe your requirements in detail with the AI to ensure that the generated code meets expectations.
- Regular code synchronization: Synchronize code to GitHub for easy versioning and team collaboration.
- Utilizing advanced features: Upgrade your account to unlock more advanced features and improve development efficiency based on project requirements.
With the above steps, users can easily get started with GPT Engineer and quickly build high-quality websites and web applications.
