Skip to main content

Leap.new

Leap.new generates Encore.ts (TypeScript) apps from a prompt and stores secrets via Encore's secret() primitive. The generated project lands in a real GitHub repo you can clone and continue in any IDE.

What you'll add​

UK and international address autocomplete on any address form, powered by the Address Finder widget. For UK-only postcode → address dropdowns, use Postcode Lookup instead.

1. Get an API key​

2. Store the key in Leap.new​

When the agent adds Address Finder, Leap will prompt for IDEAL_POSTCODES_API_KEY in chat — paste your ak_… value when asked.

If it doesn't, open the Infrastructure tab in your Leap project and add a secret named IDEAL_POSTCODES_API_KEY. Set the value for every environment you use (local, preview, production). Same effect as running encore secret set --type local,preview,prod IDEAL_POSTCODES_API_KEY from the CLI on an exported repo.

3. Starter prompt​

Paste this into the Leap.new chat:

Add UK and international address autocomplete to the address form using
@ideal-postcodes/address-finder.

- Install the npm package and import its CSS.
- Mount AddressFinder.setup() on the address line 1 input. Populate
  line_2, post_town and postcode from the callback and trigger their
  change handlers so validation re-runs.
- Pass IDEAL_POSTCODES_API_KEY as the apiKey. The widget runs in the
  browser, so expose the value to the frontend — the simplest pattern
  is a tiny Encore API endpoint that reads secret("IDEAL_POSTCODES_API_KEY")
  and returns it to the frontend on mount.
- Reference docs: https://docs.ideal-postcodes.co.uk/docs/address-finder.md

4. Lock down the key​

The widget calls our API from the browser, so the key ends up visible to anyone who views your site. Allowed URLs is what stops it being used elsewhere. Add every host you'll serve from:

  • http://localhost:* for encore run during development
  • Your Encore Cloud preview / production URLs
  • Any custom domain you've attached

Need help?​