Skip to main content

Lovable

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

What you'll add​

The AddressZen Address Lookup on any address form, via its React component.

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 for a free trial balance.

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 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​

  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).

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​

  • 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_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?​