The lovable one-shot prompt challenge.

Recently, I took on the challenge of building a waitlist page using AI coding tool Lovable. I wanted to build a Waitlist page, integrated with SensorPro, in a one shot prompt. In this post, I’ll walk you through the process, the challenges, and the one neat trick that made it all come together.

The Challenge: One-Shot Prompt

Anyone who’s worked with Lovable knows that getting it to produce a fully functional page in one go can be tricky especially when integrating with an API. The goal was to generate a Waitlist page without having to manually patch things together later.

I've worked on several Lovable projects (like this and this) and I've learned that having clear rules and defined steps is essential. I've observed that including tags in the instructions stops the app from making things up. When it fabricates information—especially regarding an API endpoint or a Supabase edge secret—it becomes really challenging to get it back on track.

To make this happen, I gave Lovable a detailed set of rules and step-by-step instructions, and let it build the page with minimal manual intervention. You can see the full rules at the end of this post, but here is a sample for the impatient:

<instruction>
Create a waitlist page using <rules> and <steps>
</instruction>
<rules>
Rule 1 Do NOT modify the secret names or their case in any way.
Rule 2 DO not delete code without asking first
Rule 3 Never make assumptions about API structures, endpoints, or configurations.
etc
</rules>
<steps>
Step 1. Connect project to Supabase, no tables are required. We only use Supabase to store edge secrets for the API keys and an edge function to retrieve them.
Step 2.
etc
</steps>

The waitlist page was indeed generated in one-shot, in less than 5mins. It never had to go back and edit code, which is just perfect. Here is the live form below, it will subscribe you to our Sensorpro newsletter.

Setting the Ground Rules

Before diving into the technical details, it was important to set some strict guidelines for Lovable to follow. Using XML-like tags, I specified about a dozen absolute rules. For example:

• Do not delete code without asking first: This ensures that every piece of generated code is preserved unless explicitly modified.
• Never refactor or make things up: Particularly crucial for API endpoints, where guessing means it just won't work.

These rules formed the backbone of the prompt and helped keep Lovable on track throughout the process. The full prompt is at the end of this post, go ahead an steal it.

Step-by-Step Instructions

Once the rules were in place, I defined a series of steps for Lovable to execute. Here’s a breakdown of the process:

1. Connect the Project to Supabase:
   The first instruction was to link our project to Supabase. Although Lovable kicked off the process, it required a manual confirmation to complete the connection. Once I confirmed the connection, lovable stops so I had to type Continue so that it would move on to the next steps.
2. Configure API Keys:
   Next, Lovable needed to integrate our API keys. This included: Retrieving the Rapid API key, where our API credentials are stored.Fetching the SensorPro API key specifically used for adding a contact.After I provided these keys, the system was ready to integrate the waitlist functionality.
3. Generate the Waitlist Form:
   With the integrations in place, Lovable generated a clean, centered form designed for the waitlist. The form’s design was simple yet effective—providing a smooth user experience for newsletter sign-ups.
4. Verify Every Step:
   The final instruction was to “check every step” to ensure that all the guidelines and integrations were followed correctly. Although Lovable stopped at certain points (awaiting manual confirmation), a simple “continue” command nudged it to complete the process.

Testing the Waitlist Page

After the code was generated, it was time for a real-world test:

1. Connecting to SensorPro:
   I navigated to my SensorPro account and verified that the contact list was initially empty.
2. Subscribing to the Waitlist
   I entered a test email address lovable@domain.cominto the waitlist form and clicked subscribe. Immediately, a toast prompt thanked the user for subscribing.
3. Verifying Contact Addition:
   Refreshing my SensorPro account, I saw that the test email had been added successfully.  Optionally, a welcome email can also be configured to send out automatically.

Final Thoughts

We tried the one-shot prompt without XML tags and it did not work well. For example it would reinvent the API endpoint or Supabase edge secret. Once that happens Lovable gets into a tangle that is hard to undo. 

Watch the full process on video.

Well done, Lovable!

Full prompt

Lovable prompt: 
<rules>
These are absolute rules, there are NO exceptions or special cases that allow deviation.
Rule 1 Do NOT modify the secret names or their case in any way.
Rule 2 DO not delete code without asking first
Rule 3 Never ask to refactor
Rule 4 If unsure about something, ask for clarification rather than guessing.
Rule 5 DO not make things up
Rule 6 When given a url as an API endpoint, always use exactly without modification.
Rule 7 When given a edge secret, always use exactly without modification.
Rule 9 do not skip steps
Rule 10 Never make assumptions about API structures, endpoints, or configurations.
Rule 11 Any deviation from these rules, even if it seems helpful, is a violation.
RUle 12 If something is not explicitly provided, it is missing and must be requested.
Rule 13 All values provided (URLs, secrets, endpoints, etc.) must be used exactly as given, character for character.
RUle 14 No modifications are allowed, even for apparent typos or case mismatches.
RUle 15 If any required information is missing, STOP and request it.

Rule 16 Do not proceed with partial or assumed information.
</rules>


<steps>
Step 1. Connect project to Supabase, no tables are required. We only use Supabase to store edge secrets for the API keys and an edge function to retrieve them.

Step 2. AFter connecting to Supabase, continue with the next step.
DO not deviate or make anything up. Note: If the chat stops, type "Continue"

Step 3 Get your RapidAPI API key and store in an edge secret RAPID_API_KEY
Do not deviate from this name and case sensitivity

Step 4 Get your SensorPro Webhook key from your acccount on e.sensorpro.net
and store in edge secret sensorpro-api
Do not deviate from this name and case sensitivity

Step 5 Use Rapidapi URL for the api call, example curl code:
curl --request GET
--url 'https://sensorpro.p.rapidapi.com/sendmail.php?key=sensorpro_api&email=info@domain.com&id=00000000-0000-0000-0000-000000000000'
--header 'x-rapidapi-host: sensorpro.p.rapidapi.com'
--header 'x-rapidapi-key: RAPID_API_KEY'

Do not deviate from or alter the URL endpoint in any way other than to pass the correct parameters as follow: 
key=sensorpro-api
email=from the form
id=leave as default
RAPID_API_KEY= Your API key from RapidAPI

Do not adjust or rename these keys, use them exactly as shown

Step 6 Create an edge function to get the secrets, name it the same as the project.
DO not deviate from this. Make sure the JWT Tokens is off for the edge function.

Step 7 Create clean, centered form with:
   - Email input field
   - Submit button
   - Loading state while submitting
   - Success/error notifications using toast messages
   - Use Tailwind for UI
   - Use shadcdn for toast

Step 8 Verify that each step 1 to 7 was carried out exactly as asked and according to the <rules>

</steps>

Links

lovable sensorpro rapidapi npm sensorpro video signup-form