Skip to main content

Replit

Replit Agent builds web apps from a chat prompt. You'll add the AddressZen Address Lookup with our React component, and store your API key in Replit's Secrets when Agent asks for it.

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 Replit Agent 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 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.
- Read the API key from a Repl Secret named ADDRESSZEN_API_KEY and pass
  it as the apiKey prop. If the app uses Vite, expose it as
  VITE_ADDRESSZEN_API_KEY and read via import.meta.env. Prompt me for
  the value if it isn't set.
- Reference docs: https://docs.addresszen.com/docs/address-lookup/react.md

For multi-turn projects, add a one-liner to replit.md (the file Agent reads on every turn) so it stays on the SDK:

AddressZen Address Lookup: @addresszen/react, docs at
https://docs.addresszen.com/docs/address-lookup/react.md

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. *.replit.dev (workspace preview), *.replit.app (deployments), and *.yourdomain.com (production).

Troubleshooting​

  • 403 allowed_url_mismatch in the workspace preview — add *.replit.dev to Allowed URLs.
  • Suggestions never appear and the network tab shows no calls — the key isn't reaching the browser. In a Vite app, rename the Secret to VITE_ADDRESSZEN_API_KEY and reference it via import.meta.env.VITE_ADDRESSZEN_API_KEY.
  • Server errors land in the Console pane, browser errors in the Preview's DevTools — if Agent is "fixing" the wrong layer, check the other pane and paste the real error back into chat.

Need help?​