Skip to main content

Lovable

Lovable generates React + Vite apps backed by Lovable Cloud (Supabase). The Address Finder widget runs in the browser — give Lovable your API key via its built-in Add API Key modal, then restrict the key to your deployed domain.

What you'll add​

UK and international address autocomplete on any address form, powered by the Address Finder widget. For UK-only postcode → address dropdowns, use Postcode Lookup instead.

1. Get an API key​

2. Starter prompt​

Open Lovable with this prompt pre-filled:

Open in Lovable →

Or paste manually:

Add UK and international address autocomplete to the billing form using
the @ideal-postcodes/address-finder npm package.

- Install the package.
- Mount AddressFinder.setup() on the address line 1 input. Populate
  line 2, city, postcode and county from the suggestion callback.
- Use Lovable's "Add API Key" feature to store my Ideal Postcodes key
  as VITE_IDEAL_POSTCODES_API_KEY — the widget runs in the browser, so
  the VITE_ prefix is required for it to reach client code via
  import.meta.env.
- Reference docs:
  https://docs.ideal-postcodes.co.uk/docs/address-finder.md
  https://docs.ideal-postcodes.co.uk/docs/address-finder/configure.md

Lovable installs the package, generates the form, then pops up the Add API Key modal asking for your key value. Paste it there — not into the chat — and Lovable stores it as a secret in your project (Cloud → Secrets).

3. Lock down the key (required before going live)​

The widget calls our API from the browser, so the key is visible to anyone who views your deployed site. Restrict it to your origin:

  1. After Lovable deploys, copy the preview URL (e.g. your-app.lovable.app).
  2. In your Ideal Postcodes dashboard, open the key's settings.
  3. Add your-app.lovable.app and your custom production domain (if any) to Allowed URLs.
  4. If * is present, remove it — that's the default-permissive setting and accepts requests from any origin.

Skip this step and a casual visitor can lift the key from your site's network tab and burn your quota elsewhere.

Prefer to keep the key server-side?​

For higher-security setups, ask Lovable to proxy the lookup through a Supabase Edge Function:

Move the address autocomplete calls behind a Supabase Edge Function.
The function accepts a search query, calls
https://api.ideal-postcodes.co.uk/v1/autocomplete/addresses with the
IDEAL_POSTCODES_API_KEY secret, and returns suggestions to the
frontend. The frontend should not import @ideal-postcodes/address-finder
directly — instead build a simple autocomplete that hits the Edge
Function.

Store the key as IDEAL_POSTCODES_API_KEY (no VITE_ prefix) so it stays server-side. The Edge Function reads it via Deno.env.get("IDEAL_POSTCODES_API_KEY"). Allowed URLs is then optional since the key never reaches the browser. Trade-off: you lose the polished suggestion UI the widget provides.

Troubleshooting​

  • 401 Unauthorized after deploy: your *.lovable.app subdomain isn't on the key's Allowed URLs list. Add it in the dashboard.
  • process.env.VITE_IDEAL_POSTCODES_API_KEY is undefined: Vite exposes client env vars on import.meta.env, not process.env. Tell Lovable: "Read the key from import.meta.env.VITE_IDEAL_POSTCODES_API_KEY."
  • The agent stored IDEAL_POSTCODES_API_KEY (no VITE_ prefix) and the widget can't see it: the prefix is what makes Vite bundle the variable into the client. Rename the secret in Cloud → Secrets, or ask the agent to recreate it with VITE_IDEAL_POSTCODES_API_KEY.
  • CORS error in the browser console: check the request URL — the widget should hit api.ideal-postcodes.co.uk. If Lovable proxied it incorrectly, ask: "Call api.ideal-postcodes.co.uk directly from the browser. Don't proxy through Supabase."

Need help?​