1"use strict";(globalThis.webpackChunk_atlas_docs_ideal=globalThis.webpackChunk_atlas_docs_ideal||[]).push([[1515],{12795(e,s,t){t.r(s),t.d(s,{assets:()=>i,contentTitle:()=>a,default:()=>p,frontMatter:()=>r,metadata:()=>n,toc:()=>l});const n=JSON.parse('{"id":"integrations/v0","title":"v0","description":"Add the Ideal Postcodes Address Finder to a v0 app.","source":"@site/docs/integrations/v0.mdx","sourceDirName":"integrations","slug":"/integrations/v0","permalink":"/docs/integrations/v0","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{"title":"v0","sidebar_label":"v0","description":"Add the Ideal Postcodes Address Finder to a v0 app."},"sidebar":"integrations","previous":{"title":"Bolt","permalink":"/docs/integrations/bolt"},"next":{"title":"Replit","permalink":"/docs/integrations/replit"}}');var d=t(65723),o=t(34056);const r={title:"v0",sidebar_label:"v0",description:"Add the Ideal Postcodes Address Finder to a v0 app."},a="v0",i={},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:"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,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(s.header,{children:(0,d.jsx)(s.h1,{id:"v0",children:"v0"})}),"\n",(0,d.jsxs)(s.p,{children:["v0 builds web apps from a chat prompt and deploys them to Vercel. You'll add the Ideal Postcodes Address Finder with our ",(0,d.jsx)(s.a,{href:"/docs/address-finder/react",children:"React component"}),". Name the component in your prompt, or v0 will build its own address field instead."]}),"\n",(0,d.jsx)(s.h2,{id:"what-youll-add",children:"What you'll add"}),"\n",(0,d.jsxs)(s.p,{children:["The ",(0,d.jsx)(s.a,{href:"/docs/address-finder",children:"Ideal Postcodes Address Finder"})," on any address form, via its ",(0,d.jsx)(s.a,{href:"/docs/address-finder/react",children:"React component"}),"."]}),"\n",(0,d.jsx)(s.h2,{id:"1-get-an-api-key",children:"1. Get an API key"}),"\n",(0,d.jsxs)(s.ul,{children:["\n",(0,d.jsxs)(s.li,{children:["Quick test: paste ",(0,d.jsx)(s.code,{children:"ak_test"})," as your key. Capped at 5 lookups/day. Will break in production."]}),"\n",(0,d.jsxs)(s.li,{children:["Real key: ",(0,d.jsx)(s.a,{href:"https://account.ideal-postcodes.co.uk/users/sign_up",children:"sign up"})," for a free trial balance."]}),"\n"]}),"\n",(0,d.jsx)(s.h2,{id:"2-starter-prompt",children:"2. Starter prompt"}),"\n",(0,d.jsxs)(s.p,{children:["The prompt reads the key from ",(0,d.jsx)(s.code,{children:"NEXT_PUBLIC_IDEAL_POSTCODES_API_KEY"}),". v0 detects the missing variable and prompts you to paste your ",(0,d.jsx)(s.code,{children:"ak_\u2026"})," value. No manual setup is needed."]}),"\n",(0,d.jsx)(s.p,{children:"Open v0 with this prompt pre-filled:"}),"\n",(0,d.jsx)(s.p,{children:(0,d.jsx)(s.a,{href:"https://v0.app/chat?q=Find+every+address+form+in+this+app+and+list+them%2C+then+ask+me+to+confirm+which+ones+should+get+the+Ideal+Postcodes+Address+Finder+before+wiring+anything+up.+For+each+form+I+confirm%2C+add+autocomplete+using+the+%40ideal-postcodes%2Freact+npm+package%3A+render+its+%3CAddressFinder%3E+component+inside+a+Client+Component+%28%22use+client%22%29%2C+keep+the+shadcn%2Fui+styling+by+passing+the+form's+styled+input+as+the+component's+child%2C+and+update+the+form's+state+from+the+onAddressRetrieved+callback.+Read+the+API+key+from+the+NEXT_PUBLIC_IDEAL_POSTCODES_API_KEY+environment+variable+and+pass+it+as+the+apiKey+prop.+Reference+docs%3A+https%3A%2F%2Fdocs.ideal-postcodes.co.uk%2Fdocs%2Faddress-finder%2Freact.md",children:(0,d.jsx)(s.strong,{children:"Open in v0"})})}),"\n",(0,d.jsx)(s.p,{children:"Or paste manually:"}),"\n",(0,d.jsx)(s.pre,{children:(0,d.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 Ideal Postcodes Address Finder\nbefore wiring anything up.\n\nFor each form I confirm, add autocomplete using the @ideal-postcodes/react\nnpm package:\n\n- Re
1nder its <AddressFinder> component inside a Client Component\n (\"use client\"). Keep the shadcn/ui styling by passing the form's\n styled <Input> as the component's child (wrap mode), and keep\n react-hook-form state intact.\n- Read the selected address from the onAddressRetrieved callback and\n update the form's state.\n- Read the API key from the NEXT_PUBLIC_IDEAL_POSTCODES_API_KEY env var\n and pass it as the apiKey prop.\n- Reference docs: https://docs.ideal-postcodes.co.uk/docs/address-finder/react.md\n"})}),"\n",(0,d.jsx)(s.h2,{id:"3-lock-down-the-key",children:"3. Lock down the key"}),"\n",(0,d.jsxs)(s.ol,{children:["\n",(0,d.jsxs)(s.li,{children:["When you're ready to go live, apply the appropriate ",(0,d.jsx)(s.a,{href:"/docs/guides/api-key-secure#allow-urls",children:"Allow URLs"})," setting to your key."]}),"\n",(0,d.jsxs)(s.li,{children:["Add the origins your app runs on, e.g. ",(0,d.jsx)(s.code,{children:"*.<your-team>.vercel.app"})," (previews) and ",(0,d.jsx)(s.code,{children:"*.yourdomain.com"})," (production)."]}),"\n"]}),"\n",(0,d.jsx)(s.h2,{id:"need-help",children:"Need help?"}),"\n",(0,d.jsxs)(s.ul,{children:["\n",(0,d.jsxs)(s.li,{children:["File an issue: ",(0,d.jsx)(s.a,{href:"https://github.com/ideal-postcodes/feedback/issues",children:"github.com/ideal-postcodes/feedback"})]}),"\n",(0,d.jsxs)(s.li,{children:["Email: ",(0,d.jsx)(s.a,{href:"mailto:[email protected]",children:"[email protected]"})]}),"\n"]})]})}function p(e={}){const{wrapper:s}={...(0,o.R)(),...e.components};return s?(0,d.jsx)(s,{...e,children:(0,d.jsx)(c,{...e})}):c(e)}},34056(e,s,t){t.d(s,{R:()=>r,x:()=>a});var n=t(22155);const d={},o=n.createContext(d);function r(e){const s=n.useContext(o);return n.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function a(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(d):e.components||d:r(e.components),n.createElement(o.Provider,{value:s},e.children)}}}]);
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.