Skip to main content

Bolt

Bolt builds web apps from a chat prompt. You'll add the AddressZen Address Lookup with our React component. Your API key goes in the app's environment settings so the address field can use 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. Add the key to .env​

Pick the variable name your framework exposes to the browser:

  • Vite + React (Bolt default): VITE_ADDRESSZEN_API_KEY
  • Next.js: NEXT_PUBLIC_ADDRESSZEN_API_KEY
  • Astro: PUBLIC_ADDRESSZEN_API_KEY

Add it to .env in the file tree, or ask Bolt: "Add VITE_ADDRESSZEN_API_KEY=ak_xxx to .env."

If you deploy through Netlify rather than Bolt Cloud, re-enter the variable in Netlify → Site settings → Environment variables — Bolt-side secrets do not always carry over when you claim the site.

3. Starter prompt​

Open Bolt with this prompt pre-filled:

Open in Bolt →

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.
- Read the API key from import.meta.env.VITE_ADDRESSZEN_API_KEY and pass
  it as the component's apiKey prop.
- Reference docs: https://docs.addresszen.com/docs/address-lookup/react.md

Name the package explicitly — Bolt will not pick @addresszen/react from a vague prompt and will tend to scaffold a plain JSX field instead.

4. 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. localhost, *.bolt.new (preview), and *.netlify.app or *.yourdomain.com (production).

Need help?​