# Lovable

Lovable builds web apps from a chat prompt. You'll add the AddressZen Address Lookup with our [React component](/docs/address-lookup/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 [AddressZen Address Lookup](/docs/address-lookup.md) on any address form, via its [React component](/docs/address-lookup/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 at addresszen.com/signup](https://addresszen.com/signup) 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%20AddressZen%20Address%20Lookup%20before%20wiring%20anything%20up.%20For%20each%20form%20I%20confirm%2C%20add%20autocomplete%20using%20the%20%40addresszen%2Freact%20component%3A%20install%20the%20%40addresszen%2Freact%20package%2C%20render%20its%20%3CAddressLookup%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%20AddressZen%20key%20as%20VITE_ADDRESSZEN_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.addresszen.com%2Fdocs%2Faddress-lookup%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 AddressZen Address Lookup before

wiring anything up.



For each form I confirm, add autocomplete using the @addresszen/react

component:



- Install the @addresszen/react package.

- Render its <AddressLookup> 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 AddressZen key as

  VITE_ADDRESSZEN_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.addresszen.com/docs/address-lookup/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).

## Prefer to keep the key server-side?[​](#prefer-to-keep-the-key-server-side "Direct link to 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.addresszen.com/v1/autocomplete/addresses with the

ADDRESSZEN_API_KEY secret, and returns suggestions to the frontend. The

frontend should not import @addresszen/address-lookup directly —

instead build a simple autocomplete that hits the Edge Function.
```

Store the key as `ADDRESSZEN_API_KEY` (no `VITE_` prefix) so it stays server-side. The Edge Function reads it via `Deno.env.get("ADDRESSZEN_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[​](#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://addresszen.com/account).
* **`process.env.VITE_ADDRESSZEN_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_ADDRESSZEN_API_KEY`."*
* **The agent stored `ADDRESSZEN_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_ADDRESSZEN_API_KEY`.
* **CORS error in the browser console:** check the request URL — the widget should hit `api.addresszen.com`. If Lovable proxied it incorrectly, ask: *"Call api.addresszen.com directly from the browser. Don't proxy through Supabase."*

## Need help?[​](#need-help "Direct link to Need help?")

* File an issue: [github.com/addresszen/feedback](https://github.com/addresszen/feedback/issues)
* Email: <support@addresszen.com>