# 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](/docs/address-lookup/react.md). Name the component in your prompt, or v0 will build its own address field instead.

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

The [AddressZen Address Lookup](/docs/address-lookup.md) on any address form, via its [React component](/docs/address-lookup/react.md).

## 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 addresszen.com/signup](https://addresszen.com/signup) for a free trial balance.

## 2. Starter prompt[​](#2-starter-prompt "Direct link to 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 →**](https://v0.app/chat?q=Find+every+address+form+in+this+app+and+list+them%2C+then+ask+me+to+confirm+which+ones+should+get+the+AddressZen+Address+Lookup+before+wiring+anything+up.+For+each+form+I+confirm%2C+add+autocomplete+using+the+%40addresszen%2Freact+npm+package%3A+render+its+%3CAddressLookup%3E+component+inside+a+Client+Component+%28%22use+client%22%29%2C+keep+the+shadcn%2Fui+styling+by+passing+the+form's+styled+input+as+the+component's+child%2C+and+update+the+form's+state+from+the+onAddressRetrieved+callback.+Read+the+API+key+from+the+NEXT_PUBLIC_ADDRESSZEN_API_KEY+environment+variable+and+pass+it+as+the+apiKey+prop.+Reference+docs%3A+https%3A%2F%2Fdocs.addresszen.com%2Fdocs%2Faddress-lookup%2Freact.md)

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[​](#3-lock-down-the-key "Direct link to 3. Lock down the key")

1. When you're ready to go live, apply the appropriate [Allow URLs](/docs/guides/api-key-secure.md#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?[​](#need-help "Direct link to Need help?")

* File an issue: [github.com/addresszen/feedback](https://github.com/addresszen/feedback/issues)
* Email: <support@addresszen.com>