Three changes needed to run against a real storefront rather than mock.shop.
Storefront API version 2025-07 -> 2026-07. Verified before switching: the
API validates the version segment (a bogus one returns NOT_FOUND), and the
fields this app selects all still resolve at 2026-07 — including the two
deprecated ones, ProductOption.values and CartCost.totalTaxAmount, and the
classic customer account mutations.
BREAKING (config): NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN is now
NEXT_PUBLIC_SHOPIFY_PUBLIC_ACCESS_TOKEN. Deploy environments must set the
new name *before* the next build — NEXT_PUBLIC_* values are inlined at
build time, so a stale name silently degrades to a tokenless client and
real-store queries start failing.
Works around a bug in this preview build of @shopify/hydrogen: the client
tags every request with X-Hydrogen-Version, which the Storefront API does
not list in its CORS access-control-allow-headers. Browsers reject the
preflight, fetch throws, and hydrogen reports the generic "SFAPI request
failed". Confirmed by isolating the single header in the browser against a
real store: without it the request reaches the server (401 on a dummy
token), with it fetch throws TypeError: Failed to fetch. This never showed
up on mock.shop, which answers access-control-allow-headers: *.
The header is stripped in the browser only, inside the fetch wrapper the
client already owns; server-side requests are not subject to CORS and keep
sending it. Remove once the API allows the header, or once these queries
move server-side — which is the better fix, and what hydrogen's own
guidance recommends for browser UI.
Verified against a real store: product grid, search (519 results),
product detail with variants, and cartCreate all succeed.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01JaxgqPbFxLsSuLPZom2kdC
- Gate the assistant on NEXT_PUBLIC_ENABLE_AI=1 (UI only; the /api/chat
route still responds if called directly)
- Chat model is openai/gpt-5.6-luna-pro with reasoning requested and
sendReasoning enabled, rendered via the Reasoning component
- Suggestion chips and reasoning come from ai-elements; attachments gain
hover-card previews, left alignment, and render under the user message
- Launcher: plain Button when closed, magicui RainbowButton when open
- Tool results replace the collapsible Tool UI with a shimmer while
running and a muted icon + summary line after, plus product previews
- Commerce icons in place of the folder icon for collections
- Add a thin announcement bar above the header; footer splits links and
socials onto separate rows and clears the launcher corner
- Add the shadcn base layer so Tailwind v4's bare `border` picks up the
theme colour instead of currentColor
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016jWbNNJLksC1QG8z8845FX
- /api/chat streams via AI SDK v7 through OpenRouter (OPENROUTER_API_KEY),
with a store-specific system prompt and five read-only tools:
searchCatalogue, getProductDetails, listCollections,
getCollectionProducts, browseProducts
- Sidebar assistant on the right that opens from a launcher and expands,
built on ai-elements (conversation, message, prompt-input, tool) with
shimmer on in-flight tool calls
- Extract services/shopify/catalog.ts so the Storefront fetchers have no
React imports and can run in a Route Handler; the client hooks now
re-export from it
- ai-elements pulled in the canonical shadcn primitives, replacing the
hand-rolled command/dialog/button variants; search dialog moved to the
cmdk-based Command and CommandDialog forwards shouldFilter
- Pin shiki to ^3.19.0 to match streamdown and drop the duplicate copy
- Add .env.example documenting the required env vars
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016jWbNNJLksC1QG8z8845FX
