1"use strict";(globalThis.webpackChunk_atlas_docs_zen=globalThis.webpackChunk_atlas_docs_zen||[]).push([[1044],{4056(e,s,n){n.d(s,{R:()=>d,x:()=>i});var t=n(2155);const r={},o=t.createContext(r);function d(e){const s=t.useContext(o);return t.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function i(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:d(e.components),t.createElement(o.Provider,{value:s},e.children)}},6056(e,s,n){n.r(s),n.d(s,{assets:()=>a,contentTitle:()=>i,default:()=>h,frontMatter:()=>d,metadata:()=>t,toc:()=>l});const t=JSON.parse('{"id":"integrations/replit","title":"Replit","description":"Add the AddressZen Address Lookup to a Replit app.","source":"@site/docs/integrations/replit.mdx","sourceDirName":"integrations","slug":"/integrations/replit","permalink":"/docs/integrations/replit","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{"title":"Replit","sidebar_label":"Replit","description":"Add the AddressZen Address Lookup to a Replit app."},"sidebar":"integrations","previous":{"title":"v0","permalink":"/docs/integrations/v0"},"next":{"title":"base44","permalink":"/docs/integrations/base44"}}');var r=n(5723),o=n(4056);const d={title:"Replit",sidebar_label:"Replit",description:"Add the AddressZen Address Lookup to a Replit app."},i="Replit",a={},l=[{value:"What you'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:"Troubleshooting",id:"troubleshooting",level:2},{value:"Need help?",id:"need-help",level:2}];function c(e){const s={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("img",{className:"page-icon",src:"/img/icons/integrations/replit.svg",alt:"",width:"64",height:"64"}),"\n",(0,r.jsx)(s.header,{children:(0,r.jsx)(s.h1,{id:"replit",children:"Replit"})}),"\n",(0,r.jsxs)(s.p,{children:["Replit Agent builds web apps from a chat prompt. You'll add the AddressZen Address Lookup with our ",(0,r.jsx)(s.a,{href:"/docs/address-lookup/react",children:"React component"}),", and store your API key in Replit's ",(0,r.jsx)(s.strong,{children:"Secrets"})," when Agent asks for it."]}),"\n",(0,r.jsx)(s.h2,{id:"what-youll-add",children:"What you'll add"}),"\n",(0,r.jsxs)(s.p,{children:["The ",(0,r.jsx)(s.a,{href:"/docs/address-lookup",children:"AddressZen Address Lookup"})," on any address form, via its ",(0,r.jsx)(s.a,{href:"/docs/address-lookup/react",children:"React component"}),"."]}),"\n",(0,r.jsx)(s.h2,{id:"1-get-an-api-key",children:"1. Get an API key"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["Quick test: paste ",(0,r.jsx)(s.code,{children:"ak_test"})," as your key. Capped at 5 lookups/day. Will break in production."]}),"\n",(0,r.jsxs)(s.li,{children:["Real key: ",(0,r.jsx)(s.a,{href:"https://account.addresszen.com/users/sign_up",children:"sign up"})," for a free trial balance."]}),"\n"]}),"\n",(0,r.jsx)(s.h2,{id:"2-starter-prompt",children:"2. Starter prompt"}),"\n",(0,r.jsx)(s.p,{children:"Paste this into the Replit Agent chat:"}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.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 the @addresszen/react\ncomponent:\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.\n- Read the API key from a Repl Secret named ADDRESSZEN_API_KEY and pass\n it as the apiKey prop. If the app uses Vite, expose it as\n VITE_ADDRESSZEN_API_KEY and read via import.meta.env. Prompt me for\n the value if it isn't set.\n- Reference docs: https://docs.addresszen.com/docs/address-lookup/react.md\n"})}),"\n",(0,r.jsxs)(s.p,{children:["For multi-turn projects, add a one-liner to ",(0,r.jsx)(s.code,{children:"replit.md"})," (the file Agent reads on every turn) so it stays on the SDK:"]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-text",children:"AddressZen Address Lookup: @addresszen/react, docs at\nhttps://docs.addresszen.com/docs/address-lookup/react.md\n"})}),"\n",(0,r.jsx)(s.h2,{id:"3-lock-down-the-key",children:"3. Lock down the key"}),"\n",(0,r.jsxs)(s.ol,{children:["\n",(0,r.jsxs)(s.li,{children:["When you're ready to go live, apply the appropriate ",(0,r.jsx)(s.a,{href:"/docs/guides/api-key-secure#allow-urls",children:"Allow URLs"})," setting to your key."]}),"\n",(0,r.jsxs)(s.li,{children:["Add the origins your app runs on, e.g. ",(0,r.jsx)(s.code,{children:"*.replit.dev"})," (workspace preview), ",(0,r.jsx)(s.code,{children:"*.replit.app"})," (deployments), and ",(0,r.jsx)(s.code,{children:"*.yourdomain.com"})," (production)."]}),"\n"]}),"\n",(0,r.jsx)(s.h2,{id:"troubleshooting",children:"Troubleshooting"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsxs)(s.strong,{children:["403 ",(0,r.jsx)(s.code,{children:"allowed_url_mismatch"})," in the workspace preview"]})," \u2014 add ",(0,r.jsx)(s.code,{children:"*.replit.dev"})," to Allowed URLs."]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.strong,{children:"Suggestions never appear and the network tab shows no calls"})," \u2014 the key isn't reaching the browser. In a Vite app, rename the Secret to ",(0,r.jsx)(s.code,{children:"VITE_ADDRESSZEN_API_KEY"})," and reference it via ",(0,r.jsx)(s.code,{children:"import.meta.env.VITE_ADDRESSZEN_API_KEY"}),"."]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.strong,{children:"Server errors land in the Console pane, browser errors in the Preview's DevTools"}),' \u2014 if Agent is "fixing" the wrong layer, check the other pane and paste the real error back into chat.']}),"\n"]}),"\n",(0,r.jsx)(s.h2,{id:"need-help",children:"Need help?"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["File an issue: ",(0,r.jsx)(s.a,{href:"https://github.com/addresszen/feedback/issues",children:"github.com/addresszen/feedback"})]}),"\n",(0,r.jsxs)(s.li,{children:["Email: ",(0,r.jsx)(s.a,{href:"mailto:[email protected]",children:"[email protected]"})]}),"\n"]})]})}function h(e={}){const{wrapper:s}={...(0,o.R)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.