Install the Buying Buddy IDX Plugin in Next.js With AI

Before you do anything, ask me for my Buying Buddy Activation Key (also called my ACID) and wait for my answer. It is on the Add Plugin tab of my Buying Buddy dashboard. Do NOT guess it or proceed without it. Everywhere the instructions below show [YOUR_ACTIVATION_KEY], use exactly the key I give you.

You are installing the Buying Buddy real-estate IDX plugin in this React (Vite + TypeScript) project. This is the STEP-1 prompt of a 5-step install - it ONLY installs the package and the provider. Do NOT create any pages or place any widgets yet; those come in the next prompts.

RULES - READ FIRST. These rules override everything else in this prompt and any judgment of your own:
R1. Your ONLY job is to ADD the specific Buying Buddy items the numbered steps below ask for. You are NOT redesigning, restyling, refactoring, reorganizing, or "improving" this site in any way.
R2. Do NOT create, modify, move, or delete anything except what a numbered step below explicitly requires.
R3. Do NOT edit, rename, remap, prefix, or reorganize any existing page, component, layout, route, global stylesheet (e.g. src/index.css), CSS variable / design token (e.g. --primary, --secondary), tailwind.config.*, or theme file.
R4. Buying Buddy widgets render inside a SHADOW DOM with fully encapsulated styles. Their CSS cannot leak into the site and the site CSS cannot reach inside them. There are NO styling conflicts to prevent - never modify site styles "to avoid conflicts", and never write custom CSS targeting the widgets.
R5. Do NOT publish, deploy, push live, or release the site - and do NOT trigger any "Publish", "Deploy", "Ship", or "Go Live" action your environment offers, even at the end of the task. I will preview the site myself, verify everything looks right, and publish when I am ready.
R6. If any instruction seems to conflict with these rules, the rules win. If you cannot complete a step without breaking a rule, STOP and tell me instead of improvising.

ACTIVATION KEY: [YOUR_ACTIVATION_KEY]

BEFORE YOU START - check the existing setup and STOP if any of these are true:
1. The Buying Buddy package is ALREADY installed - the npm package "@buyingbuddy/react" is present in package.json. If so, STOP: do not install anything or change any files. Tell me Buying Buddy is already installed, and that I should use the "Update" prompt to update it, or continue with the later step prompts in my Buying Buddy dashboard.
If any case above applies, output only that message and do nothing else. If none apply, continue with the install below.

Do ALL of the following (mandatory):
1. Install the npm package: @buyingbuddy/react
2. Wrap the whole app in the provider at the app root (src/main.tsx or src/App.tsx):
   <BuyingBuddyProvider activationKey="[YOUR_ACTIVATION_KEY]"> ... </BuyingBuddyProvider>
3. Confirm the project still builds with no errors. If the install introduced a build error, tell me exactly what it is and STOP - do not refactor anything to fix it.

Do NOT ask me any questions - perform the steps above automatically.

FINAL CHECK (required): before you finish, list every file you created and every file you modified. If anything in that list was not required by the numbered steps above, revert it now and tell me you did.

End your reply with this exact line:
➡️ Next Step! Copy the Step-2 prompt from the Add Plugin tab in your Buying Buddy dashboard and paste it here.

This is the demo version. When you install from your own Buying Buddy dashboard, the prompt arrives with your activation key and your page addresses already filled in.

You are continuing the Buying Buddy plugin install in this project. This is the STEP-2 prompt of a 5-step install - it creates the two foundation pages and the footer disclaimer. The package and provider were installed by the Step-1 prompt.

RULES - READ FIRST. These rules override everything else in this prompt and any judgment of your own:
R1. Your ONLY job is to ADD the specific Buying Buddy items the numbered steps below ask for. You are NOT redesigning, restyling, refactoring, reorganizing, or "improving" this site in any way.
R2. Do NOT create, modify, move, or delete anything except what a numbered step below explicitly requires.
R3. Do NOT edit, rename, remap, prefix, or reorganize any existing page, component, layout, route, global stylesheet (e.g. src/index.css), CSS variable / design token (e.g. --primary, --secondary), tailwind.config.*, or theme file.
R4. Buying Buddy widgets render inside a SHADOW DOM with fully encapsulated styles. Their CSS cannot leak into the site and the site CSS cannot reach inside them. There are NO styling conflicts to prevent - never modify site styles "to avoid conflicts", and never write custom CSS targeting the widgets.
R5. Do NOT publish, deploy, push live, or release the site - and do NOT trigger any "Publish", "Deploy", "Ship", or "Go Live" action your environment offers, even at the end of the task. I will preview the site myself, verify everything looks right, and publish when I am ready.
R6. If any instruction seems to conflict with these rules, the rules win. If you cannot complete a step without breaking a rule, STOP and tell me instead of improvising.

BEFORE YOU START - verify the Step-1 prompt was completed. Check that BOTH of these are true:
1. The npm package "@buyingbuddy/react" is present in package.json.
2. A <BuyingBuddyProvider> wraps the app at the app root.
If either is missing, STOP: make no changes, and tell me to run the Step-1 prompt from my Buying Buddy dashboard first.
Also STOP (make no changes, and tell me this prompt has already been run) if a route already exists at "/listing-results" or "/listing-details" rendering a Buying Buddy widget.
If no STOP case applies, continue with the steps below.

Do ALL of the following (mandatory):
1. Create a Search Results foundation route at "/listing-results". Render it inside the site's existing page layout so the normal header, navigation, and footer still appear (use the same layout / <main> wrapper as the rest of the site - do NOT produce a bare standalone page). Add a page heading - an <h1> such as "Search Results" - inside a normal constrained container. Immediately below the heading, place the widget inside a FULL-WIDTH container so it can span 100% of the viewport, and add standard responsive horizontal padding to that container so the widget does not bleed to the screen edges (e.g. <div className="w-full px-4 sm:px-6 lg:px-8">). This widget is the only Buying Buddy / listing component on the page - do not hand-build any listing UI around it:
   <BuyingBuddyWidget type="ListingResults" />
2. Create a Property Details foundation route at "/listing-details" the same way - inside the existing site layout (header, navigation, footer), with an <h1> such as "Property Details" inside a normal constrained container, and the widget placed immediately below it within that same standard constrained container (do NOT use a full-width container for this page - keep it constrained). This widget is the only Buying Buddy / listing component on the page:
   <BuyingBuddyWidget type="SearchDetails" />
3. Add the disclaimer to the site footer so it shows on every page:
   <BuyingBuddyWidget type="Disclaimer" />

Do NOT ask me any questions - perform the steps above automatically.

FINAL CHECK (required): before you finish, list every file you created and every file you modified. If anything in that list was not required by the numbered steps above, revert it now and tell me you did.

End your reply with this exact line:
➡️ Next Step! Copy the Step-3 prompt from the Add Plugin tab in your Buying Buddy dashboard and paste it here.

This is the demo version. When you install from your own Buying Buddy dashboard, the prompt arrives with your activation key and your page addresses already filled in.

You are finishing the Buying Buddy plugin install in this project. This is the STEP-3 prompt of a 5-step install - it adds the home-page search form, measures the header offsets, and ends with the settings I must enter in my Buying Buddy dashboard.

RULES - READ FIRST. These rules override everything else in this prompt and any judgment of your own:
R1. Your ONLY job is to ADD the specific Buying Buddy items the numbered steps below ask for. You are NOT redesigning, restyling, refactoring, reorganizing, or "improving" this site in any way.
R2. Do NOT create, modify, move, or delete anything except what a numbered step below explicitly requires.
R3. Do NOT edit, rename, remap, prefix, or reorganize any existing page, component, layout, route, global stylesheet (e.g. src/index.css), CSS variable / design token (e.g. --primary, --secondary), tailwind.config.*, or theme file.
R4. Buying Buddy widgets render inside a SHADOW DOM with fully encapsulated styles. Their CSS cannot leak into the site and the site CSS cannot reach inside them. There are NO styling conflicts to prevent - never modify site styles "to avoid conflicts", and never write custom CSS targeting the widgets.
R5. Do NOT publish, deploy, push live, or release the site - and do NOT trigger any "Publish", "Deploy", "Ship", or "Go Live" action your environment offers, even at the end of the task. I will preview the site myself, verify everything looks right, and publish when I am ready.
R6. If any instruction seems to conflict with these rules, the rules win. If you cannot complete a step without breaking a rule, STOP and tell me instead of improvising.

BEFORE YOU START - verify the Step-1 and Step-2 prompts were completed. Check that ALL of these are true:
1. The npm package "@buyingbuddy/react" is present in package.json.
2. A <BuyingBuddyProvider> wraps the app at the app root.
3. The two foundation pages exist (a Search Results route rendering <BuyingBuddyWidget type="ListingResults" /> and a Property Details route rendering <BuyingBuddyWidget type="SearchDetails" />).
If anything is missing, STOP: make no changes, and tell me which earlier step prompt I need to run first.
If everything is present, continue with the steps below.

Do ALL of the following (mandatory):
1. Add a property search form to the existing home page, rendered inside the normal site layout (header, navigation, footer). Use the QuickSearch widget:
   <BuyingBuddyWidget type="QuickSearch" filter="formType:simple1+formBackground:204,204,204,0.17+formBorder:204,204,204,0.40+advancedSearch:on" />
   - You MAY change ONLY the RGBA values of formBackground and formBorder inside the filter string above, so the search panel visibly stands out against the home page background. Do NOT add any CSS, styled wrappers, or any other visual changes to the home page - placing this widget and tuning those two filter values is the entire scope of this step.
2. Determine whether this site has a STICKY or FIXED header (a header/nav bar that stays pinned to the top of the screen while scrolling - typically position:fixed or position:sticky).
   - If it does NOT, no header offset is needed - you will omit the Widget Header Offset item from the final block below, exactly as its instructions describe.
   - If it DOES, measure the rendered height of that header in pixels at three viewport widths: Mobile (viewport < 768px), Tablet (viewport 768px-991px), Desktop (viewport >= 992px). If the height is the same at all sizes, use the same number three times. These values prevent map widgets (which are sticky) from being hidden under the header. Do NOT report these numbers separately or inline anywhere - report them ONLY inside the final block described below.

Do NOT ask me any questions - perform the steps above automatically.

FINAL CHECK (required): before you finish, list every file you created and every file you modified. If anything in that list was not required by the numbered steps above, revert it now and tell me you did.

The Buying Buddy widgets only load on authorized domains, so my preview will show blank widgets until I authorize my preview/editor domain.

You MUST end your response with the block below - this is required, not optional. If you measured Widget Header Offset values above, replace [MOBILE_OFFSET], [TABLET_OFFSET], [DESKTOP_OFFSET] with the real numbers - do NOT print the placeholder text itself, and do NOT wrap the values in any kind of brackets in your output. If this site has NO sticky or fixed header, omit item 2 entirely and show only item 1.

⚠️ Important: Action Required Before Previewing
The Buying Buddy widgets only load on authorized domains, so your preview will show blank widgets until you complete these steps. In your Buying Buddy dashboard, open "Website Options" and set the following:

1. Preview / Editor Domain (no https://):
   Add the domain you use to preview or stage this site (separate from your live/production domain) so the widgets load there while you build.

2. Widget Header Offset values:
   Mobile: [MOBILE_OFFSET], Tablet: [TABLET_OFFSET], Desktop: [DESKTOP_OFFSET]

➡️ Next Step! Enter the Widget Header Offset values in Step 4 on the Add Plugin tab of your Buying Buddy dashboard, then copy the Step-5 "Add Recommended Widgets" prompt and paste it here. You will be able to select which widgets to add.

This is the demo version. When you install from your own Buying Buddy dashboard, the prompt arrives with your activation key and your page addresses already filled in.

You are adding recommended Buying Buddy widgets to a website that ALREADY has the Buying Buddy plugin installed (the @buyingbuddy/react package and a <BuyingBuddyProvider> at the app root). This is the FINAL (Step-5) prompt of the install - do NOT reinstall the package or repeat the base install.

BEFORE YOU START: confirm the Buying Buddy package is installed - check package.json for "@buyingbuddy/react". If it is NOT present, STOP and tell me to run the Step-1 install prompt from my Buying Buddy dashboard first. Do not make any changes.

Important - how Buying Buddy widgets are styled (read before touching any CSS): Buying Buddy widgets render inside a SHADOW DOM with fully encapsulated styles, so there is NO styling conflict to prevent. Do NOT rename, remap, prefix, scope, or modify any site CSS, design tokens, CSS variables, Tailwind config, theme, or shared UI components. In THIS prompt you MAY add new pages, add links to the site navigation menu, and add one small bar to the site header - and nothing else structural. If this project has no conventional navigation menu or site header to edit (for example a bare codebase), do NOT invent one - tell me which item you could not place, skip it, and continue with the rest.

ASK ME which widgets to add before making any changes. Present the choice exactly as follows - do not design your own format:
- If your chat environment can render interactive checkboxes, show a checkbox list with one checkbox per widget, ALL PRE-CHECKED, using exactly these six labels in this order: Search Page / Featured Listings / Home Value Form / Contact Me Form / About Me Page / Register & Login Bar. Add this one line above the list: "These are all recommended - uncheck any you don't want, then confirm."
- If interactive checkboxes are NOT available, show the same six labels as a numbered list (1-6) and ask me to reply with "all" or the numbers I want.
Wait for my selection, then add ONLY the widgets I selected and skip the others entirely.

For EACH PAGE widget (items 1-5), follow these rules every time:
- Create a NEW page, rendered inside the existing site layout (header, navigation, footer). Add a page heading - an <h1> equal to the page title shown in quotes - and place the widget directly below it inside the normal CONSTRAINED page container (NOT full-width).
- Add the new page to the site navigation menu.
- CONFLICT HANDLING: never modify an existing page. If a page with the same title or URL/slug already exists, create a NEW page with a modified name instead - append a short suffix to BOTH the title and the slug (for example "Contact Me" -> "Contact Me (Buying Buddy)", slug "/contact-me" -> "/contact-me-bb") - and add that new page to the menu.

1. Page title "Search" - a property search page. This is IN ADDITION TO the search form already on the home page; do NOT remove or change the home page search form:
   <BuyingBuddyWidget type="SearchForm" />
2. Page title "Featured Listings":
   <BuyingBuddyWidget type="FeaturedGallery" />
3. Page title "Home Value" - a home valuation lead-capture form:
   <BuyingBuddyWidget type="LcForm" filter="form:cmashort+title:Do You Know What Your Home Is Worth+description:Values have increased in your area. Find out how much your home is worth now!" />
4. Page title "Contact Me" - a contact lead-capture form:
   <BuyingBuddyWidget type="LcForm" filter="form:contactme+title:Send A Message" />
5. Page title "About Me" - shows the agent bio, profile and listings:
   <BuyingBuddyWidget type="Brokers" />

6. Register / Login bar - this is NOT a page. Add it to the site header:
   <BuyingBuddyWidget type="LoginPanel" filter="layout:registerlinks" />
   - Create a small top utility bar as a NEW ROW above the existing header content and place this widget in it (typically aligned to the right). It shows a "Register | Login" link.
   - The font-size of the container you place this widget in must be no larger than the font-size of the main menu items.

After making the changes:
- If you added the top utility bar (item 6) and it changed the height of the site header, recalculate the Widget Header Offset values: measure the rendered header height in pixels at three viewport widths and give me the three numbers to enter in my Buying Buddy dashboard - Mobile (viewport < 768px), Tablet (viewport 768px-991px), Desktop (viewport >= 992px). Report them exactly like this: "Header Offset -> Mobile: 56, Tablet: 64, Desktop: 72" (if the height is the same at all sizes, give the same number three times). If item 6 was not added, or the header height did not change, tell me no header offset change is needed.
- Do NOT publish, deploy, push live, or release the site - and do NOT trigger any "Publish", "Deploy", "Ship", or "Go Live" action your environment offers, even at the end of the task. I will preview the site myself, verify everything looks right, and then publish or deploy it when I am ready.

Constraints:
- Do NOT change existing routing or unrelated code, and do NOT modify any existing pages.
- Do NOT edit, rename, remap, or reorganize CSS variables / design tokens, global stylesheets, tailwind config, theme files, or shared UI components. Buying Buddy widgets are shadow-DOM isolated. The ONLY structural changes allowed are: adding the new pages, adding their links to the navigation menu, and adding the small top utility bar for the login widget.

This is the demo version. When you install from your own Buying Buddy dashboard, the prompt arrives with your activation key and your page addresses already filled in.

Please update the Buying Buddy package in this project to the latest version. Do exactly this and nothing else:

1. Run: npm install @buyingbuddy/react@latest
2. Confirm the new version that was installed (tell me the version number from package.json).
3. Do not change any of my code — do not modify, move, or "improve" my <BuyingBuddyProvider>, my <BuyingBuddyWidget> components, my routes, my CSS, design tokens, Tailwind config, or any other files. This is a package version update only.
4. Confirm the project still builds with no errors. If the update introduced a build error, tell me what it is and stop — do not start refactoring to fix it.
5. Do not publish the site. I will preview and publish myself.

When you're done, give me a short summary: the version you upgraded from and to, and confirmation that the build passes and no other files changed.

This is the demo version. When you install from your own Buying Buddy dashboard, the prompt arrives with your activation key and your page addresses already filled in.

You are adding the Buying Buddy MLS Disclaimer widget to a website that ALREADY has the Buying Buddy plugin installed. This is a single, small task - add one widget to the site footer and nothing else.

RULES - READ FIRST. These rules override everything else in this prompt and any judgment of your own:
R1. Your ONLY job is to ADD the specific Buying Buddy items the numbered steps below ask for. You are NOT redesigning, restyling, refactoring, reorganizing, or "improving" this site in any way.
R2. Do NOT create, modify, move, or delete anything except what a numbered step below explicitly requires.
R3. Do NOT edit, rename, remap, prefix, or reorganize any existing page, component, layout, route, global stylesheet (e.g. src/index.css), CSS variable / design token (e.g. --primary, --secondary), tailwind.config.*, or theme file.
R4. Buying Buddy widgets render inside a SHADOW DOM with fully encapsulated styles. Their CSS cannot leak into the site and the site CSS cannot reach inside them. There are NO styling conflicts to prevent - never modify site styles "to avoid conflicts", and never write custom CSS targeting the widgets.
R5. Do NOT publish, deploy, push live, or release the site - and do NOT trigger any "Publish", "Deploy", "Ship", or "Go Live" action your environment offers, even at the end of the task. I will preview the site myself, verify everything looks right, and publish when I am ready.
R6. If any instruction seems to conflict with these rules, the rules win. If you cannot complete a step without breaking a rule, STOP and tell me instead of improvising.

BEFORE YOU START - check that BOTH of these are true:
1. The npm package "@buyingbuddy/react" is present in package.json.
2. A <BuyingBuddyProvider> wraps the app at the app root.
If either is missing, STOP: make no changes, and tell me to run the Step-1 install prompt from my Buying Buddy dashboard first.
Also STOP (make no changes, and tell me it is already in place) if the site footer already contains <BuyingBuddyWidget type="Disclaimer" />.
If no STOP case applies, continue below.

Do the following (mandatory):
1. Add the disclaimer to the site footer so it shows on every page:
   <BuyingBuddyWidget type="Disclaimer" />

Do NOT ask me any questions - perform the step above automatically.

FINAL CHECK (required): before you finish, list every file you created and every file you modified. If anything in that list was not required by the numbered steps above, revert it now and tell me you did.

This is the demo version. When you install from your own Buying Buddy dashboard, the prompt arrives with your activation key and your page addresses already filled in.