Skip to main content

Replit

Replit Agent builds web apps from a chat prompt. You'll add the Ideal Postcodes Address Finder with our React component, and store your API key in Replit's Secrets when Agent asks for it.

What you'll add​

The Ideal Postcodes Address Finder on any address form, via its React component.

1. Get an API key​

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 Ideal Postcodes Address Finder
before wiring anything up.

For each form I confirm, add autocomplete using the
@ideal-postcodes/react component:

- Install the @ideal-postcodes/react package.
- Render its <AddressFinder> 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 IDEAL_POSTCODES_API_KEY and
  pass it as the apiKey prop. If the app uses Vite, expose it as
  VITE_IDEAL_POSTCODES_API_KEY and read via import.meta.env. Prompt me
  for the value if it isn't set.
- Reference docs: https://docs.ideal-postcodes.co.uk/docs/address-finder/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:

Ideal Postcodes Address Finder: @ideal-postcodes/react, docs at
https://docs.ideal-postcodes.co.uk/docs/address-finder/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. *.replit.dev (workspace preview), *.replit.app (deployments), and *.yourdomain.com (production).

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_IDEAL_POSTCODES_API_KEY and reference it via import.meta.env.VITE_IDEAL_POSTCODES_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?​