# v0

v0 generates Next.js App Router apps with shadcn/ui and Tailwind, deploys to Vercel, and stores secrets as Vercel project environment variables. v0 will not reach for `@ideal-postcodes/address-finder` unless you name it in the prompt — without an explicit mention it tends to roll its own postcode regex or wire up Google Places.

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

UK and international address autocomplete on any address form, powered by the [Address Finder](/docs/address-finder.md) widget. For UK-only postcode → address dropdowns, use [Postcode Lookup](/docs/postcode-lookup.md) instead.

## 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. Store the key in v0[​](#2-store-the-key-in-v0 "Direct link to 2. Store the key in v0")

The widget calls our API from the browser, so the key needs the `NEXT_PUBLIC_` prefix to be readable from client code.

In your v0 chat:

1. Open the **Vars** (environment variables) panel — bottom-left in chat view, or **Project Settings** → **Environment Variables** in the Vercel dashboard. v0 syncs both surfaces.
2. Add `NEXT_PUBLIC_IDEAL_POSTCODES_API_KEY` with your `ak_…` value.
3. Save. The next generation and preview will pick it up.

Don't ship `ak_test` to production. Set the live key as a Production-scoped variable and the test key as Preview/Development if you want them separated.

## 3. Starter prompt[​](#3-starter-prompt "Direct link to 3. Starter prompt")

Open v0 with this prompt pre-filled:

[**Open in v0 →**](https://v0.app/chat?q=Add+UK+and+international+address+autocomplete+to+the+billing+form+using+the+%40ideal-postcodes%2Faddress-finder+npm+package.+Install+it%2C+mount+AddressFinder.setup%28%29+on+the+address+line+1+input+as+a+client+component%2C+populate+the+other+address+fields+from+the+onAddressRetrieved+callback%2C+and+keep+the+shadcn%2Fui+form+styling.+Read+the+API+key+from+the+NEXT_PUBLIC_IDEAL_POSTCODES_API_KEY+environment+variable.+Reference+docs%3A+https%3A%2F%2Fdocs.ideal-postcodes.co.uk%2Fdocs%2Faddress-finder.md)

Or paste manually:

```
Add UK and international address autocomplete to the billing form using

the @ideal-postcodes/address-finder npm package.



- Install the package and mount AddressFinder.setup() on the address line 1

  input inside a Client Component ("use client"). Keep the shadcn/ui form

  styling and react-hook-form state intact.

- Populate the other address fields from the onAddressRetrieved callback.

- Read the API key from the NEXT_PUBLIC_IDEAL_POSTCODES_API_KEY env var.

- Reference docs: https://docs.ideal-postcodes.co.uk/docs/address-finder.md
```

## 4. Lock down the key[​](#4-lock-down-the-key "Direct link to 4. Lock down the key")

A `NEXT_PUBLIC_` key is visible to anyone viewing the deployed site. [Allowed URLs](/docs/guides/allowed-urls.md) is what stops it being reused elsewhere — set this *before* you share the preview URL.

In your key's **Allowed URLs** at [ideal-postcodes.co.uk/account](https://ideal-postcodes.co.uk/account), add:

* `*.<your-team-or-user>.vercel.app` — covers every preview deployment v0 mints. Vercel rotates preview hostnames on each push (`myapp-abc123-yourteam.vercel.app`), and individual preview hostnames cannot be wildcarded — only the team-scoped wildcard works ([Vercel CORS guidance](https://vercel.com/kb/guide/how-to-enable-cors)).
* Your production custom domain, e.g. `yourshop.com` or `*.yourshop.com`.

If you'd rather not whitelist `*.<team>.vercel.app` (it allows any project in that Vercel team to use the key), enable a [Vercel Preview Deployment Suffix](https://vercel.com/docs/deployments/preview-deployment-suffix) so previews resolve under `*.preview.yourshop.com` and whitelist that wildcard instead.

## 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>