# Bolt

Bolt builds web apps from a chat prompt. You'll add the Ideal Postcodes Address Finder with our [React component](/docs/address-finder/react.md). Your API key goes in the app's environment settings so the address field can use it.

## What you'll add[​](#what-youll-add "Direct link to What you'll add")

The [Ideal Postcodes Address Finder](/docs/address-finder.md) on any address form, via its [React component](/docs/address-finder/react.md).

## 1. Get an API key[​](#1-get-an-api-key "Direct link to 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 ideal-postcodes.co.uk/signup](https://ideal-postcodes.co.uk/signup) for a free trial balance.

## 2. Add the key to `.env`[​](#2-add-the-key-to-env "Direct link to 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[​](#3-starter-prompt "Direct link to 3. Starter prompt")

Open Bolt with this prompt pre-filled:

[**Open in Bolt →**](https://bolt.new/?prompt=Find+every+address+form+in+this+app+and+list+them%2C+then+ask+me+to+confirm+which+ones+should+get+the+Ideal+Postcodes+Address+Finder+before+wiring+anything+up.+For+each+form+I+confirm%2C+add+autocomplete+using+the+%40ideal-postcodes%2Freact+component%3A+install+the+%40ideal-postcodes%2Freact+package%2C+render+its+%3CAddressFinder%3E+component+on+that+form%2C+and+update+the+form's+state+from+the+onAddressRetrieved+callback.+Read+the+API+key+from+import.meta.env.VITE_IDEAL_POSTCODES_API_KEY+and+pass+it+as+the+apiKey+prop.+Reference+docs%3A+https%3A%2F%2Fdocs.ideal-postcodes.co.uk%2Fdocs%2Faddress-finder%2Freact.md)

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[​](#4-lock-down-your-api-key "Direct link to 4. Lock down your API Key")

1. When you're ready to go live, apply the appropriate [Allow URLs](/docs/guides/api-key-secure.md#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?[​](#need-help "Direct link to Need help?")

* File an issue: [github.com/ideal-postcodes/feedback](https://github.com/ideal-postcodes/feedback/issues)
* Email: <support@ideal-postcodes.co.uk>