fix(agent): repair product grid rendering and prerender error (#482)

* feat(agent): switch assistant model to openai/gpt-5.6-luna

* feat(agent): enable shopping assistant

* fix(agent): render action bar inside CartProviderWrapper

AgentButton mounts AgentPanel (ssr:false), whose CartReconciler calls
useCart(). Rendered outside CartProviderWrapper it missed the server
fallback and threw "useCart must be used within CartProvider" on
hydration.

* fix(agent): drop reasoning chunks before pipeJsonRender

Reasoning models emit reasoning-start/delta chunks that pass through
toUIMessageStream by default; pipeJsonRender only handles text chunks,
so reasoning (and any spec JSONL emitted inside it) never became
data-spec parts and the UI never rendered.

* fix(agent): inline concrete card props instead of repeat/$item bindings

The model followed json-render's repeat/$item example, but this app's
registry components take plain props and defineRegistry passes
element.props through unresolved, so {$item:"price"} reached
parsePriceString raw and crashed inside ElementErrorBoundary — which
returns null, silently unmounting the whole grid.

Instruct the model to emit one /elements entry per card with concrete
values (and null compareAtPrice), and make parsePriceString tolerate a
non-string so a bad spec degrades instead of throwing.

* fix(cart): exclude Hydrogen request-context UUIDs from static shell

createShopifyRequestContext calls crypto.randomUUID() for requestGroupId,
uniqueToken, and visitToken. During prerender of the static shell (layout's
seedCartData and nav's CartIcon) that tripped Cache Components' blocking-
prerender-crypto error on every route. await io() before the read so the
context is created at request time instead.

* feat(agent): return six products per search instead of five

Bump the default limit from 5 to 6 in searchProducts, searchCatalog, and
browseCollection so grids render an even 3x2/2x3.

* fix(agent): return six products from recommendations and searches

getProductRecommendations hardcoded slice(0, 5). The model also passed
limit: 5 explicitly to the search tools, overriding the schema default of 6,
so add a system-prompt rule to omit limit and render every returned product.

* chore(agent): disable shopping assistant

Author: laugharn

apps/docs/content/docs/anatomy/agent.mdx

@@ -6,7 +6,7 @@ prerequisites:
   - /docs/getting-started
 ---
 
-The storefront includes an opt-in AI shopping assistant built with [AI SDK](https://ai-sdk.dev). It can search products, browse collections, manage the cart, answer store-policy questions, and render rich product cards through natural conversation. The default model is Google Gemini 3.5 Flash through the Vercel AI Gateway.
+The storefront includes an opt-in AI shopping assistant built with [AI SDK](https://ai-sdk.dev). It can search products, browse collections, manage the cart, answer store-policy questions, and render rich product cards through natural conversation. The default model is OpenAI GPT-5.6 Luna through the Vercel AI Gateway.
 
 ## How it works
 

apps/template/app/api/chat/route.ts

@@ -109,6 +109,8 @@ export async function POST(request: Request) {
           pipeJsonRender(
             toUIMessageStream({
               originalMessages: safeMessages.data,
+              // pipeJsonRender only understands text deltas; reasoning parts would pass through unhandled.
+              sendReasoning: false,
               stream: result.stream,
               tools: agent.tools,
             }),

apps/template/app/layout.tsx

@@ -62,10 +62,10 @@ export default async function RootLayout({ children }: LayoutProps<"/">) {
             <Footer locale={locale} />
             <CartNotifications />
             <CartOverlayBridge />
+            <Suspense>
+              <ActionBar>{shopConfig.agent.isEnabled && <AgentButton />}</ActionBar>
+            </Suspense>
           </CartProviderWrapper>
-          <Suspense>
-            <ActionBar>{shopConfig.agent.isEnabled && <AgentButton />}</ActionBar>
-          </Suspense>
           <Toaster closeButton />
         </NextIntlClientProvider>
         <Suspense>

apps/template/components/agent/registry.tsx

@@ -20,7 +20,7 @@ import type { Money } from "@/lib/types";
 import { cn } from "@/lib/utils";
 
 function parsePriceString(price: string): Money {
-  const parts = price.split(" ");
+  const parts = typeof price === "string" ? price.split(" ") : [];
   return {
     amount: parts[0] || "0",
     currencyCode: parts[1] || "USD",

apps/template/lib/agent/server.ts

@@ -77,7 +77,9 @@ function createSystemPrompt(context: AgentContext): string {
   return `${prompt}\n${catalog.prompt({
     customRules: [
       "When searchProducts, searchCatalog, browseCollection, getProductRecommendations, getProductDetails, or getCatalogProduct returns products successfully, render them with AgentProductCard components. Wrap multiple cards in AgentProductGrid.",
-      "Pass price and compareAtPrice strings directly from tool results.",
+      "Never pass a limit to searchProducts, searchCatalog, or browseCollection — omit it so the default of 6 applies. Render every returned product; do not trim the grid to fewer cards.",
+      "Do not use repeat, $item, $state, $index, or $bindItem. Give each AgentProductCard its own /elements/<key> entry with concrete prop values copied directly from the tool result, and list the card keys in the grid's children array.",
+      "Pass price and compareAtPrice strings directly from tool results. When a product has no compareAtPrice, use null — never a zero amount.",
       "When getCart returns a non-empty cart, render AgentCartSummary using its items, subtotal, total, totalQuantity, and checkoutUrl.",
       "After addToCart succeeds, render AgentCartConfirmation using known product context.",
       "When multiple variants need a choice, render AgentVariantPicker from getProductDetails and ask the user which variant they want.",
@@ -107,7 +109,7 @@ const tools = {
 export function createAgent() {
   return new ToolLoopAgent({
     instructions: createSystemPrompt(getAgentContext()),
-    model: "google/gemini-3.5-flash",
+    model: "openai/gpt-5.6-luna",
     stopWhen: isStepCount(10),
     tools,
   });

apps/template/lib/agent/tools/browse-collection.ts

@@ -10,7 +10,7 @@ export function browseCollectionTool() {
     description: `Browse products in a collection. Get handles from listCollections or the current page context.`,
     inputSchema: z.object({
       collection: z.string(),
-      limit: z.number().min(1).max(10).default(5),
+      limit: z.number().min(1).max(10).default(6),
       sortKey: z
         .enum(["best-matches", "price-low-to-high", "price-high-to-low", "BEST_SELLING", "CREATED"])
         .default("best-matches"),

apps/template/lib/agent/tools/get-recommendations.ts

@@ -23,7 +23,7 @@ export function getRecommendationsTool() {
           return true;
         });
         return {
-          products: products.slice(0, 5).map((product) => ({
+          products: products.slice(0, 6).map((product) => ({
             available: product.availableForSale,
             handle: product.handle,
             image: product.featuredImage?.url ?? null,

apps/template/lib/agent/tools/search-catalog.ts

@@ -15,7 +15,7 @@ export function searchCatalogTool() {
     description: `Search Shopify's native catalog semantically. Prefer this for vague, descriptive, or preference-driven requests.`,
     inputSchema: z.object({
       intent: z.string().optional(),
-      limit: z.number().min(1).max(10).default(5),
+      limit: z.number().min(1).max(10).default(6),
       query: z.string(),
     }),
     execute: async ({ intent, limit, query }) => {

apps/template/lib/agent/tools/search-products.ts

@@ -9,7 +9,7 @@ export function searchProductsTool() {
   return tool({
     description: `Search for products by keyword. Use this for exact product lookups or price-sorted searches.`,
     inputSchema: z.object({
-      limit: z.number().min(1).max(10).default(5),
+      limit: z.number().min(1).max(10).default(6),
       query: z.string(),
       sortKey: z
         .enum(["best-matches", "price-low-to-high", "price-high-to-low"])

apps/template/lib/cart/server.ts

@@ -5,7 +5,7 @@ import {
   gql,
   type I18nConfig,
 } from "@shopify/hydrogen";
-import { revalidateTag, updateTag } from "next/cache";
+import { io, revalidateTag, updateTag } from "next/cache";
 import { cookies, headers } from "next/headers";
 
 import { defaultLocale, getCountryCode, getLanguageCode } from "@/lib/i18n";
@@ -72,6 +72,8 @@ export function buildCartIdSetCookieHeader(id: string): string {
 /** Starts the full-cart read from the request cookie without awaiting it. */
 export function seedCartData() {
   return (async () => {
+    // Hydrogen's createShopifyRequestContext calls crypto.randomUUID(); exclude it from the static shell.
+    await io();
     const i18n = {
       country: getCountryCode(defaultLocale),
       language: getLanguageCode(defaultLocale),