P14:[{"_319":100,"_320":97,"_321":322},"app1","app2","diffPatch","diff --git a/app/components/product-chat.tsx b/app/components/product-chat.tsx\nindex ffc4a6d..0801294 100644\n--- a/app/components/product-chat.tsx\n+++ b/app/components/product-chat.tsx\n@@ -45,6 +45,13 @@ export function ProductChat() {\n \tconst [isOpen, setIsOpen] = useState(false)\n \tconst [draft, setDraft] = useState('')\n \n+\t// 🐨 Add `forwardedProps` to the options object below so the server route\n+\t// can tell which product the customer is looking at on every request.\n+\t// The panel also shows up on pages without a specific product (the\n+\t// products listing, the cart, the home page), so make it conditional:\n+\t// forwardedProps: product\n+\t// ? { productId: product.productId }\n+\t// : {}\n \tconst { messages, sendMessage, isLoading } = useChat({\n \t\tconnection: fetchServerSentEvents('/api/chat'),\n \t})\n@@ -85,11 +92,32 @@ export function ProductChat() {\n \t\t\t\t\t\t\t\t\t\t: 'max-w-[80%] rounded-lg bg-stone-100 p-3 text-sm text-gray-700 dark:bg-gray-800 dark:text-gray-200'\n \t\t\t\t\t\t\t\t}\n \t\t\t\t\t\t\t>\n-\t\t\t\t\t\t\t\t{m.parts.map((part, i) =>\n-\t\t\t\t\t\t\t\t\tpart.type === 'text' ? (\n-\t\t\t\t\t\t\t\t\t\t\n-\t\t\t\t\t\t\t\t\t) : null,\n-\t\t\t\t\t\t\t\t)}\n+\t\t\t\t\t\t\t\t{m.parts.map((part, i) => {\n+\t\t\t\t\t\t\t\t\tif (part.type === 'text') {\n+\t\t\t\t\t\t\t\t\t\treturn \n+\t\t\t\t\t\t\t\t\t}\n+\t\t\t\t\t\t\t\t\t// 🐨 You turned on reasoning in api.chat.tsx, so the model now\n+\t\t\t\t\t\t\t\t\t// emits `thinking` parts alongside `text` parts. Uncomment\n+\t\t\t\t\t\t\t\t\t// Marty 💰's branch below to show them in a collapsible row.\n+\t\t\t\t\t\t\t\t\t/*\n+\t\t\t\t\t\t\t\t\tif (part.type === 'thinking') {\n+\t\t\t\t\t\t\t\t\t\treturn (\n+\t\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t\t\t\t💭 Thinking…\n+\t\t\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t\t\t\t{part.content}\n+\t\t\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t)\n+\t\t\t\t\t\t\t\t\t}\n+\t\t\t\t\t\t\t\t\t*/\n+\t\t\t\t\t\t\t\t\treturn null\n+\t\t\t\t\t\t\t\t})}\n \t\t\t\t\t\t\t\n \t\t\t\t\t\t))}\n \t\t\t\t\t\ndiff --git a/app/prompts/system.ts b/app/prompts/system.ts\nnew file mode 100644\nindex 0000000..5b2d2ac\n--- /dev/null\n+++ b/app/prompts/system.ts\n@@ -0,0 +1,69 @@\n+import { type getProductById } from '#app/domain/products.server.ts'\n+\n+// 🦉 The `Product` type is inferred from the existing `getProductById`\n+// helper, so you do not need to write it yourself.\n+export type Product = NonNullable>>\n+\n+/**\n+ * 🐨 Fill in `GLOBAL_SYSTEM_PROMPT` with rules the bot must follow on every\n+ * chat request. The prompt should keep the bot on-topic (shopping only)\n+ * and stop it from inventing facts.\n+ *\n+ * 💰 Drop this string into the empty value below.\n+ *\n+ * `You are EpicStore's shopping assistant. EpicStore is an online store that\n+ * sells shoes and clothing.\n+ *\n+ * Rules:\n+ * - Only answer questions about EpicStore products, sizing, brands, shipping,\n+ * and shopping in general.\n+ * - If the user asks about anything else, politely tell them you can only\n+ * help with shopping.\n+ * - Never invent products, prices, stock, or sizes. If you do not know the\n+ * answer, say so.\n+ * - Before calling any tool that takes action on the customer's behalf, make\n+ * sure you have every required field. If something is missing, ask the\n+ * customer — do not guess.`\n+ */\n+export const GLOBAL_SYSTEM_PROMPT = ``\n+\n+/**\n+ * 🐨 Fill in `buildProductPrompt` so it returns a string describing the\n+ * product the customer is currently looking at. The model uses this to\n+ * answer follow-up questions (\"does it come in red?\", \"how much is it?\")\n+ * and to know which `productId` to pass when it calls a tool.\n+ *\n+ * 💰 The `Product` type includes `id`, `name`, `brand.name`, `category.name`,\n+ * `price`, `reviewScore`, `description`, and `variations` (each variation\n+ * has `size`, `color`, and `quantity`). Use this template:\n+ *\n+ * ```\n+ * const variationLines = product.variations\n+ * .map((v) => {\n+ * const stock = v.quantity > 0 ? `${v.quantity} in stock` : 'out of stock'\n+ * return ` - size ${v.size}, color ${v.color} (${stock})`\n+ * })\n+ * .join('\\n')\n+ *\n+ * return `The customer is currently looking at this product:\n+ * - Product ID: ${product.id}\n+ * - Name: ${product.name}\n+ * - Brand: ${product.brand.name}\n+ * - Category: ${product.category.name}\n+ * - Price: $${product.price}\n+ * - Rating: ${product.reviewScore}/5\n+ * - Description: ${product.description}\n+ * - Available variations:\n+ * ${variationLines}\n+ *\n+ * Use this information to answer questions about this product. When a tool\n+ * needs a productId, this is the product the customer is looking at — use\n+ * the Product ID listed above. If the customer asks something that the\n+ * information above does not cover, say you are not sure rather than\n+ * guessing.`\n+ * ```\n+ */\n+export function buildProductPrompt(product: Product): string {\n+\tvoid product\n+\treturn ''\n+}\ndiff --git a/app/routes/api.chat.tsx b/app/routes/api.chat.tsx\nindex 343394a..56fdd7c 100644\n--- a/app/routes/api.chat.tsx\n+++ b/app/routes/api.chat.tsx\n@@ -4,10 +4,46 @@ import {\n \ttoServerSentEventsResponse,\n } from '@tanstack/ai'\n import { openRouterText } from '@tanstack/ai-openrouter'\n+import { getProductById } from '#app/domain/products.server.ts'\n+import {\n+\tGLOBAL_SYSTEM_PROMPT,\n+\tbuildProductPrompt,\n+} from '#app/prompts/system.ts'\n+import { PageForwardedProps } from '#app/schemas/chat.js'\n import { type Route } from './+types/api.chat'\n \n const adapter = openRouterText('nvidia/nemotron-3-super-120b-a12b:free')\n \n+/**\n+ * 🐨 In this exercise you will give the bot a role, product awareness, and\n+ * turn on the model's reasoning mode. The imports above are already in\n+ * place for you. You will:\n+ *\n+ * 1. Destructure `forwardedProps` alongside `messages` from\n+ * `chatParamsFromRequest(request)`. (`chatParamsFromRequest` already\n+ * validates the AG-UI body and throws a 400 on bad input — you only\n+ * need to validate the `forwardedProps` portion yourself.)\n+ * 2. Validate `forwardedProps` with `PageForwardedProps.safeParse(...)`.\n+ * `productId` is **optional** here, because the chat panel also shows\n+ * up on the products listing page, where the customer is not looking\n+ * at a specific product. Return a 400 Response if validation fails.\n+ * 3. If `productId` is set, call `getProductById(productId)` to load the\n+ * product from the database. If it is not set, the product is `null`.\n+ * 4. Pass `systemPrompts: [GLOBAL_SYSTEM_PROMPT, buildProductPrompt(product)]`\n+ * into the `chat()` call so the model sees both the global rules and the\n+ * product details. If the product is `null` (either no `productId` or\n+ * the id is unknown), pass just `[GLOBAL_SYSTEM_PROMPT]` instead.\n+ * 5. Add `reasoning: 'medium'` to the same `chat()` call. This tells\n+ * OpenRouter to ask the model to think before it answers. The thinking\n+ * shows up in the chat as a separate \"thinking\" message part.\n+ *\n+ * 💣 Delete the `void` lines below once you are using the new imports.\n+ */\n+void getProductById\n+void GLOBAL_SYSTEM_PROMPT\n+void buildProductPrompt\n+void PageForwardedProps\n+\n export const action = async ({ request }: Route.ActionArgs) => {\n \tconst { messages, threadId } = await chatParamsFromRequest(request)\n \tconst stream = chat({ adapter, messages, threadId })\ndiff --git a/app/schemas/chat.ts b/app/schemas/chat.ts\nnew file mode 100644\nindex 0000000..f54f51d\n--- /dev/null\n+++ b/app/schemas/chat.ts\n@@ -0,0 +1,19 @@\n+import { z } from 'zod'\n+\n+/**\n+ * Validates the `forwardedProps` portion of the AG-UI request body that\n+ * `useChat` POSTs. The AG-UI envelope itself (`threadId`, `runId`, `tools`,\n+ * `messages`, `context`, ...) is validated by TanStack AI's\n+ * `chatParamsFromRequest(request)` — we only need to validate the extra\n+ * fields the page sends through `forwardedProps`.\n+ *\n+ * `productId` is optional because the chat panel also lives on the products\n+ * listing page, where the customer is not looking at a specific product. In\n+ * that case the server falls back to the global system prompt only.\n+ *\n+ * You won't author this schema in the workshop — it's part of the\n+ * scaffolding so the focus stays on TanStack AI.\n+ */\n+export const PageForwardedProps = z.object({\n+\tproductId: z.string().min(1).optional(),\n+})\n\\ No newline at end of file"]

app/components/product-chat.tsx-17+45App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/prompts/system.ts-0+69App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/api.chat.tsx-10+46App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/schemas/chat.ts-0+19App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/components/product-chat.tsx-17+45App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/prompts/system.ts-0+69App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/api.chat.tsx-10+46App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/schemas/chat.ts-0+19App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2