https://docs.addresszen.com/assets/js/cc662be2.c280ee52.js

1"use strict";(globalThis.webpackChunk_atlas_docs_zen=globalThis.webpackChunk_atlas_docs_zen||[]).push([[7160],{1020(e,n,s){s.r(n),s.d(n,{assets:()=>i,contentTitle:()=>d,default:()=>p,frontMatter:()=>a,metadata:()=>t,toc:()=>l});const t=JSON.parse('{"id":"integrations/leap-new","title":"Leap.new","description":"Add the AddressZen Address Lookup to a Leap.new app.","source":"@site/docs/integrations/leap-new.mdx","sourceDirName":"integrations","slug":"/integrations/leap-new","permalink":"/docs/integrations/leap-new","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{"title":"Leap.new","sidebar_label":"Leap.new","description":"Add the AddressZen Address Lookup to a Leap.new app."},"sidebar":"integrations","previous":{"title":"base44","permalink":"/docs/integrations/base44"},"next":{"title":"Anything","permalink":"/docs/integrations/anything"}}');var o=s(5723),r=s(4056);const a={title:"Leap.new",sidebar_label:"Leap.new",description:"Add the AddressZen Address Lookup to a Leap.new app."},d="Leap.new",i={},l=[{value:"What you&#39;ll add",id:"what-youll-add",level:2},{value:"1. Get an API key",id:"1-get-an-api-key",level:2},{value:"2. Starter prompt",id:"2-starter-prompt",level:2},{value:"3. Lock down the key",id:"3-lock-down-the-key",level:2},{value:"Need help?",id:"need-help",level:2}];function c(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",ol:"ol",p:"p",pre:"pre",ul:"ul",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)("img",{className:"page-icon",src:"/img/icons/integrations/leap-new.svg",alt:"",width:"64",height:"64"}),"\n",(0,o.jsx)(n.header,{children:(0,o.jsx)(n.h1,{id:"leapnew",children:"Leap.new"})}),"\n",(0,o.jsxs)(n.p,{children:["Leap.new builds web apps from a chat prompt and saves them to a GitHub repository you can keep working on. You'll add the AddressZen Address Lookup with our ",(0,o.jsx)(n.a,{href:"/docs/address-lookup/react",children:"React component"}),"."]}),"\n",(0,o.jsx)(n.h2,{id:"what-youll-add",children:"What you'll add"}),"\n",(0,o.jsxs)(n.p,{children:["The ",(0,o.jsx)(n.a,{href:"/docs/address-lookup",children:"AddressZen Address Lookup"})," on any address form, via its ",(0,o.jsx)(n.a,{href:"/docs/address-lookup/react",children:"React component"}),"."]}),"\n",(0,o.jsx)(n.h2,{id:"1-get-an-api-key",children:"1. Get an API key"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:["Quick test: paste ",(0,o.jsx)(n.code,{children:"ak_test"})," as your key. Capped at 5 lookups/day. Will break in production."]}),"\n",(0,o.jsxs)(n.li,{children:["Real key: ",(0,o.jsx)(n.a,{href:"https://account.addresszen.com/users/sign_up",children:"sign up"})," for a free trial balance."]}),"\n"]}),"\n",(0,o.jsx)(n.h2,{id:"2-starter-prompt",children:"2. Starter prompt"}),"\n",(0,o.jsx)(n.p,{children:"Paste this into the Leap.new chat:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-text",children:"Find every address form in this app and list them, then ask me to\nconfirm which ones should get the AddressZen Address Lookup before\nwiring anything up.\n\nFor each form I confirm, add autocomplete using @addresszen/react:\n\n- Install the @addresszen/react package.\n- Render its <AddressLookup> component on that form. Read the selected\n  address from the onAddressRetrieved callback and update the form's\n  state, triggering its change handlers so validation re-runs.\n- Pass ADDRESSZEN_API_KEY to the component's apiKey prop. The widget\n  runs in the browser, so expose the value to the frontend \u2014 the\n  simplest pattern is a tiny Encore API endpoint that reads\n  secret(\"ADDRESSZEN_API_KEY\") and returns it to the frontend on mount.\n  Render <AddressLookup> only once the key has arrived.\n- Reference docs: https://docs.addresszen.com/docs/address-lookup/react.md\n"})}),"\n",(0,o.jsxs)(n.p,{children:["When the agent wires this up it will prompt you for ",(0,o.jsx)(n.code,{children:"ADDRESSZEN_API_KEY"})," in chat. Paste your ",(0,o.jsx)(n.code,{children:"ak_\u2026"})," value when asked."]}),"\n",(0,o.jsx)(n.h2,{id:"3-lock-down-the-key",children:"3. Lock down the key"}),"\n",(0,o.jsxs)(n.ol,{children:["\n",(0,o.jsxs)(n.li,{children:["When you're ready to go live, apply the appropriate ",(0,o.jsx)(n.a,{href:"/docs/guides/api-key-secure#allow-urls",children:"Allow URLs"})," setting to your key."]}),"\n",(0,o.jsxs)(n.li,{children:["Add the origins your app runs on, e.g. ",(0,o.jsx)(n.code,{children:"localhost"})," (development), your Encore Cloud URLs, and ",(0,o.jsx)(n.code,{children:"*.yourdomain.com"})," (production)."]}),"\n"]}),"\n",(0,o.jsx)(n.h2,{id:"need-help",children:"Need help?"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:["File an issue: ",(0,o.jsx)(n.a,{href:"https://github.com/addresszen/feedback/issues",children:"github.com/addresszen/feedback"})]}),"\n",(0,o.jsxs)(n.li,{children:["Email: ",(0,o.jsx)(n.a,{href:"mailto:[email protected]",children:"[email protected]"})]}),"\n"]})]})}function p(e={}){const{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(c,{...e})}):c(e)}},4056(e,n,s){s.d(n,{R:()=>a,x:()=>d});var t=s(2155);const o={},r=t.createContext(o);function a(e){const n=t.useContext(r);return t.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:a(e.components),t.createElement(r.Provider,{value:n},e.children)}}}]);