Skip to main content

Lovable

Lovable builds web apps from a chat prompt. You'll add the Ideal Postcodes Address Finder with our React component, and give Lovable your API key through its built-in Add API Key button.

What you'll add​

The Ideal Postcodes Address Finder on any address form, via its React component.

1. Get an API key​

2. Starter prompt​

Open Lovable with this prompt pre-filled:

Open in Lovable →

Or paste manually:

Find every address form in this app and list them, then ask me to
confirm which ones should get the Ideal Postcodes Address Finder
before wiring anything up.

For each form I confirm, add autocomplete using the
@ideal-postcodes/react component:

- Install the @ideal-postcodes/react package.
- Render its <AddressFinder> component on that form. Read the selected
  address from the onAddressRetrieved callback and update the form's
  state.
- 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. Pass it as the component's apiKey prop.
- Reference docs:
  https://docs.ideal-postcodes.co.uk/docs/address-finder/react.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 your API Key​

  1. When you're ready to go live, apply the appropriate Allow URLs setting to your key.
  2. Add the origins your app runs on, e.g. *.lovable.app (preview) and *.yourdomain.com (production).

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 API requests."

Need help?​