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 @addresszen/address-lookup unless you name it in the prompt — without an explicit mention it tends to wire up Google Places or roll its own form fields.

What you'll add​

International address autocomplete on any address form, powered by the Address Lookup widget.

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. 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_ADDRESSZEN_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 international address autocomplete to the billing form using
the @addresszen/address-lookup npm package.

- Install the package and mount AddressLookup.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_ADDRESSZEN_API_KEY env var.
- Reference docs: https://docs.addresszen.com/docs/address-lookup.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 account.addresszen.com, 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?​