Skip to main content

v0

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

What you'll add​

The AddressZen Address Lookup 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 addresszen.com/signup for a free trial balance.

2. Starter prompt​

The prompt reads the key from NEXT_PUBLIC_ADDRESSZEN_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 AddressZen Address Lookup before
wiring anything up.

For each form I confirm, add autocomplete using the @addresszen/react
npm package:

- Render its <AddressLookup> 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_ADDRESSZEN_API_KEY env var and
  pass it as the apiKey prop.
- Reference docs: https://docs.addresszen.com/docs/address-lookup/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?​