Add AI store assistant with catalogue tool calls

- /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
2026-08-01 13:03:01 -04:00
parent 2ef5639a2e
commit 107959a4c3
34 changed files with 9339 additions and 1166 deletions
@@ -3,6 +3,7 @@
 import React from 'react';
 import './globals.css';
 import { Geist, Geist_Mono } from 'next/font/google';
+import StoreAssistant from '@/components/shopify/store-assistant';

 const geist = Geist({
  subsets: ['latin'],
@@ -23,6 +24,7 @@ export default function RootLayout({
    <html lang="en" className={`${geist.variable} ${geistMono.variable}`}>
      <body className="font-body antialiased bg-background text-foreground m-0 p-0">
        {children}
+        <StoreAssistant />
      </body>
    </html>
  );