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 at addresszen.com/signup 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?​