Skip to main content

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​

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

Open v0 with this prompt pre-filled:

Open in v0 →

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​

A NEXT_PUBLIC_ key is visible to anyone viewing the deployed site. Allowed URLs 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, 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).
  • 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 so previews resolve under *.preview.yourshop.com and whitelist that wildcard instead.

Need help?​