Skip to main content

Bolt

Bolt scaffolds full-stack JavaScript apps from a chat prompt — Vite + React + TypeScript by default, with optional Next.js, Astro and others. Address Lookup runs in the browser, so the API key needs to reach the client bundle via a framework-prefixed .env variable. Bolt's separate Secrets panel (database icon → Secrets) is for server-only edge functions and will not reach the widget.

What you'll add​

International address autocomplete on any address form, powered by the Address Lookup widget.

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:

Add international address autocomplete to the billing form using
@addresszen/address-lookup.

- Install the npm package and import its CSS.
- In a useEffect, call AddressLookup.setup() against the address line 1
  input. Use outputFields to populate line 2, city and postcode from the
  selected address.
- Read the API key from import.meta.env.VITE_ADDRESSZEN_API_KEY.
- Reference docs: https://docs.addresszen.com/docs/address-lookup.md

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

4. Allow the preview origin (avoid CORS)​

The widget calls our API from the browser. Without Allowed URLs the request fails with a CORS error in the preview console. Add every origin Bolt previews and deploys from:

  • localhost — local sandbox
  • *.webcontainer.io, *.stackblitz.io — in-browser preview
  • *.bolt.new — shared Bolt preview links
  • *.netlify.app (or your custom domain) — deployed site

This is also what stops your key being scraped from the public bundle and reused elsewhere — Allowed URLs is the defence, not key secrecy.

Need help?​