v0

v0 builds web apps from a chat prompt and deploys them to Vercel. You'll add the Ideal Postcodes Address Finder with our React component. Name the component in your prompt, or v0 will build its own address field instead.

What you'll add

The Ideal Postcodes Address Finder on any address form, via its React component.

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 for a free trial balance.

2. Starter prompt

The prompt reads the key from NEXT_PUBLIC_IDEAL_POSTCODES_API_KEY. v0 detects the missing variable and prompts you to paste your ak_… value — no manual setup needed.

Open v0 with this prompt pre-filled:

Open in v0 →

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
npm package:

- Render its <AddressFinder> component inside a Client Component
  ("use client"). Keep the shadcn/ui styling by passing the form's
  styled <Input> as the component's child (wrap mode), and keep
  react-hook-form state intact.
- Read the selected address from the onAddressRetrieved callback and
  update the form's state.
- Read the API key from the NEXT_PUBLIC_IDEAL_POSTCODES_API_KEY env var
  and pass it as the apiKey prop.
- Reference docs: https://docs.ideal-postcodes.co.uk/docs/address-finder/react.md

3. Lock down the 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. *.<your-team>.vercel.app (previews) and *.yourdomain.com (production).

Need help?

• File an issue: github.com/ideal-postcodes/feedback
• Email: support@ideal-postcodes.co.uk