Skip to main content

Bolt

Bolt builds web apps from a chat prompt. You'll add the Ideal Postcodes Address Finder 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 Ideal Postcodes Address Finder on any address form, via its React component.

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:

Find every address form in this app and list them, then ask me to
confirm which ones should get the Ideal Postcodes Address Finder
before wiring anything up.

For each form I confirm, add autocomplete using the
@ideal-postcodes/react component:

- Install the @ideal-postcodes/react package.
- Render its <AddressFinder> 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_IDEAL_POSTCODES_API_KEY and
  pass it as the component's apiKey prop.
- Reference docs: https://docs.ideal-postcodes.co.uk/docs/address-finder/react.md

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