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 Finder 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​

UK and international address autocomplete on any address form, powered by the Address Finder widget. For UK-only postcode → address dropdowns, use Postcode Lookup instead.

1. Get an API key​

2. Add the key to .env​

Pick the variable name your framework exposes to the browser:

  • Vite + React (Bolt default): VITE_IDEAL_POSTCODES_API_KEY
  • Next.js: NEXT_PUBLIC_IDEAL_POSTCODES_API_KEY
  • Astro: PUBLIC_IDEAL_POSTCODES_API_KEY

Add it to .env in the file tree, or ask Bolt: "Add VITE_IDEAL_POSTCODES_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 UK and international address autocomplete to the billing form using
@ideal-postcodes/address-finder.

- Install the npm package and import its CSS.
- In a useEffect, call AddressFinder.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_IDEAL_POSTCODES_API_KEY
  (or process.env.NEXT_PUBLIC_IDEAL_POSTCODES_API_KEY for Next.js).
- Reference docs: https://docs.ideal-postcodes.co.uk/docs/address-finder.md

Name the package explicitly — Bolt will not pick @ideal-postcodes/address-finder 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?​