Skip to main content

Leap.new

Leap.new builds web apps from a chat prompt and saves them to a GitHub repository you can keep working on. You'll add the AddressZen Address Lookup with our React component.

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​

Paste this into the Leap.new chat:

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 @addresszen/react:

- 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, triggering its change handlers so validation re-runs.
- Pass ADDRESSZEN_API_KEY to the component's apiKey prop. The widget
  runs in the browser, so expose the value to the frontend — the
  simplest pattern is a tiny Encore API endpoint that reads
  secret("ADDRESSZEN_API_KEY") and returns it to the frontend on mount.
  Render <AddressLookup> only once the key has arrived.
- Reference docs: https://docs.addresszen.com/docs/address-lookup/react.md

When the agent wires this up it will prompt you for ADDRESSZEN_API_KEY in chat — paste your ak_… value when asked.

3. Lock down the 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. localhost (development), your Encore Cloud URLs, and *.yourdomain.com (production).

Need help?​