Skip to main content

Replit

Replit Agent generates real React + Vite + Express apps and stores credentials in Repl Secrets, which are surfaced as environment variables to your running app. If you ask Agent for a service that needs an API key, it will pause mid-build and prompt you to paste one into Secrets.

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 Repl Secrets​

In your Repl:

  1. Open the Secrets tool (padlock icon in the workspace sidebar).
  2. Add a new secret: key ADDRESSZEN_API_KEY, value ak_….
  3. Save.

Agent will read process.env.ADDRESSZEN_API_KEY (Node) directly. If the app uses Vite (Replit Agent's default React stack), the secret must be renamed VITE_ADDRESSZEN_API_KEY so it reaches the browser bundle via import.meta.env. The starter prompt below tells Agent to handle this.

Tip: if you skip step 2 and ask Agent to wire the widget up first, it will prompt you for the key mid-build and add the Secret for you.

3. Starter prompt​

Paste this into the Replit Agent chat:

Add international address autocomplete to the address form using
@addresszen/address-lookup.

- Install the npm package.
- Mount AddressLookup.setup() on the address line 1 input. Populate the
  other address fields from the callback.
- Read the API key from a Repl Secret named ADDRESSZEN_API_KEY. 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.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:

Address autocomplete: @addresszen/address-lookup, docs at
https://docs.addresszen.com/docs/address-lookup.md

4. Lock down the key​

The widget runs in the browser, so the key is visible to site visitors — Allowed URLs is what makes it unusable elsewhere. Add both of these to your key:

  • *.replit.dev — the workspace preview pane (rotates per project; without this the widget will 403 during development)
  • *.replit.app — Replit Autoscale and Reserved VM deployments

Plus any custom domain you point at your deployed app.

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?​