# Replit

Replit Agent builds web apps from a chat prompt. You'll add the AddressZen Address Lookup with our [React component](/docs/address-lookup/react.md), and store your API key in Replit's **Secrets** when Agent asks for it.

## 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")

Paste this into the Replit Agent chat:

```
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

component:



- Install the @addresszen/react package.

- Render its <AddressLookup> component on that form. Read the selected

  address from the onAddressRetrieved callback and update the form's

  state.

- Read the API key from a Repl Secret named ADDRESSZEN_API_KEY and pass

  it as the apiKey prop. If the app uses Vite, expose it as

  VITE_ADDRESSZEN_API_KEY and read via import.meta.env. Prompt me for

  the value if it isn't set.

- Reference docs: https://docs.addresszen.com/docs/address-lookup/react.md
```

For multi-turn projects, add a one-liner to `replit.md` (the file Agent reads on every turn) so it stays on the SDK:

```
AddressZen Address Lookup: @addresszen/react, docs at

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. `*.replit.dev` (workspace preview), `*.replit.app` (deployments), and `*.yourdomain.com` (production).

## Troubleshooting[​](#troubleshooting "Direct link to Troubleshooting")

* **403 `allowed_url_mismatch` in the workspace preview** — add `*.replit.dev` to Allowed URLs.
* **Suggestions never appear and the network tab shows no calls** — the key isn't reaching the browser. In a Vite app, rename the Secret to `VITE_ADDRESSZEN_API_KEY` and reference it via `import.meta.env.VITE_ADDRESSZEN_API_KEY`.
* **Server errors land in the Console pane, browser errors in the Preview's DevTools** — if Agent is "fixing" the wrong layer, check the other pane and paste the real error back into chat.

## 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>