After clicking the **Share** button, a dialog will appear with options to publish your application. Click the green **Publish** button to start the deployment process. During this time, the button will display **Publishing**.
-
+
Once the deployment is complete, the dialog will show the published address with a **Republish** button for future updates.
diff --git a/src/features/git-integration.md b/src/features/git-integration.md
index cc63ceb..aaa8e20 100644
--- a/src/features/git-integration.md
+++ b/src/features/git-integration.md
@@ -1,16 +1,16 @@
# :simple-github: GitHub Integration
-To make it easier for developers to work together with the AI on projects, gptengineer.app backs all projects with a git repository and lets you push commits directly to the repository.
+To make it easier for developers to work together with the AI on projects, Lovable backs all projects with a git repository and lets you push commits directly to the repository.
-In order to push commits to GitHub, your project and gptengineer.app will automatically pull them in and update the project. This allows you to make changes yourself, without asking the AI.
+In order to push commits to GitHub, your project and Lovable will automatically pull them in and update the project. This allows you to make changes yourself, without asking the AI.
## Connecting a project to your GitHub account
Before pushing your first commit, you will need to connect your GitHub account to the project. You can do this by navigating to GitHub -> Connect to GitHub. You will then be redirected to GitHub to authorize the connection.
-You can choose to either granting access to (1) all repositories, or (2) specific repositories. Both options will let GPT Engineer create repositories in your GitHub account or organization.
+You can choose to either granting access to (1) all repositories, or (2) specific repositories. Both options will let Lovable create repositories in your GitHub account or organization.
-Note that you can only connect one GitHub login to your GPT Engineer account, but you can create repositories in any of the organizations you choose to install the GPT Engineer app in.
+Note that you can only connect one GitHub login to your Lovable account, but you can create repositories in any of the organizations you choose to install the Lovable app in.
@@ -20,7 +20,7 @@ Please note that you will need admin access if you are trying to create a reposi
Once you have connected your GitHub account to your project, you can view the source code by navigating to GitHub -> View on GitHub.
-Any change you make and push to the repository will be automatically reflected in gptengineer.app.
+Any change you make and push to the repository will be automatically reflected in Lovable.
You can commit changes directly in GitHub Codespaces or clone the repo to use your preferred IDE.
diff --git a/src/features/index.md b/src/features/index.md
index 027ad5f..6c016bb 100644
--- a/src/features/index.md
+++ b/src/features/index.md
@@ -1,11 +1,11 @@
# :tools: Features
-GPT Engineer comes with a sleeve of features available. While these Docs are work in progress, and not all of the features are described, we wanted to showcase some of the key and most commonly used features.
+Lovable comes with a sleeve of features available. While these Docs are work in progress, and not all of the features are described, we wanted to showcase some of the key and most commonly used features.
---
## Overview
-Explore the sections below to get started quickly and learn more about some of the features offered by GPT Engineer.
+Explore the sections below to get started quickly and learn more about some of the features offered by Lovable.
@@ -13,7 +13,7 @@ Explore the sections below to get started quickly and learn more about some of t
---
- Learn how to publish and share your GPT Engineer projects quickly and efficiently with the public.
+ Learn how to publish and share your Lovable projects quickly and efficiently with the public.
[:octicons-arrow-right-24: Deploy](deploy.md)
@@ -22,7 +22,7 @@ Explore the sections below to get started quickly and learn more about some of t
---
- Extend GPT Engineer's functionality by integrating npm packages into your projects.
+ Extend Lovable's functionality by integrating npm packages into your projects.
[:octicons-arrow-right-24: Using npm packages](npm-packages.md)
@@ -30,7 +30,7 @@ Explore the sections below to get started quickly and learn more about some of t
---
- You can configure the tech stack GPT Engineer starts from.
+ You can select the tech stack Lovable starts from.
[:octicons-arrow-right-24: Tech stacks](techstacks.md)
diff --git a/src/features/npm-packages.md b/src/features/npm-packages.md
index 98418c8..1667c2b 100644
--- a/src/features/npm-packages.md
+++ b/src/features/npm-packages.md
@@ -1,6 +1,6 @@
# :simple-npm: Using npm packages
-While GPT Engineer is powerful on its own, enabling users to build sophisticated web applications, you can leverage npm packages for more advanced and extended features. These packages help you build even more complex and feature-rich applications with ease.
+While Lovable is powerful on its own, enabling users to build sophisticated web applications, you can leverage npm packages for more advanced and extended features. These packages help you build even more complex and feature-rich applications with ease.
!!! info "What is npm?"
npm (Node Package Manager) is a package manager for JavaScript that allows developers to share and reuse code. It hosts thousands of packages, which are pieces of reusable code, that you can easily integrate into your projects to extend functionality.
@@ -11,12 +11,12 @@ While GPT Engineer is powerful on its own, enabling users to build sophisticated
## Using npm packages for advanced features
-Let's say you'd like to create a tool that enables you to arrange your tasks in different Kanban boards, similar to many popular project management tools. You can prompt GPT Engineer to build this tool from scratch, but it might be slower and more challenging to achieve the desired functionality.
+Let's say you'd like to create a tool that enables you to arrange your tasks in different Kanban boards, similar to many popular project management tools. You can prompt Lovable to build this tool from scratch, but it might be slower and more challenging to achieve the desired functionality.
Instead, you can use npm packages to simplify and speed up the process. For example, the hello-pangea/dnd package provides robust drag-and-drop functionality. By using this package, you can easily create a Kanban board where users can add new cards, move them within columns, and reorder them.
!!! example "Integrating drag-and-drop npm package"
- To incorporate the hello-pangea/dnd package into your GPT Engineer project, you can use the following prompt:
+ To incorporate the hello-pangea/dnd package into your Lovable project, you can use the following prompt:
```
Use the hello-pangea/dnd npm package to add drag-and-drop functionality to my Kanban board app.
@@ -24,15 +24,15 @@ Instead, you can use npm packages to simplify and speed up the process. For exam
```
-This prompt directs GPT Engineer to integrate the package into your project, making it easier to achieve the desired functionality. Depending on other requirements, your result might look somewhat like this.
+This prompt directs Lovable to integrate the package into your project, making it easier to achieve the desired functionality. Depending on other requirements, your result might look somewhat like this.
-
+
---
## Quality and responsibility
-It’s important to note that while npm packages can significantly enhance your projects, GPT Engineer cannot guarantee the quality or reliability of these third-party packages.
+It’s important to note that while npm packages can significantly enhance your projects, Lovable cannot guarantee the quality or reliability of these third-party packages.
The functionality and performance of npm packages are the responsibility of the end user, and it’s essential to thoroughly test and validate them within your application.
diff --git a/src/free-credits.md b/src/free-credits.md
index 5e12fbd..e6129b8 100644
--- a/src/free-credits.md
+++ b/src/free-credits.md
@@ -1,6 +1,6 @@
# :gift: Get free edits
-Help your friends & followers build faster with GPT Engineer. Invite friends to use GPT Engineer, and when they create a project you’ll both earn 25 edits. If you make 30 referrals, you’ll unlock a bonus 250 edits.
+Help your friends & followers build faster with Lovable. Invite friends to use Lovable, and when they create a project you’ll both earn 25 edits. If you make 30 referrals, you’ll unlock a bonus 250 edits.
## How to start earning?
diff --git a/src/getting-started.md b/src/getting-started.md
index 16cc9b4..efc481d 100644
--- a/src/getting-started.md
+++ b/src/getting-started.md
@@ -1,12 +1,12 @@
# :rocket: Getting started
-This is a simple tutorial to get you started with the basics of gptengineer.app.
+This is a simple tutorial to get you started with the basics of Lovable.
We will guide you through the process of creating a project, making improvements, and deploying your project.
## Creating a project
-To create a new project, login to `gptengineer.app` and then write what you want to build in the textbox.
+To create a new project, login to `lovable.dev` and then write what you want to build in the textbox.
Once you have written what you want to build, click on the `Create` button.
diff --git a/src/index.md b/src/index.md
index 60f151d..0151b97 100644
--- a/src/index.md
+++ b/src/index.md
@@ -1,10 +1,10 @@
# Wecome to Lovable Academy
-GPT Engineer is an AI web builder app that lets you build real web apps fast, using just natural language. We prepared this documentation to make it even easier for you to go from an idea to an app and to understand how GPT Engineer works.
+Lovable is an AI web builder app that lets you build real web apps fast, using just natural language. We prepared this documentation to make it even easier for you to go from an idea to an app and to understand how Lovable works.
## Product Capabilities
-**GPT Engineer** currrently excels at building front-end applications. However, pairing GPT Engineer with other tools will allow you to build full-stack web apps.
+**Lovable** currrently excels at building front-end applications. However, pairing Lovable with other tools will allow you to build full-stack web apps.
| **Capability** | **Description** | **Maturity Level** |
|--------------------|------------------------------------------------------------------------------|--------------------|
@@ -13,7 +13,7 @@ GPT Engineer is an AI web builder app that lets you build real web apps fast, us
| Authentication | Handle user login and accounts (read more [here](integrations/supabase.md#supabase-authentication)) | 🟡 Requires some patience |
## Overview
-Explore the sections below to get started quickly and learn more about the features and integrations offered by GPT Engineer.
+Explore the sections below to get started quickly and learn more about the features and integrations offered by Lovable.
@@ -29,7 +29,7 @@ Explore the sections below to get started quickly and learn more about the featu
---
- From a general overview to our GitHub integration, this section covers the nuts and bolts of GPT Engineer.
+ From a general overview to our GitHub integration, this section covers the nuts and bolts of Lovable.
[:octicons-arrow-right-24: Features](features/index.md)
@@ -45,7 +45,7 @@ Explore the sections below to get started quickly and learn more about the featu
---
- Learn effective prompting strategies and get the most out of GPT Engineer with our tips and tricks collection.
+ Learn effective prompting strategies and get the most out of Lovable with our tips and tricks collection.
[:octicons-arrow-right-24: Tips and tricks](tips-tricks/prompting.md)
@@ -54,9 +54,9 @@ Explore the sections below to get started quickly and learn more about the featu
---
## Learn more
-You can learn more about GPT Engineer on our website.
+You can learn more about Lovable on our website.
-Discover the team behind GPT Engineer and our mission to make web development accessible to everyone. Learn more about the creators at :heart: Lovable.
+Discover the team behind Lovable and our mission to make web development accessible to everyone. Learn more about the creators at :heart: Lovable.
---
@@ -82,12 +82,12 @@ If Discord is your thing, then this channel is dedicated to collecting general f
## Support
-We use **Discord** and **support@lovable.dev** as our support channels for GPT Engineer users.
+We use **Discord** and **support@lovable.dev** as our support channels for Lovable users.
### Support channel - Community support only
[:simple-discord: Support channel on Discord](https://discord.com/channels/1119885301872070706/1280461670979993613)
-This is the community support channel for GPT Engineer app users. It uses a forum-style structure where each issue or bug is addressed in its own thread, making it easier to manage and track. Support is provided by community members and our Community Champions.
+This is the community support channel for Lovable app users. It uses a forum-style structure where each issue or bug is addressed in its own thread, making it easier to manage and track. Support is provided by community members and our Community Champions.
When submitting a support request, please follow these guidelines:
@@ -102,9 +102,9 @@ When submitting a support request, please follow these guidelines:
- **Public posts** - Keep in mind that all posts in this channel are public. Be mindful of any sensitive information in your videos or screenshots.
-Community support channel is usually the fastest way to get guidance about issues with GPT Engineer.
+Community support channel is usually the fastest way to get guidance about issues with Lovable.
-Pro users get priority support from our support team through dedicated channel and **support@lovable.dev**. Please ensure that you are using the same email address you used to sign up for GPT Engineer so we can assist you effeciently.
+Pro users get priority support from our support team through dedicated channel and **support@lovable.dev**. Please ensure that you are using the same email address you used to sign up for Lovable so we can assist you effeciently.
Please note that our team is located in the Europe. While we do our best to reply during our regular business hours — and sometimes outside of them — do keep in mind that over weekends or outside of EU hours, responses may take longer.
@@ -112,9 +112,9 @@ We appreciate your understanding. 🫶
---
-### General GPT Engineer app channel
-[:simple-discord: General GPT Engineer app channel on Discord](https://discord.com/channels/1119885301872070706/1186613291745824868)
+### General Lovable app channel
+[:simple-discord: General Lovable app channel on Discord](https://discord.com/channels/1119885301872070706/1186613291745824868)
-This is an open space for users to discuss anything related to GPT Engineer. Whether it's a feature you love or just a general chat about the app, this is the place to engage with the community.
+This is an open space for users to discuss anything related to Lovable. Whether it's a feature you love or just a general chat about the app, this is the place to engage with the community.
diff --git a/src/integrations/index.md b/src/integrations/index.md
index 70b740c..013d127 100644
--- a/src/integrations/index.md
+++ b/src/integrations/index.md
@@ -1,12 +1,12 @@
# :nut_and_bolt: Integrations
-GPT Engineer supports several integrations enabling you to extend its functionality.
+Lovable supports several integrations enabling you to extend its functionality.
---
## Overview
-Explore the sections below to get started quickly and learn more about GitHub and Supabase integrations currently offered by GPT Engineer
+Explore the sections below to get started quickly and learn more about GitHub and Supabase integrations currently offered by Lovable
@@ -14,7 +14,7 @@ Explore the sections below to get started quickly and learn more about GitHub an
---
- Understand how to integrate GPT Engineer with GitHub for seamless version control and collaboration.
+ Understand how to integrate Lovable with GitHub for seamless version control and collaboration.
[:octicons-arrow-right-24: Git integration](../features/git-integration.md)
diff --git a/src/integrations/supabase.md b/src/integrations/supabase.md
index 161df81..6a624fc 100644
--- a/src/integrations/supabase.md
+++ b/src/integrations/supabase.md
@@ -11,11 +11,11 @@
Discover more about Supabase [here](https://supabase.com/docs).
-To incorporate Supabase into your GPT Engineer application, start with these steps:
+To incorporate Supabase into your Lovable application, start with these steps:
## Supabase setup
-Connecting your GPT Engineer app to Supabase is straightforward. Simply follow the steps following steps:
+Connecting your Lovable app to Supabase is straightforward. Simply follow the steps following steps:
### Step 1: Create a Supabase account
@@ -25,23 +25,23 @@ Register a new Supabase account [here](https://app.supabase.com/sign-up) or [sig
Click on + New Project, complete the necessary fields, and allow a few minutes for setup.
-### Step 3: Connect Supabase to GPT Engineer
+### Step 3: Connect Supabase to Lovable
-1. In your GPT Engineer Editor, locate the Supabase button in the navbar. Click on it and select "Connect Supabase".
+1. In your Lovable Editor, locate the Supabase button in the navbar. Click on it and select "Connect Supabase".
2. You will be redirected to a page where you will be able to select the relevant organisation.
-3. You will be then redirected back to GPT Engineer, where you will need to select the relevant project within that organisation.
+3. You will be then redirected back to Lovable, where you will need to select the relevant project within that organisation.
After completing these steps, you will have to wait some seconds for your Supabase integration to finish. Look at the chat for this confirmation.
## Adding Authentication with Supabase
-This section details how to integrate the Supabase Authentication service into your GPT Engineer project, providing specific guidelines for setup and usage.
+This section details how to integrate the Supabase Authentication service into your Lovable project, providing specific guidelines for setup and usage.
### Initial setup
-To initiate authentication, ensure that you have already connected Supabase project to your GPT Engineer project.
+To initiate authentication, ensure that you have already connected Supabase project to your Lovable project.
To add a basic login page to your project, simply run a prompt similar to the one below.
@@ -65,9 +65,9 @@ Supabase offers a comprehensive Postgres database solution. Supabase enhances th
In order to start building UI that uses your data stored in Supabase simply:
-1. Ask GPT Engineer to create a new feature and that you expect the data to be stored in Supabase.
-2. GPT Engineer will then provide you with a SQL snippet that you can run in the SQL editor in Supabase to create the table(s).
-3. Once you confirm that you have run the SQL snippet, then GPT Engineer will update the UI to allow you to interact with the data stored in Supabase.
+1. Ask Lovable to create a new feature and that you expect the data to be stored in Supabase.
+2. Lovable will then provide you with a SQL snippet that you can run in the SQL editor in Supabase to create the table(s).
+3. Once you confirm that you have run the SQL snippet, then Lovable will update the UI to allow you to interact with the data stored in Supabase.
## Edge Functions
@@ -81,18 +81,18 @@ You can now also use Edge Functions to add powerful backend features like:
- Running scheduled tasks
-GPT Engineer will write and deploy Edge Functions to your Supabase project when implementing backend functionality.
+Lovable will write and deploy Edge Functions to your Supabase project when implementing backend functionality.
When troublehsooting, you can visit the the logs for your Edge Function in Supabase -> Functions -> Logs.
## Best Practices
!!! warning "Enable RLS policies before going to production"
- Important Note: Before you deploy your app to production or use any real data, you will need to review and set up the appropriate RLS policies. GPT Engineer can help with that.
+ Important Note: Before you deploy your app to production or use any real data, you will need to review and set up the appropriate RLS policies. Lovable can help with that.
## Onboarding video
-Here is an onboarding video that walks you through the process of using GPT Engineer together with Supabase to build a full stack app:
+Here is an onboarding video that walks you through the process of using Lovable together with Supabase to build a full stack app:
diff --git a/src/tips-tricks/custom-domain.md b/src/tips-tricks/custom-domain.md
index 73f3fa3..2d78bc2 100644
--- a/src/tips-tricks/custom-domain.md
+++ b/src/tips-tricks/custom-domain.md
@@ -1,6 +1,6 @@
# :earth_africa: Setting up a custom domain
-When you create a project, GPT Engineer makes it easy to [publish it](../features/deploy.md) with the click of a button.
+When you create a project, Lovable makes it easy to [publish it](../features/deploy.md) with the click of a button.
If you want to have a custom domain, see below.
@@ -10,7 +10,7 @@ You can host on Netlify for free with a custom domain.
The steps are:
-1. Open your project in gptengineer.app and click GitHub then "create repository" if you haven't already done so.
+1. Open your project in Lovable and click GitHub then "create repository" if you haven't already done so.
2. Go to: https://app.netlify.com/start/deploy?repository=PASTE_YOUR_GITHUB_PROJECTS_URL_HERE and follow instructions
3. Configure a custom domain for your Netlify site, instructions [here](https://docs.netlify.com/domains-https/custom-domains/#assign-a-domain-to-a-production-site)
diff --git a/src/tips-tricks/custom-fonts.md b/src/tips-tricks/custom-fonts.md
index 66fbd81..9f7f344 100644
--- a/src/tips-tricks/custom-fonts.md
+++ b/src/tips-tricks/custom-fonts.md
@@ -1,6 +1,6 @@
# :capital_abcd: Using custom (Google) fonts
-Currently, GPT Engineer does not support direct uploads of custom fonts. However, there are several easy ways to use web-safe or incorporate custom fonts into your projects.
+Currently, Lovable does not support direct uploads of custom fonts. However, there are several easy ways to use web-safe or incorporate custom fonts into your projects.
Below, we’ll guide you through the available methods for using web-safe and Google fonts.
@@ -35,11 +35,11 @@ Web-safe fonts like Courier New ensure that your project will have consistent ty
## Using Google Fonts
-If you prefer to use custom fonts, GPT Engineer works nicely with **Google Fonts**. This allows you to easily use a wide range of fonts in your project. You can either reference a Google font by name or by linking directly to the font resource.
+If you prefer to use custom fonts, Lovable works nicely with **Google Fonts**. This allows you to easily use a wide range of fonts in your project. You can either reference a Google font by name or by linking directly to the font resource.
### Using by name
-In your prompt, you can specify the name of a Google font, and GPT Engineer will include it in your project. For example:
+In your prompt, you can specify the name of a Google font, and Lovable will include it in your project. For example:
!!! example "Using Google Font by name"
Example prompt:
@@ -52,9 +52,9 @@ In your prompt, you can specify the name of a Google font, and GPT Engineer will
### Using by link
-Alternatively, you can provide a direct link to the Google font, and GPT Engineer will use that font in your project. You can get the link from [Google Fonts](https://fonts.google.com) by selecting the desired font and copying the link.
+Alternatively, you can provide a direct link to the Google font, and Lovable will use that font in your project. You can get the link from [Google Fonts](https://fonts.google.com) by selecting the desired font and copying the link.
-Here’s how to prompt GPT Engineer to use a Google font via a link:
+Here’s how to prompt Lovable to use a Google font via a link:
!!! example "Using Google Font by link"
Example prompt:
@@ -66,15 +66,15 @@ Here’s how to prompt GPT Engineer to use a Google font via a link:
Make sure to load the font using the useEffect React hook.
```
-By following these methods, you can customize the typography of your GPT Engineer project using either web-safe fonts or Google Fonts.
+By following these methods, you can customize the typography of your Lovable project using either web-safe fonts or Google Fonts.
## Further learning and examples
-To see these font integration methods in action, you can explore one of our example projects: [GPT Engineer using fonts example project](https://gptengineer.app/projects/your-project-link-here).
+To see these font integration methods in action, you can explore one of our example projects: [Lovable using fonts example project](https://gptengineer.app/projects/your-project-link-here).
In this project, you’ll find real prompts demonstrating how we applied different font styles, including web-safe fonts like Courier New and custom fonts from Google Fonts.
-
+
Additionally, for a more technical look at how fonts were integrated, check out this public repository: [GitHub: adding-fonts-example](https://github.com/viborc/adding-fonts-example). It includes the full implementation details, showcasing how various fonts were loaded and applied in the project.
diff --git a/src/tips-tricks/multiple-users.md b/src/tips-tricks/multiple-users.md
index 4071b87..2cfa472 100644
--- a/src/tips-tricks/multiple-users.md
+++ b/src/tips-tricks/multiple-users.md
@@ -1,6 +1,6 @@
# :busts_in_silhouette: Multiple users
-At this time, GPT Engineer doesn't fully support team plans or multiple users on the same project. We are actively considering this feature for future updates. However, we’ve noticed that some users have found a workaround for collaborating on the same project.
+At this time, Lovable doesn't fully support team plans or multiple users on the same project. We are actively considering this feature for future updates. However, we’ve noticed that some users have found a workaround for collaborating on the same project.
The workaround involves creating a single account (registering through the regular sign-up process) and then sharing the credentials for that account with the users you want to give access to.
@@ -14,8 +14,8 @@ This allows multiple people to log in and work on the same project (not at the s
!!! warning "Consider separate login credentials"
If you signed up using Google or GitHub sign-in, and you share those login details with others, you are also granting them access to your Google or GitHub account. This could expose sensitive personal information.
- A safer approach would be to create a separate email account specifically for GPT Engineer and share that account instead, to avoid giving access to unrelated services like your Gmail or GitHub repositories.
+ A safer approach would be to create a separate email account specifically for Lovable and share that account instead, to avoid giving access to unrelated services like your Gmail or GitHub repositories.
-Please note that this is not an officially supported feature of GPT Engineer but rather a workaround that we've observed users employing.
+Please note that this is not an officially supported feature of Lovable but rather a workaround that we've observed users employing.
We recommend considering the risks before proceeding with this method.
\ No newline at end of file
diff --git a/src/tips-tricks/prompting.md b/src/tips-tricks/prompting.md
index cf40465..2e35082 100644
--- a/src/tips-tricks/prompting.md
+++ b/src/tips-tricks/prompting.md
@@ -1,25 +1,25 @@
-# :sparkles: Prompting in GPT Engineer
+# :sparkles: Prompting in Lovable
-To help you make the most out of GPT Engineer, we compiled a list of prompting strategies and approaches. Some of these were collected from our team's experience, and others were shared with us by our community members.
+To help you make the most out of Lovable, we compiled a list of prompting strategies and approaches. Some of these were collected from our team's experience, and others were shared with us by our community members.
!!! info "What is prompting?"
- Prompting is the common term used for textual, natural language inputs used to interact with GPT Engineer. You can think of it as text messages containing instructions you are giving to GPT Engineer.
+ Prompting is the common term used for textual, natural language inputs used to interact with Lovable. You can think of it as text messages containing instructions you are giving to Lovable.
- Since GPT Engineer relies on large language models (LLMs), effective prompting strategies can have an impact on its efficiency.
+ Since Lovable relies on large language models (LLMs), effective prompting strategies can have an impact on its efficiency.
## Basics
-In GPT Engineer, prompts are the main way of interacting with our app. Be it from the start and welcome screen where you can preselect some of the existing prompts, type your own, or in the builder user interface where you are interacting using a chat-based interface, prompts are the backbone of your interactions.
+In Lovable, prompts are the main way of interacting with our app. Be it from the start and welcome screen where you can preselect some of the existing prompts, type your own, or in the builder user interface where you are interacting using a chat-based interface, prompts are the backbone of your interactions.
---
## Prompting strategies
-These strategies will often work combined, depending on your specific use cases. Feel free to experiment with them and see which ones give the best results. While GPT Engineer on its own can do a lot even from a very basic and generic prompt, using some of these strategies can help you achieve even better results.
+These strategies will often work combined, depending on your specific use cases. Feel free to experiment with them and see which ones give the best results. While Lovable on its own can do a lot even from a very basic and generic prompt, using some of these strategies can help you achieve even better results.
### Contextual prompting
-Providing context can help GPT Engineer understand the broader scope of your requirements. Before asking for specific tasks, you can set the stage with background information.
+Providing context can help Lovable understand the broader scope of your requirements. Before asking for specific tasks, you can set the stage with background information.
!!! example "Setting the context"
Example prompt:
@@ -43,7 +43,7 @@ So, instead of going with a prompt that would ask AI to "build a CRM app that in
### Using image prompts
-Recently we added support where users can upload images with their prompts and ask GPT Engineer to build a solution based on it.
+Recently we added support where users can upload images with their prompts and ask Lovable to build a solution based on it.
There are two main approaches here. The first one is a simple prompting approach.
diff --git a/src/tips-tricks/using-images.md b/src/tips-tricks/using-images.md
index 169a7dc..1ccd6fb 100644
--- a/src/tips-tricks/using-images.md
+++ b/src/tips-tricks/using-images.md
@@ -2,7 +2,7 @@
To add images you can do one of two things:
-1. Upload it to the github repository manually, outside of the GPT Engineer UI
+1. Upload it to the github repository manually, outside of the Lovable UI
2. Share an external image URL in the chat.
a. **Note**: This will not work if the server hosting the URL has chosen to block external websites from using it with "CORS"
@@ -10,7 +10,7 @@ To add images you can do one of two things:
Below, we’ll walk you through the two methods.
!!! info "Image placeholders"
- By default, if GPT Engineer recognizes the need to use images in your projects, it will use placeholder images - gray, neutral images to improve user experience and orientation.
+ By default, if Lovable recognizes the need to use images in your projects, it will use placeholder images - gray, neutral images to improve user experience and orientation.
Using the techniques described below, you can replace those placeholder images with more relevant, and centextually meaningful images.
@@ -18,10 +18,10 @@ Below, we’ll walk you through the two methods.
One way to add images to your project is by referencing an image from an external URL. This method allows you to use images hosted on external platforms like Unsplash, Imgur, or any other image-hosting service. Be mindful of use copyrights!
-Here’s how to prompt GPT Engineer to use an external image:
+Here’s how to prompt Lovable to use an external image:
- First, find the image you want to use. For example, you can visit a site like Unsplash, select an image, and copy its URL.
-- In your project prompt, simply tell GPT Engineer to use that image by specifying the URL. For example:
+- In your project prompt, simply tell Lovable to use that image by specifying the URL. For example:
!!! example "Using externally hosted images"
Example prompt:
@@ -39,7 +39,7 @@ Here’s how to prompt GPT Engineer to use an external image:
## Using images from your GitHub `public` directory
-Another method to add images to your GPT Engineer project is by using images uploaded to the `public` directory of your connected GitHub repository. Here’s how you can do it:
+Another method to add images to your Lovable project is by using images uploaded to the `public` directory of your connected GitHub repository. Here’s how you can do it:
**Connect your GitHub repository** - Ensure your project is connected to your GitHub repo. [Here's how to connect your repo](/features/git-integration).
@@ -62,11 +62,11 @@ Click on **Add file** and then from a dropdown, select **Upload files** option.
**Commit the changes** - After selecting your image, write a simple commit message (e.g., "Adding image files to be used in the app") and click **"Commit changes"** to save the file to your repo.
-**Get the image path** - Once the file is uploaded, select it and then click on the copy icon :octicons-copy-16: next to the file name to copy the image’s path. This path will be used in your GPT Engineer prompt.
+**Get the image path** - Once the file is uploaded, select it and then click on the copy icon :octicons-copy-16: next to the file name to copy the image’s path. This path will be used in your Lovable prompt.
-**Use the image in GPT Engineer** - You can now reference this image in your project by using a prompt like the following:
+**Use the image in Lovable** - You can now reference this image in your project by using a prompt like the following:
!!! example "Using image from `public` folder"
Example prompt:
@@ -80,7 +80,7 @@ Click on **Add file** and then from a dropdown, select **Upload files** option.
!!! info "Be mindful of image file sizes"
- Uploading large images to your GitHub repo can cause it to grow in size, which can affect GPT Engineer performance (longer repo cloning times, slower startup of previews/sandbox).
+ Uploading large images to your GitHub repo can cause it to grow in size, which can affect Lovable performance (longer repo cloning times, slower startup of previews/sandbox).
Try to optimize your images before uploading them to your `public` folder by compressing them and using dimensions that are relevant to your use case. For example, don't use a full HD-sized image if it will only be displayed as a small icon.
@@ -94,9 +94,9 @@ Click on **Add file** and then from a dropdown, select **Upload files** option.
The third method to add images is by using **Base64 encoding**. While this is an option, we don't recommend it, as it converts the image into a long textual string that can consume a significant portion of your project's context. However, if you wish to use Base64 encoding, follow these steps:
-1. Upload your image to a [GPT Engineer-built project by one of our community members](https://base64-image-magic.gptengineer.run/). Thanks, ntindle!
+1. Upload your image to a [Lovable-built project by one of our community members](https://base64-image-magic.gptengineer.run/). Thanks, ntindle!
2. Once the image is uploaded, the app will generate a Base64-encoded string for your image.
-3. Copy the Base64 string and use it in GPT Engineer by using a prompt like this:
+3. Copy the Base64 string and use it in Lovable by using a prompt like this:
!!! example "Using Base64 encoded images"
Example prompt:
@@ -113,7 +113,7 @@ The third method to add images is by using **Base64 encoding**. While this is an
Keep in mind that this is a real Base64 encoding, so you can use it as an example prompt.
## Explore more and learn from examples
-To help you better understand how to integrate images using the methods outlined above, we have a project you can explore: [GPT Engineer Project Example](https://gptengineer.app/projects/e823fedf-238d-4313-86a8-1fd4bfc2a9ba). In this project, you can see the actual prompts and how each method works in practice.
+To help you better understand how to integrate images using the methods outlined above, we have a project you can explore: [Lovable Project Example](https://gptengineer.app/projects/e823fedf-238d-4313-86a8-1fd4bfc2a9ba). In this project, you can see the actual prompts and how each method works in practice.
Additionally, here's a public GitHub repository that includes the commits, uploaded images, and full implementation details. You can view the repository here: [GitHub: Adding Images Example](https://github.com/viborc/adding-images-example).
diff --git a/src/tips-tricks/using-videos.md b/src/tips-tricks/using-videos.md
index cda8d91..5f4bac9 100644
--- a/src/tips-tricks/using-videos.md
+++ b/src/tips-tricks/using-videos.md
@@ -1,11 +1,11 @@
# :clapper: Using videos
-GPT Engineer offers two methods for embedding videos into your projects: by linking to an external video (such as YouTube) or by using videos uploaded to the public folder in your GitHub repository. Below, we’ll cover both options step by step.
+Lovable offers two methods for embedding videos into your projects: by linking to an external video (such as YouTube) or by using videos uploaded to the public folder in your GitHub repository. Below, we’ll cover both options step by step.
## Linking to an external video
-The simplest and the recommended way to incorporate a video is by linking to one hosted externally, like on YouTube. To instruct GPT Engineer to use an external video, follow these steps:
+The simplest and the recommended way to incorporate a video is by linking to one hosted externally, like on YouTube. To instruct Lovable to use an external video, follow these steps:
- Locate the video you want to embed (e.g., on YouTube) and copy its URL.
- In your project prompt, specify where you want the video and include the URL. Here’s how to do it.
@@ -26,7 +26,7 @@ The simplest and the recommended way to incorporate a video is by linking to one
## Using a video from your GitHub public folder
!!! warning "Large videos should not be hosted in your `public` folder"
- Uploading large videos to your GitHub repo can cause it to grow in size, which can affect GPT Engineer performance (longer repo cloning times, slower startup of previews/sandbox).
+ Uploading large videos to your GitHub repo can cause it to grow in size, which can affect Lovable performance (longer repo cloning times, slower startup of previews/sandbox).
A better option is to use hosted services (like YouTube) or file storage options like S3, essentially giving you a URL that you can reference, as described in the previous steps.
@@ -49,7 +49,7 @@ You can upload videos to your project’s GitHub repository and reference them d
-**Reference the video in GPT Engineer** - Now, you can embed the video by specifying the file path in your prompt. For example, you can use a prompt like this one:
+**Reference the video in Lovable** - Now, you can embed the video by specifying the file path in your prompt. For example, you can use a prompt like this one:
!!! example "Using a video from public folder"
Example prompt:
@@ -68,7 +68,7 @@ Ensure you use the exact file path you copied earlier.
## Further learning and examples
-To see these methods in action, explore one of the example projects: [GPT Engineer using videos example project](https://gptengineer.app/projects/380835ab-c8d7-4f45-9b0d-51ec04294457). You’ll find real prompts demonstrating how videos are integrated using both methods.
+To see these methods in action, explore one of the example projects: [Lovable using videos example project](https://gptengineer.app/projects/380835ab-c8d7-4f45-9b0d-51ec04294457). You’ll find real prompts demonstrating how videos are integrated using both methods.
Additionally, for a more technical look at the video adding process, check out this public repository: [GitHub: Video Upload Example](https://github.com/viborc/adding-videos-example). It includes the video upload and the implementation details used in the project.
+