diff --git a/react-prototype/prototype/.gitignore b/react-prototype/prototype/.gitignore
index b947077..c744b43 100644
--- a/react-prototype/prototype/.gitignore
+++ b/react-prototype/prototype/.gitignore
@@ -1,2 +1,5 @@
 node_modules/
 dist/
+.env
+.env.*
+!.env.example
diff --git a/react-prototype/prototype/README.md b/react-prototype/prototype/README.md
index d0f9514..9eeb309 100644
--- a/react-prototype/prototype/README.md
+++ b/react-prototype/prototype/README.md
@@ -17,6 +17,17 @@ npm install
 npm run dev
 ```
 
+## Gemini setup
+
+Create a local `.env` in `react-prototype/prototype` with:
+
+```bash
+GEMINI_API_KEY=your_gemini_api_key_here
+GEMINI_MODEL=gemini-2.5-flash
+```
+
+The React app sends assistant requests to `/api/gemini-chat`. In local Vite dev, that route is handled by the Vite server middleware. In deployment, the same path is served by `api/gemini-chat.js`.
+
 ## Build
 
 ```bash
diff --git a/react-prototype/prototype/api/gemini-chat.js b/react-prototype/prototype/api/gemini-chat.js
new file mode 100644
index 0000000..88fd5f4
--- /dev/null
+++ b/react-prototype/prototype/api/gemini-chat.js
@@ -0,0 +1,5 @@
+import { handleGeminiChatRequest } from "../server/geminiHandler.js";
+
+export default async function handler(req, res) {
+  return handleGeminiChatRequest(req, res);
+}
diff --git a/react-prototype/prototype/package-lock.json b/react-prototype/prototype/package-lock.json
index e8c2e5c..a9c574d 100644
--- a/react-prototype/prototype/package-lock.json
+++ b/react-prototype/prototype/package-lock.json
@@ -65,6 +65,7 @@
       "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.0",
         "@babel/generator": "^7.29.0",
@@ -1400,6 +1401,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.10.12",
         "caniuse-lite": "^1.0.30001782",
@@ -1850,6 +1852,7 @@
       "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "jiti": "bin/jiti.js"
       }
@@ -2098,6 +2101,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -2267,6 +2271,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.5.tgz",
       "integrity": "sha512-llUJLzz1zTUBrskt2pwZgLq59AemifIftw4aB7JxOqf1HY2FDaGDxgwpAPVzHU1kdWabH7FauP4i1oEeer2WCA==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -2276,6 +2281,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.5.tgz",
       "integrity": "sha512-J5bAZz+DXMMwW/wV3xzKke59Af6CHY7G4uYLN1OvBcKEsWOs4pQExj86BBKamxl/Ik5bx9whOrvBlSDfWzgSag==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -2626,6 +2632,7 @@
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -2703,6 +2710,7 @@
       "integrity": "sha512-2N/55r4JDJ4gdrCvGgINMy+HH3iRpNIz8K6SFwVsA+JbQScLiC+clmAxBgwiSPgcG9U15QmvqCGWzMbqda5zGQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.4.4",
@@ -2796,6 +2804,7 @@
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
diff --git a/react-prototype/prototype/server/geminiHandler.js b/react-prototype/prototype/server/geminiHandler.js
new file mode 100644
index 0000000..7ea953a
--- /dev/null
+++ b/react-prototype/prototype/server/geminiHandler.js
@@ -0,0 +1,190 @@
+const geminiResponseSchema = {
+  type: "object",
+  additionalProperties: false,
+  required: ["reply", "personalization"],
+  properties: {
+    reply: { type: "string" },
+    personalization: {
+      type: "object",
+      additionalProperties: false,
+      required: [
+        "recommendedSlug",
+        "recommendedProductName",
+        "focusAudience",
+        "priorities",
+        "featuredSegments",
+        "comparisonFocus",
+        "highlightedPricingTier",
+        "followUpPrompts",
+        "heroTitle",
+        "heroDescription",
+        "ctaLabel",
+        "summary"
+      ],
+      properties: {
+        recommendedSlug: {
+          type: "string",
+          enum: ["pulseband", "pulsering", "pulsewatch"]
+        },
+        recommendedProductName: {
+          type: "string",
+          enum: ["PulseBand", "PulseRing", "PulseWatch"]
+        },
+        focusAudience: { type: "string" },
+        priorities: {
+          type: "array",
+          items: { type: "string" },
+          minItems: 1,
+          maxItems: 4
+        },
+        featuredSegments: {
+          type: "array",
+          items: { type: "string" },
+          minItems: 1,
+          maxItems: 3
+        },
+        comparisonFocus: {
+          type: "string",
+          enum: ["PulseBand", "PulseRing", "PulseWatch"]
+        },
+        highlightedPricingTier: { type: "string" },
+        followUpPrompts: {
+          type: "array",
+          items: { type: "string" },
+          minItems: 1,
+          maxItems: 4
+        },
+        heroTitle: { type: "string" },
+        heroDescription: { type: "string" },
+        ctaLabel: { type: "string" },
+        summary: { type: "string" }
+      }
+    }
+  }
+};
+
+function sendJson(res, status, body) {
+  res.statusCode = status;
+  res.setHeader("Content-Type", "application/json");
+  res.end(JSON.stringify(body));
+}
+
+function getApiKey() {
+  return process.env.GEMINI_API_KEY || process.env.GOOGLE_API_KEY || "";
+}
+
+function getModel() {
+  return process.env.GEMINI_MODEL || "gemini-2.5-flash";
+}
+
+async function readJsonBody(req) {
+  if (req.body && typeof req.body === "object") return req.body;
+
+  const chunks = [];
+  for await (const chunk of req) {
+    chunks.push(Buffer.isBuffer(chunk) ? chunk : Buffer.from(chunk));
+  }
+
+  if (!chunks.length) return {};
+
+  const raw = Buffer.concat(chunks).toString("utf8");
+  return raw ? JSON.parse(raw) : {};
+}
+
+function extractTextFromResponse(payload) {
+  return payload?.candidates?.[0]?.content?.parts?.[0]?.text || "";
+}
+
+function buildPrompt(message, messages) {
+  const recentMessages = Array.isArray(messages) ? messages.slice(-6) : [];
+
+  return [
+    "You are PulseWear AI, a personalization assistant for a smartwatch and wearable website.",
+    "Your job is to understand what the shopper is looking for and return both a natural reply and structured website personalization.",
+    "The product options are only:",
+    "- PulseBand: athletes, runners, gym users, recovery, training performance",
+    "- PulseRing: professionals, wellness users, older adults, sleep, stress, health insights",
+    "- PulseWatch: students, tech users, multitaskers, productivity, apps, all-in-one daily use",
+    "Choose the single best-fit device based on the user's goals.",
+    "Keep the reply concise, warm, and specific to the user's request.",
+    "Priorities should be short phrases like fitness, recovery, sleep, focus, productivity, stress, health, budget, lifestyle.",
+    "featuredSegments should be the audience cards on the homepage that deserve emphasis.",
+    "comparisonFocus should be the device that should stand out in the comparison table.",
+    "highlightedPricingTier should be the plan tier that best fits the shopper for the recommended device.",
+    "followUpPrompts should be short clickable suggestions for the assistant.",
+    "Hero title and CTA should sound polished and website-ready.",
+    `Recent conversation: ${JSON.stringify(recentMessages)}`,
+    `Latest user message: ${message}`
+  ].join("\n");
+}
+
+export async function handleGeminiChatRequest(req, res) {
+  if (req.method !== "POST") {
+    res.setHeader("Allow", "POST");
+    return sendJson(res, 405, { error: "Method not allowed." });
+  }
+
+  const apiKey = getApiKey();
+  if (!apiKey) {
+    return sendJson(res, 503, {
+      error: "GEMINI_API_KEY is not configured on the server."
+    });
+  }
+
+  try {
+    const body = await readJsonBody(req);
+    const message = typeof body.message === "string" ? body.message.trim() : "";
+    const messages = Array.isArray(body.messages) ? body.messages : [];
+
+    if (!message) {
+      return sendJson(res, 400, { error: "A message is required." });
+    }
+
+    const geminiResponse = await fetch(
+      `https://generativelanguage.googleapis.com/v1beta/models/${getModel()}:generateContent`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "x-goog-api-key": apiKey
+        },
+        body: JSON.stringify({
+          contents: [
+            {
+              parts: [
+                {
+                  text: buildPrompt(message, messages)
+                }
+              ]
+            }
+          ],
+          generationConfig: {
+            responseMimeType: "application/json",
+            responseJsonSchema: geminiResponseSchema
+          }
+        })
+      }
+    );
+
+    const payload = await geminiResponse.json();
+    if (!geminiResponse.ok) {
+      const apiError =
+        payload?.error?.message || "Gemini request failed.";
+      return sendJson(res, geminiResponse.status, { error: apiError });
+    }
+
+    const text = extractTextFromResponse(payload);
+    if (!text) {
+      return sendJson(res, 502, {
+        error: "Gemini returned an empty response."
+      });
+    }
+
+    const parsed = JSON.parse(text);
+    return sendJson(res, 200, parsed);
+  } catch (error) {
+    return sendJson(res, 500, {
+      error: error instanceof Error ? error.message : "Unexpected server error."
+    });
+  }
+}
diff --git a/react-prototype/prototype/src/App.jsx b/react-prototype/prototype/src/App.jsx
index 4b66734..28ae7b9 100644
--- a/react-prototype/prototype/src/App.jsx
+++ b/react-prototype/prototype/src/App.jsx
@@ -1,12 +1,24 @@
 import { AnimatePresence, motion } from "framer-motion";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { Route, Routes, useLocation } from "react-router-dom";
+import AssistantDock from "./components/AssistantDock";
+import AssistantOverlay from "./components/AssistantOverlay";
 import Footer from "./components/Footer";
 import Navbar from "./components/Navbar";
 import ProductPage from "./components/ProductPage";
 import HomePage from "./pages/HomePage";
+import { buildAssistantResponse, getDefaultPersonalization } from "./utils/assistant";
 import { productCatalog } from "./data/siteData";
 
+const SESSION_STORAGE_KEY = "pulsewear-ai-session-v1";
+const defaultMessages = [
+  {
+    role: "assistant",
+    content:
+      "Tell me what kind of life you are shopping for and I will reshape the PulseWear site around the best-fit device."
+  }
+];
+
 function ScrollManager() {
   const location = useLocation();
 
@@ -43,18 +55,122 @@ function PageFrame({ children }) {
 
 export default function App() {
   const location = useLocation();
+  const [aiModeOpen, setAiModeOpen] = useState(false);
+  const [messages, setMessages] = useState(() => {
+    if (typeof window === "undefined") return defaultMessages;
+
+    try {
+      const saved = window.localStorage.getItem(SESSION_STORAGE_KEY);
+      if (!saved) return defaultMessages;
+      const parsed = JSON.parse(saved);
+      return Array.isArray(parsed.messages) && parsed.messages.length ? parsed.messages : defaultMessages;
+    } catch {
+      return defaultMessages;
+    }
+  });
+  const [isAssistantLoading, setIsAssistantLoading] = useState(false);
+  const [personalization, setPersonalization] = useState(() => {
+    if (typeof window === "undefined") return getDefaultPersonalization();
+
+    try {
+      const saved = window.localStorage.getItem(SESSION_STORAGE_KEY);
+      if (!saved) return getDefaultPersonalization();
+      const parsed = JSON.parse(saved);
+      return parsed.personalization || getDefaultPersonalization();
+    } catch {
+      return getDefaultPersonalization();
+    }
+  });
+  const sessionActive = messages.length > 1;
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+
+    window.localStorage.setItem(
+      SESSION_STORAGE_KEY,
+      JSON.stringify({
+        messages,
+        personalization
+      })
+    );
+  }, [messages, personalization]);
+
+  function resetAssistantSession() {
+    setMessages(defaultMessages);
+    setPersonalization(getDefaultPersonalization());
+    setAiModeOpen(false);
+
+    if (typeof window !== "undefined") {
+      window.localStorage.removeItem(SESSION_STORAGE_KEY);
+    }
+  }
+
+  async function handleAssistantMessage(input) {
+    const nextMessages = [...messages, { role: "user", content: input }];
+    setMessages(nextMessages);
+    setIsAssistantLoading(true);
+
+    try {
+      const response = await fetch("/api/gemini-chat", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          message: input,
+          messages: nextMessages
+        })
+      });
+
+      if (!response.ok) {
+        let errorMessage = "Gemini request failed.";
+
+        try {
+          const payload = await response.json();
+          if (payload?.error) errorMessage = payload.error;
+        } catch {
+          // Ignore parse failures and keep the default error message.
+        }
+
+        throw new Error(errorMessage);
+      }
+
+      const payload = await response.json();
+      setPersonalization(payload.personalization);
+      setMessages((current) => [
+        ...current,
+        { role: "assistant", content: payload.reply }
+      ]);
+    } catch (error) {
+      const fallback = buildAssistantResponse(input);
+      setPersonalization(fallback.personalization);
+      setMessages((current) => [
+        ...current,
+        {
+          role: "assistant",
+          content: `${fallback.reply} Gemini fallback: ${error instanceof Error ? error.message : "unknown error"}.`
+        }
+      ]);
+      console.error("Gemini chat failed, using local fallback:", error);
+    } finally {
+      setIsAssistantLoading(false);
+    }
+  }
 
   return (
     <div className="min-h-screen">
       <ScrollManager />
-      <Navbar />
+      <Navbar
+        aiEnabled={aiModeOpen}
+        onToggleAiMode={() => setAiModeOpen((value) => !value)}
+      />
       <AnimatePresence mode="wait">
         <Routes location={location} key={`${location.pathname}${location.hash}`}>
           <Route
             path="/"
             element={
               <PageFrame>
-                <HomePage />
+                <HomePage personalization={personalization} />
               </PageFrame>
             }
           />
@@ -72,6 +188,22 @@ export default function App() {
         </Routes>
       </AnimatePresence>
       <Footer />
+      <AssistantDock
+        visible={!aiModeOpen && sessionActive}
+        personalization={personalization}
+        messageCount={messages.length}
+        onOpen={() => setAiModeOpen(true)}
+        onReset={resetAssistantSession}
+      />
+      <AssistantOverlay
+        open={aiModeOpen}
+        messages={messages}
+        isLoading={isAssistantLoading}
+        personalization={personalization}
+        onClose={() => setAiModeOpen(false)}
+        onResetSession={resetAssistantSession}
+        onSendMessage={handleAssistantMessage}
+      />
     </div>
   );
 }
diff --git a/react-prototype/prototype/src/components/AssistantDock.jsx b/react-prototype/prototype/src/components/AssistantDock.jsx
new file mode 100644
index 0000000..f5c0f3f
--- /dev/null
+++ b/react-prototype/prototype/src/components/AssistantDock.jsx
@@ -0,0 +1,59 @@
+import { AnimatePresence, motion } from "framer-motion";
+
+export default function AssistantDock({
+  visible,
+  personalization,
+  messageCount,
+  onOpen,
+  onReset
+}) {
+  return (
+    <AnimatePresence>
+      {visible ? (
+        <motion.aside
+          initial={{ opacity: 0, y: 22 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: 18 }}
+          transition={{ duration: 0.24 }}
+          className="fixed bottom-5 right-5 z-[60] w-[calc(100vw-2.5rem)] max-w-sm"
+        >
+          <div className="overflow-hidden rounded-[28px] border border-[#d8def0] bg-[linear-gradient(135deg,rgba(255,255,255,0.97),rgba(238,242,255,0.98))] p-4 shadow-[0_30px_90px_-40px_rgba(58,73,221,0.32)]">
+            <div className="flex items-start justify-between gap-3">
+              <div>
+                <div className="text-xs font-semibold uppercase tracking-[0.16em] text-smoke">
+                  AI session saved
+                </div>
+                <h3 className="mt-2 text-lg font-semibold text-ink">
+                  {personalization.recommendedProductName} is still leading.
+                </h3>
+                <p className="mt-2 text-sm leading-6 text-smoke">
+                  {messageCount} messages saved. Reopen the assistant to refine your recommendation or start over.
+                </p>
+              </div>
+              <button
+                type="button"
+                onClick={onReset}
+                className="rounded-full border border-line bg-white px-3 py-2 text-xs font-semibold text-smoke transition hover:text-ink"
+              >
+                Reset
+              </button>
+            </div>
+
+            <div className="mt-4 flex gap-3">
+              <button
+                type="button"
+                onClick={onOpen}
+                className="flex-1 rounded-full bg-accent px-4 py-3 text-sm font-semibold text-white transition hover:-translate-y-0.5 hover:bg-accentDeep"
+              >
+                Resume AI
+              </button>
+              <div className="rounded-full border border-[#d7dff7] bg-[#f4f7ff] px-4 py-3 text-sm font-medium text-[#34426f]">
+                {personalization.focusAudience}
+              </div>
+            </div>
+          </div>
+        </motion.aside>
+      ) : null}
+    </AnimatePresence>
+  );
+}
diff --git a/react-prototype/prototype/src/components/AssistantOverlay.jsx b/react-prototype/prototype/src/components/AssistantOverlay.jsx
new file mode 100644
index 0000000..64c3e58
--- /dev/null
+++ b/react-prototype/prototype/src/components/AssistantOverlay.jsx
@@ -0,0 +1,212 @@
+import { AnimatePresence, motion } from "framer-motion";
+import { useEffect, useState } from "react";
+
+const starterPrompts = [
+  "I am a student and want one device for focus, sleep, and workouts.",
+  "I want the best wearable for recovery and training performance.",
+  "Show me the most affordable option for wellness and daily health insight."
+];
+
+export default function AssistantOverlay({
+  open,
+  messages,
+  isLoading,
+  personalization,
+  onClose,
+  onResetSession,
+  onSendMessage
+}) {
+  const [draft, setDraft] = useState("");
+
+  useEffect(() => {
+    if (!open) return undefined;
+
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+
+    return () => {
+      document.body.style.overflow = previousOverflow;
+    };
+  }, [open]);
+
+  function handleSubmit(event) {
+    event.preventDefault();
+    const message = draft.trim();
+    if (!message || isLoading) return;
+    setDraft("");
+    onSendMessage(message);
+  }
+
+  function handlePromptClick(prompt) {
+    if (isLoading) return;
+    setDraft("");
+    onSendMessage(prompt);
+  }
+
+  return (
+    <AnimatePresence>
+      {open ? (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.24 }}
+          className="fixed inset-0 z-[70] overflow-y-auto bg-[linear-gradient(180deg,rgba(247,244,238,0.96),rgba(235,240,255,0.98))] text-ink backdrop-blur-xl"
+        >
+          <div className="flex h-full flex-col">
+            <div className="section-shell flex items-center justify-between gap-4 border-b border-black/5 py-5">
+              <div>
+                <p className="text-xs font-semibold uppercase tracking-[0.18em] text-smoke">
+                  AI Assistant
+                </p>
+                <h2 className="mt-2 text-2xl font-semibold text-ink sm:text-3xl">
+                  Describe your rhythm and I will personalize the site.
+                </h2>
+                <p className="mt-2 text-sm text-smoke">
+                  Your conversation is saved, so you can close this and come back anytime.
+                </p>
+              </div>
+
+              <div className="flex items-center gap-3">
+                <button
+                  type="button"
+                  onClick={onResetSession}
+                  className="rounded-full border border-line bg-white px-5 py-3 text-sm font-semibold text-smoke transition hover:-translate-y-0.5 hover:text-ink hover:shadow-panel"
+                >
+                  Reset session
+                </button>
+                <button
+                  type="button"
+                  onClick={onClose}
+                  className="rounded-full border border-line bg-white px-5 py-3 text-sm font-semibold text-ink transition hover:-translate-y-0.5 hover:shadow-panel"
+                >
+                  Keep browsing
+                </button>
+              </div>
+            </div>
+
+            <div className="section-shell grid min-h-0 flex-1 gap-6 py-6 lg:grid-cols-[1.2fr,0.8fr]">
+              <div className="flex min-h-0 flex-col rounded-[32px] border border-[#d9deee] bg-white/92 shadow-[0_30px_80px_-36px_rgba(58,73,221,0.22)]">
+                <div className="flex items-center justify-between border-b border-black/6 px-6 py-4">
+                  <div>
+                    <div className="text-sm font-semibold text-ink">Conversation</div>
+                    <div className="mt-1 text-sm text-smoke">
+                      Ask for the wearable that best matches your needs.
+                    </div>
+                  </div>
+                  {isLoading ? (
+                    <div className="rounded-full border border-emerald-200 bg-emerald-50 px-3 py-1 text-xs font-semibold uppercase tracking-[0.16em] text-emerald-700">
+                      Thinking
+                    </div>
+                  ) : null}
+                </div>
+
+                <div className="flex-1 space-y-4 overflow-y-auto px-4 py-5 sm:px-6">
+                  {messages.map((message, index) => (
+                    <motion.div
+                      key={`${message.role}-${index}-${message.content}`}
+                      initial={{ opacity: 0, y: 12 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      className={`max-w-2xl rounded-[28px] px-5 py-4 ${
+                        message.role === "user"
+                          ? "ml-auto bg-[linear-gradient(135deg,#5968ff,#7481ff)] text-white shadow-[0_20px_45px_-28px_rgba(89,104,255,0.9)]"
+                          : "border border-[#dbe1f2] bg-[#f8faff] text-ink"
+                      }`}
+                    >
+                      <div className={`text-xs font-semibold uppercase tracking-[0.16em] ${message.role === "user" ? "text-white/75" : "text-smoke"}`}>
+                        {message.role === "user" ? "You" : "PulseWear AI"}
+                      </div>
+                      <p className="mt-2 text-sm leading-7 sm:text-base">
+                        {message.content}
+                      </p>
+                    </motion.div>
+                  ))}
+                </div>
+
+                <div className="border-t border-white/10 px-4 py-4 sm:px-6">
+                  <div className="mb-3 flex flex-wrap gap-2">
+                    {starterPrompts.map((prompt) => (
+                      <button
+                        key={prompt}
+                        type="button"
+                        onClick={() => setDraft(prompt)}
+                        className="rounded-full border border-[#d7dff7] bg-[#f4f7ff] px-3 py-2 text-left text-xs font-medium text-[#34426f] transition hover:-translate-y-0.5 hover:border-accent/30 hover:bg-white hover:text-ink"
+                      >
+                        {prompt}
+                      </button>
+                    ))}
+                  </div>
+
+                  <form
+                    onSubmit={handleSubmit}
+                    className="flex flex-col gap-3 sm:flex-row"
+                  >
+                    <textarea
+                      value={draft}
+                      onChange={(event) => setDraft(event.target.value)}
+                      rows={3}
+                      placeholder="I need a device that helps me balance workouts, sleep, and school..."
+                      className="min-h-[92px] flex-1 rounded-[24px] border border-[#d8deef] bg-[#fcfdff] px-5 py-4 text-sm text-ink outline-none placeholder:text-smoke/70 focus:border-accent/40 focus:bg-white"
+                    />
+                    <button
+                      type="submit"
+                      disabled={isLoading || !draft.trim()}
+                      className="rounded-[24px] bg-ink px-6 py-4 text-sm font-semibold text-white transition hover:-translate-y-0.5 hover:bg-accentDeep disabled:cursor-not-allowed disabled:opacity-50 sm:self-end"
+                    >
+                      Personalize
+                    </button>
+                  </form>
+                </div>
+              </div>
+
+              <div className="space-y-4">
+                <div className="rounded-[32px] border border-[#d9deee] bg-[linear-gradient(135deg,#ffffff,#eef2ff)] p-6 text-ink shadow-[0_24px_65px_-34px_rgba(58,73,221,0.22)]">
+                  <div className="text-xs font-semibold uppercase tracking-[0.18em] text-smoke">
+                    Live Direction
+                  </div>
+                  <h3 className="mt-3 text-2xl font-semibold">
+                    {personalization.heroTitle}
+                  </h3>
+                  <p className="mt-3 text-sm leading-7 text-smoke">
+                    {personalization.heroDescription}
+                  </p>
+                </div>
+
+                <div className="rounded-[32px] border border-[#d9deee] bg-white/88 p-6 text-ink shadow-[0_20px_50px_-36px_rgba(24,33,56,0.18)]">
+                  <div className="text-xs font-semibold uppercase tracking-[0.18em] text-smoke">
+                    Website changes
+                  </div>
+                  <ul className="mt-4 space-y-3 text-sm leading-6 text-smoke">
+                    <li><span className="font-semibold text-ink">Recommended device:</span> {personalization.recommendedProductName}</li>
+                    <li><span className="font-semibold text-ink">Primary audience:</span> {personalization.focusAudience}</li>
+                    <li><span className="font-semibold text-ink">Priority themes:</span> {personalization.priorities.join(", ")}</li>
+                    <li><span className="font-semibold text-ink">CTA direction:</span> {personalization.ctaLabel}</li>
+                    <li><span className="font-semibold text-ink">Featured segments:</span> {personalization.featuredSegments.join(", ")}</li>
+                  </ul>
+                </div>
+
+                <div className="rounded-[32px] border border-[#d9deee] bg-[linear-gradient(180deg,rgba(255,255,255,0.95),rgba(243,246,255,0.95))] p-6 text-ink shadow-[0_20px_50px_-36px_rgba(24,33,56,0.18)]">
+                  <div className="text-xs font-semibold uppercase tracking-[0.18em] text-smoke">
+                    Try next
+                  </div>
+                  <div className="mt-4 flex flex-wrap gap-2">
+                    {personalization.followUpPrompts.map((prompt) => (
+                      <button
+                        key={prompt}
+                        type="button"
+                        onClick={() => handlePromptClick(prompt)}
+                        className="rounded-full border border-[#d7dff7] bg-[#f4f7ff] px-3 py-2 text-left text-xs font-medium text-[#34426f] transition hover:-translate-y-0.5 hover:border-accent/30 hover:bg-white hover:text-ink"
+                      >
+                        {prompt}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </motion.div>
+      ) : null}
+    </AnimatePresence>
+  );
+}
diff --git a/react-prototype/prototype/src/components/ComparisonTable.jsx b/react-prototype/prototype/src/components/ComparisonTable.jsx
index e96a019..b226605 100644
--- a/react-prototype/prototype/src/components/ComparisonTable.jsx
+++ b/react-prototype/prototype/src/components/ComparisonTable.jsx
@@ -1,6 +1,6 @@
 import { motion } from "framer-motion";
 
-export default function ComparisonTable({ rows }) {
+export default function ComparisonTable({ rows, focusedDevice }) {
   return (
     <div className="surface-card overflow-hidden">
       <div className="hidden lg:block">
@@ -25,9 +25,18 @@ export default function ComparisonTable({ rows }) {
             {rows.map((row) => (
               <tr
                 key={row.device}
-                className="border-b border-line last:border-b-0"
+                className={`border-b border-line last:border-b-0 ${row.device === focusedDevice ? "bg-[rgba(89,104,255,0.08)]" : ""}`}
               >
-                <td className="px-6 py-5 text-base font-semibold text-ink">{row.device}</td>
+                <td className="px-6 py-5 text-base font-semibold text-ink">
+                  <div className="flex items-center gap-3">
+                    <span>{row.device}</span>
+                    {row.device === focusedDevice ? (
+                      <span className="rounded-full bg-accent px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.14em] text-white">
+                        AI pick
+                      </span>
+                    ) : null}
+                  </div>
+                </td>
                 <td className="px-6 py-5 text-sm leading-6 text-smoke">{row.bestFor}</td>
                 <td className="px-6 py-5 text-sm leading-6 text-smoke">{row.focus}</td>
                 <td className="px-6 py-5 text-sm font-semibold text-ink">{row.price}</td>
@@ -42,11 +51,18 @@ export default function ComparisonTable({ rows }) {
           <motion.article
             key={row.device}
             whileHover={{ y: -4 }}
-            className="rounded-[20px] border border-line bg-white p-5"
+            className={`rounded-[20px] border bg-white p-5 ${row.device === focusedDevice ? "border-accent/30 shadow-[0_20px_45px_-32px_rgba(89,104,255,0.35)]" : "border-line"}`}
           >
             <div className="flex items-start justify-between gap-3">
               <div>
-                <div className="text-lg font-semibold text-ink">{row.device}</div>
+                <div className="flex items-center gap-2">
+                  <div className="text-lg font-semibold text-ink">{row.device}</div>
+                  {row.device === focusedDevice ? (
+                    <span className="rounded-full bg-accent px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.14em] text-white">
+                      AI pick
+                    </span>
+                  ) : null}
+                </div>
                 <p className="mt-1 text-sm text-smoke">{row.bestFor}</p>
               </div>
               <div className="text-sm font-semibold text-ink">{row.price}</div>
diff --git a/react-prototype/prototype/src/components/Navbar.jsx b/react-prototype/prototype/src/components/Navbar.jsx
index 4ca6dd3..3ccfca5 100644
--- a/react-prototype/prototype/src/components/Navbar.jsx
+++ b/react-prototype/prototype/src/components/Navbar.jsx
@@ -29,7 +29,75 @@ function NavLink({ item, pathname, hash, onClick }) {
   );
 }
 
-export default function Navbar() {
+function AiModeToggle({
+  enabled,
+  sessionActive = false,
+  messageCount = 0,
+  onToggle,
+  compact = false
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onToggle}
+      aria-pressed={enabled}
+      className={`group inline-flex items-center gap-3 rounded-full border px-3 py-2 transition ${
+        enabled
+          ? "border-accent bg-[linear-gradient(135deg,#5968ff,#7481ff)] text-white shadow-hover"
+          : sessionActive
+            ? "border-accent/20 bg-[linear-gradient(135deg,#ffffff,#eef2ff)] text-ink shadow-panel hover:-translate-y-0.5"
+            : "border-line bg-white text-ink hover:-translate-y-0.5 hover:shadow-panel"
+      } ${compact ? "justify-between" : ""}`}
+    >
+      <span className="flex items-center gap-3">
+        <span
+          className={`grid h-10 w-10 place-items-center rounded-2xl text-sm font-black ${
+            enabled
+              ? "bg-white/20 text-white"
+              : sessionActive
+                ? "bg-accent/10 text-accent"
+                : "bg-black/5 text-ink"
+          }`}
+        >
+          AI
+        </span>
+        <span className="text-left">
+          <span className="block text-sm font-semibold">
+            {enabled ? "AI Concierge" : sessionActive ? "Resume AI" : "AI Concierge"}
+          </span>
+          <span className={`block text-xs ${enabled ? "text-white/75" : "text-smoke"}`}>
+            {sessionActive ? `${messageCount} messages saved` : "Personalize your shopping path"}
+          </span>
+        </span>
+      </span>
+      <span className="flex items-center gap-3">
+        {sessionActive && !enabled ? (
+          <span className="hidden rounded-full bg-accent/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.14em] text-accent sm:inline-flex">
+            Saved
+          </span>
+        ) : null}
+        <span
+          className={`relative h-6 w-11 rounded-full transition ${
+            enabled ? "bg-white/30" : "bg-black/10"
+          }`}
+        >
+          <span
+            className={`absolute top-1 h-4 w-4 rounded-full shadow-sm transition ${
+              enabled ? "left-6 bg-white" : "left-1 bg-white"
+            }`}
+          />
+        </span>
+      </span>
+    </button>
+  );
+}
+
+export default function Navbar({
+  aiEnabled = false,
+  sessionActive = false,
+  messageCount = 0,
+  onToggleAiMode = () => {}
+}) {
   const { pathname, hash } = useLocation();
   const [open, setOpen] = useState(false);
 
@@ -67,6 +135,12 @@ export default function Navbar() {
         </nav>
 
         <div className="hidden items-center gap-3 lg:flex">
+          <AiModeToggle
+            enabled={aiEnabled}
+            sessionActive={sessionActive}
+            messageCount={messageCount}
+            onToggle={onToggleAiMode}
+          />
           <Link
             to="/#products"
             className="rounded-full border border-line bg-white px-5 py-3 text-sm font-semibold text-ink transition hover:-translate-y-0.5 hover:shadow-panel"
@@ -107,6 +181,13 @@ export default function Navbar() {
           >
             <div className="section-shell py-4">
               <div className="surface-card flex flex-col gap-2 p-4">
+                <AiModeToggle
+                  enabled={aiEnabled}
+                  sessionActive={sessionActive}
+                  messageCount={messageCount}
+                  onToggle={onToggleAiMode}
+                  compact
+                />
                 {mobileLinks.map((item) => (
                   <NavLink
                     key={item.id}
diff --git a/react-prototype/prototype/src/components/PricingCard.jsx b/react-prototype/prototype/src/components/PricingCard.jsx
index f2f8ae1..c3cba30 100644
--- a/react-prototype/prototype/src/components/PricingCard.jsx
+++ b/react-prototype/prototype/src/components/PricingCard.jsx
@@ -1,10 +1,10 @@
 import { motion } from "framer-motion";
 
-export default function PricingCard({ tier, theme, featured = false }) {
+export default function PricingCard({ tier, theme, featured = false, highlightedLabel = "" }) {
   return (
     <motion.article
       whileHover={{ y: -8 }}
-      className={`surface-card h-full p-6 ${featured ? "border-black/15" : ""}`}
+      className={`surface-card h-full p-6 ${featured ? "border-black/15" : ""} ${highlightedLabel ? "ring-2 ring-accent/30" : ""}`}
       style={{
         background: featured
           ? `linear-gradient(180deg, white, ${theme.panelTint})`
@@ -18,14 +18,21 @@ export default function PricingCard({ tier, theme, featured = false }) {
           </div>
           <div className="mt-3 text-4xl font-semibold text-ink">{tier.price}</div>
         </div>
-        {featured ? (
-          <div
-            className="rounded-full px-3 py-1 text-xs font-semibold"
-            style={{ background: theme.chipBg, color: theme.chipText }}
-          >
-            Popular
-          </div>
-        ) : null}
+        <div className="flex flex-col items-end gap-2">
+          {featured ? (
+            <div
+              className="rounded-full px-3 py-1 text-xs font-semibold"
+              style={{ background: theme.chipBg, color: theme.chipText }}
+            >
+              Popular
+            </div>
+          ) : null}
+          {highlightedLabel ? (
+            <div className="rounded-full bg-accent px-3 py-1 text-xs font-semibold text-white">
+              {highlightedLabel}
+            </div>
+          ) : null}
+        </div>
       </div>
       <p className="mt-5 text-sm leading-6 text-smoke">{tier.note}</p>
       <button
diff --git a/react-prototype/prototype/src/components/ProductCard.jsx b/react-prototype/prototype/src/components/ProductCard.jsx
index 0e3e08d..4cd0e1c 100644
--- a/react-prototype/prototype/src/components/ProductCard.jsx
+++ b/react-prototype/prototype/src/components/ProductCard.jsx
@@ -2,12 +2,12 @@ import { motion } from "framer-motion";
 import { Link } from "react-router-dom";
 import DeviceMockup from "./DeviceMockup";
 
-export default function ProductCard({ product }) {
+export default function ProductCard({ product, featuredReason }) {
   return (
     <motion.article
       whileHover={{ y: -8 }}
       transition={{ type: "spring", stiffness: 260, damping: 22 }}
-      className="surface-card flex h-full flex-col overflow-hidden"
+      className={`surface-card flex h-full flex-col overflow-hidden ${featuredReason ? "ring-2 ring-accent/30" : ""}`}
     >
       <div
         className="p-6"
@@ -15,6 +15,11 @@ export default function ProductCard({ product }) {
       >
         <div className="flex items-center justify-between gap-4">
           <div>
+            {featuredReason ? (
+              <div className="mb-2 inline-flex rounded-full bg-accent px-3 py-1 text-xs font-semibold uppercase tracking-[0.14em] text-white">
+                AI pick
+              </div>
+            ) : null}
             <div className="text-sm font-semibold text-ink">{product.name}</div>
             <div className="mt-1 text-sm text-smoke">{product.homePrice}</div>
           </div>
@@ -39,6 +44,11 @@ export default function ProductCard({ product }) {
       <div className="flex flex-1 flex-col p-6">
         <h3 className="text-2xl font-semibold">{product.name}</h3>
         <p className="mt-3 text-sm leading-6 text-smoke">{product.homeDescription}</p>
+        {featuredReason ? (
+          <p className="mt-4 rounded-[20px] bg-accentSoft px-4 py-3 text-sm leading-6 text-ink">
+            {featuredReason}
+          </p>
+        ) : null}
         <div className="mt-6 flex flex-wrap gap-2">
           {product.targetSegments.slice(0, 3).map((item) => (
             <span
diff --git a/react-prototype/prototype/src/components/SegmentCard.jsx b/react-prototype/prototype/src/components/SegmentCard.jsx
index faba1b1..afe16e1 100644
--- a/react-prototype/prototype/src/components/SegmentCard.jsx
+++ b/react-prototype/prototype/src/components/SegmentCard.jsx
@@ -1,6 +1,6 @@
 import { motion } from "framer-motion";
 
-export default function SegmentCard({ segment, index }) {
+export default function SegmentCard({ segment, index, highlighted = false }) {
   const tones = [
     "from-[#edf0ff] to-white",
     "from-[#f8ede4] to-white",
@@ -13,8 +13,13 @@ export default function SegmentCard({ segment, index }) {
   return (
     <motion.article
       whileHover={{ y: -6 }}
-      className={`surface-card h-full bg-gradient-to-br p-6 ${tones[index % tones.length]}`}
+      className={`surface-card h-full bg-gradient-to-br p-6 ${tones[index % tones.length]} ${highlighted ? "ring-2 ring-accent/30 shadow-[0_24px_60px_-34px_rgba(89,104,255,0.35)]" : ""}`}
     >
+      {highlighted ? (
+        <div className="mb-3 inline-flex rounded-full bg-accent px-3 py-1 text-xs font-semibold uppercase tracking-[0.14em] text-white">
+          AI focus
+        </div>
+      ) : null}
       <div className="text-lg font-semibold text-ink">{segment.title}</div>
       <p className="mt-3 text-sm leading-6 text-smoke">{segment.copy}</p>
     </motion.article>
diff --git a/react-prototype/prototype/src/pages/HomePage.jsx b/react-prototype/prototype/src/pages/HomePage.jsx
index 73d9e6d..9567c78 100644
--- a/react-prototype/prototype/src/pages/HomePage.jsx
+++ b/react-prototype/prototype/src/pages/HomePage.jsx
@@ -7,10 +7,53 @@ import Reveal from "../components/Reveal";
 import SegmentCard from "../components/SegmentCard";
 import { audienceSegments, comparisonRows, productCatalog } from "../data/siteData";
 
-export default function HomePage() {
+export default function HomePage({ personalization }) {
+  const orderedProducts = personalization?.recommendedSlug
+    ? [...productCatalog].sort((a, b) => {
+        if (a.slug === personalization.recommendedSlug) return -1;
+        if (b.slug === personalization.recommendedSlug) return 1;
+        return 0;
+      })
+    : productCatalog;
+
+  const featuredProduct = orderedProducts[0];
+  const featuredSegments = personalization?.featuredSegments || [];
+  const recommendedProduct = featuredProduct || productCatalog[0];
+
   return (
     <>
-      <HeroSection products={productCatalog} />
+      <HeroSection products={orderedProducts} />
+
+      {personalization ? (
+        <section className="pt-10">
+          <div className="section-shell">
+            <div className="overflow-hidden rounded-[32px] border border-line bg-[linear-gradient(135deg,rgba(84,101,255,0.08),rgba(255,255,255,0.92))] p-6 shadow-panel sm:p-8">
+              <p className="eyebrow">AI personalization active</p>
+              <div className="mt-3 flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between">
+                <div className="max-w-3xl">
+                  <h2 className="text-3xl font-semibold text-ink sm:text-4xl">
+                    {personalization.heroTitle}
+                  </h2>
+                  <p className="mt-4 text-base leading-7 text-smoke">
+                    {personalization.heroDescription}
+                  </p>
+                </div>
+                <div className="rounded-[26px] border border-black/5 bg-white/90 px-5 py-4 shadow-panel">
+                  <div className="text-xs font-semibold uppercase tracking-[0.16em] text-smoke">
+                    Recommended now
+                  </div>
+                  <div className="mt-2 text-xl font-semibold text-ink">
+                    {personalization.recommendedProductName}
+                  </div>
+                  <div className="mt-1 text-sm text-smoke">
+                    {personalization.focusAudience} • {personalization.priorities.join(", ")}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+      ) : null}
 
       <section
         id="products"
@@ -25,10 +68,15 @@ export default function HomePage() {
           </Reveal>
 
           <div className="mt-10 grid gap-5 lg:grid-cols-3">
-            {productCatalog.map((product) => (
+            {orderedProducts.map((product, index) => (
               <ProductCard
                 key={product.slug}
                 product={product}
+                featuredReason={
+                  personalization && index === 0
+                    ? `Chosen for ${personalization.focusAudience.toLowerCase()} needs with emphasis on ${personalization.priorities.join(", ")}.`
+                    : ""
+                }
               />
             ))}
           </div>
@@ -53,6 +101,7 @@ export default function HomePage() {
                 key={segment.title}
                 segment={segment}
                 index={index}
+                highlighted={featuredSegments.includes(segment.title)}
               />
             ))}
           </div>
@@ -72,7 +121,10 @@ export default function HomePage() {
           </Reveal>
 
           <div className="mt-10">
-            <ComparisonTable rows={comparisonRows} />
+            <ComparisonTable
+              rows={comparisonRows}
+              focusedDevice={personalization?.comparisonFocus}
+            />
           </div>
         </div>
       </section>
@@ -85,21 +137,20 @@ export default function HomePage() {
           <Reveal className="max-w-3xl">
             <p className="eyebrow">Pricing</p>
             <h2 className="mt-4 text-3xl font-semibold text-ink sm:text-4xl">
-              Premium devices, clear starting points.
+              {recommendedProduct.name} pricing, tuned to your direction.
             </h2>
           </Reveal>
 
           <div className="mt-10 grid gap-5 lg:grid-cols-3">
-            {productCatalog.map((product, index) => (
+            {recommendedProduct.pricing.map((tier, index) => (
               <PricingCard
-                key={product.slug}
-                tier={{
-                  tier: product.name,
-                  price: product.homePrice.replace("From ", ""),
-                  note: product.homeDescription
-                }}
-                theme={product.theme}
+                key={tier.tier}
+                tier={tier}
+                theme={recommendedProduct.theme}
                 featured={index === 1}
+                highlightedLabel={
+                  personalization?.highlightedPricingTier === tier.tier ? "AI fit" : ""
+                }
               />
             ))}
           </div>
@@ -107,9 +158,11 @@ export default function HomePage() {
       </section>
 
       <CTASection
-        title="Start with the device that fits your rhythm."
-        buttonLabel="Compare all devices"
-        buttonHref="/#compare"
+        title={personalization?.heroTitle || "Start with the device that fits your rhythm."}
+        buttonLabel={personalization?.ctaLabel || "Compare all devices"}
+        buttonHref={featuredProduct?.route || "/#compare"}
+        secondaryLabel="See all devices"
+        secondaryHref="/#products"
       />
     </>
   );
diff --git a/react-prototype/prototype/src/utils/assistant.js b/react-prototype/prototype/src/utils/assistant.js
new file mode 100644
index 0000000..779bbe7
--- /dev/null
+++ b/react-prototype/prototype/src/utils/assistant.js
@@ -0,0 +1,137 @@
+import { productCatalog } from "../data/siteData";
+
+const audienceRules = [
+  {
+    label: "Students",
+    keywords: ["student", "school", "class", "college", "study", "campus", "homework"],
+    preferred: "pulsewatch"
+  },
+  {
+    label: "Athletes",
+    keywords: ["athlete", "training", "recovery", "run", "runner", "workout", "gym", "performance"],
+    preferred: "pulseband"
+  },
+  {
+    label: "Professionals",
+    keywords: ["work", "professional", "meeting", "busy", "office", "career"],
+    preferred: "pulsering"
+  },
+  {
+    label: "Wellness users",
+    keywords: ["wellness", "stress", "calm", "sleep", "health", "heart"],
+    preferred: "pulsering"
+  },
+  {
+    label: "Travelers",
+    keywords: ["travel", "flight", "trip", "timezone", "commute"],
+    preferred: "pulsewatch"
+  }
+];
+
+const themeKeywords = {
+  fitness: ["fitness", "workout", "exercise", "training", "run", "runner", "gym", "performance"],
+  recovery: ["recovery", "rest", "strain"],
+  sleep: ["sleep", "bed", "rested"],
+  focus: ["focus", "study", "productivity", "attention", "calendar"],
+  stress: ["stress", "anxiety", "calm", "balance"],
+  budget: ["budget", "affordable", "cheap", "value", "price"],
+  lifestyle: ["everyday", "daily", "simple", "comfortable"]
+};
+
+const defaultPrompt = "Find me the best PulseWear device for my daily life.";
+
+function normalize(text) {
+  return text.toLowerCase();
+}
+
+function countMatches(text, words) {
+  return words.reduce((total, word) => total + (text.includes(word) ? 1 : 0), 0);
+}
+
+function getDefaultProduct() {
+  return productCatalog.find((product) => product.slug === "pulsewatch") || productCatalog[0];
+}
+
+export function getDefaultPersonalization() {
+  const product = getDefaultProduct();
+
+  return {
+    prompt: defaultPrompt,
+    recommendedSlug: product.slug,
+    recommendedProductName: product.name,
+    focusAudience: "Everyday users",
+    priorities: ["health", "focus", "fitness"],
+    featuredSegments: ["Students", "Professionals"],
+    comparisonFocus: product.name,
+    highlightedPricingTier: product.pricing[1]?.tier || product.pricing[0]?.tier || "Standard",
+    followUpPrompts: [
+      `Compare ${product.name} with the other devices`,
+      "Show me the best option for sleep and recovery",
+      "What is the most affordable choice?"
+    ],
+    heroTitle: "AI mode is ready when you want a more personal shopping path.",
+    heroDescription:
+      "Tell the assistant about your goals, routines, and budget, and the site will shift toward the device that fits you best.",
+    ctaLabel: `Start with ${product.name}`,
+    summary:
+      "PulseWear AI can learn what matters to you and reshape the homepage around that recommendation."
+  };
+}
+
+export function buildAssistantResponse(input) {
+  const text = normalize(input);
+  const matchedAudience =
+    audienceRules
+      .map((rule) => ({ rule, score: countMatches(text, rule.keywords) }))
+      .sort((a, b) => b.score - a.score)[0] || null;
+
+  const prioritizedThemes = Object.entries(themeKeywords)
+    .map(([theme, keywords]) => ({ theme, score: countMatches(text, keywords) }))
+    .filter((entry) => entry.score > 0)
+    .sort((a, b) => b.score - a.score)
+    .map((entry) => entry.theme);
+
+  const priorities = prioritizedThemes.length
+    ? prioritizedThemes.slice(0, 3)
+    : ["health", "focus", "fitness"];
+
+  const preferredSlug = matchedAudience?.score ? matchedAudience.rule.preferred : "pulsewatch";
+  const product =
+    productCatalog.find((item) => item.slug === preferredSlug) || getDefaultProduct();
+  const focusAudience = matchedAudience?.score ? matchedAudience.rule.label : "Multitaskers";
+  const featuredSegments = [
+    focusAudience,
+    ...product.targetSegments
+  ].filter((value, index, array) => value && array.indexOf(value) === index).slice(0, 2);
+  const highlightedPricingTier = product.pricing[1]?.tier || product.pricing[0]?.tier || "Standard";
+  const followUpPrompts = [
+    `Compare ${product.name} with another device`,
+    `Show why ${product.name} fits me`,
+    "Give me a budget-friendly recommendation"
+  ];
+
+  const summary = [
+    `I would steer you toward ${product.name} based on what you shared.`,
+    `${product.name} is strongest for ${product.homeUsers.toLowerCase()} and aligns well with ${priorities.join(", ")}.`,
+    "I have updated the website direction so the most relevant device appears first and the matching sections stand out."
+  ].join(" ");
+
+  return {
+    reply: summary,
+    personalization: {
+      prompt: input,
+      recommendedSlug: product.slug,
+      recommendedProductName: product.name,
+      focusAudience,
+      priorities,
+      featuredSegments,
+      comparisonFocus: product.name,
+      highlightedPricingTier,
+      followUpPrompts,
+      heroTitle: `${product.name} looks like your best-fit starting point.`,
+      heroDescription: `${product.description} Right now the site is leaning into ${focusAudience.toLowerCase()} needs and emphasizing ${priorities.join(", ")}.`,
+      ctaLabel: `Explore ${product.name}`,
+      summary
+    }
+  };
+}
diff --git a/react-prototype/prototype/vite.config.js b/react-prototype/prototype/vite.config.js
index db1b19e..1030e03 100644
--- a/react-prototype/prototype/vite.config.js
+++ b/react-prototype/prototype/vite.config.js
@@ -1,6 +1,27 @@
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv } from "vite";
 import react from "@vitejs/plugin-react";
+import { handleGeminiChatRequest } from "./server/geminiHandler.js";
 
-export default defineConfig({
-  plugins: [react()]
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), "");
+  Object.assign(process.env, env);
+
+  return {
+    plugins: [
+      react(),
+      {
+        name: "local-gemini-chat-api",
+        configureServer(server) {
+          server.middlewares.use("/api/gemini-chat", async (req, res, next) => {
+            if (req.method !== "POST") {
+              next();
+              return;
+            }
+
+            await handleGeminiChatRequest(req, res);
+          });
+        }
+      }
+    ]
+  };
 });