# Lovable

Lovable builds web apps from a chat prompt. You'll add the Ideal Postcodes Address Finder with our [React component](/docs/address-finder/react.md), and give Lovable your API key through its built-in **Add API Key** button.

## What you'll add[​](#what-youll-add "Direct link to What you'll add")

The [Ideal Postcodes Address Finder](/docs/address-finder.md) on any address form, via its [React component](/docs/address-finder/react.md).

## 1. Get an API key[​](#1-get-an-api-key "Direct link to 1. Get an API key")

* Quick test: paste `ak_test` as your key. Capped at 5 lookups/day. Will break in production.
* Real key: [sign up](https://account.ideal-postcodes.co.uk/users/sign_up) for a free trial balance.

## 2. Starter prompt[​](#2-starter-prompt "Direct link to 2. Starter prompt")

Open Lovable with this prompt pre-filled:

[**Open in Lovable →**](https://lovable.dev/?autosubmit=true#prompt=Find%20every%20address%20form%20in%20this%20app%20and%20list%20them%2C%20then%20ask%20me%20to%20confirm%20which%20ones%20should%20get%20the%20Ideal%20Postcodes%20Address%20Finder%20before%20wiring%20anything%20up.%20For%20each%20form%20I%20confirm%2C%20add%20autocomplete%20using%20the%20%40ideal-postcodes%2Freact%20component%3A%20install%20the%20%40ideal-postcodes%2Freact%20package%2C%20render%20its%20%3CAddressFinder%3E%20component%20on%20that%20form%2C%20and%20update%20the%20form's%20state%20from%20the%20onAddressRetrieved%20callback.%20Use%20Lovable's%20Add%20API%20Key%20feature%20to%20store%20my%20Ideal%20Postcodes%20key%20as%20VITE_IDEAL_POSTCODES_API_KEY%20%28the%20widget%20runs%20in%20the%20browser%2C%20so%20the%20VITE_%20prefix%20is%20required%20for%20import.meta.env%29%20and%20pass%20it%20as%20the%20apiKey%20prop.%20Reference%20docs%3A%20https%3A%2F%2Fdocs.ideal-postcodes.co.uk%2Fdocs%2Faddress-finder%2Freact.md)

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[​](#3-lock-down-your-api-key "Direct link to 3. Lock down your API Key")

1. When you're ready to go live, apply the appropriate [Allow URLs](/docs/guides/api-key-secure.md#allow-urls) setting to your key.
2. Add the origins your app runs on, e.g. `*.lovable.app` (preview) and `*.yourdomain.com` (production).

## Troubleshooting[​](#troubleshooting "Direct link to Troubleshooting")

* **`401 Unauthorized` after deploy:** your `*.lovable.app` subdomain isn't on the key's Allowed URLs list. Add it in the [dashboard](https://ideal-postcodes.co.uk/account).
* **`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?[​](#need-help "Direct link to Need help?")

* File an issue: [github.com/ideal-postcodes/feedback](https://github.com/ideal-postcodes/feedback/issues)
* Email: <support@ideal-postcodes.co.uk>