Claude for E-commerce: Personalized Product Recommendations with Session Context

# Why Use Claude for E-commerce Personalization? In e-commerce, personalized product recommendations drive up to 35% of revenue, but generic algorithms often miss nuanced user intent. Claude AI excels here with its superior reasoning over session data—capturing views, searches, cart abandons, and behaviors in context. Unlike rule-based systems, Claude analyzes sequences holistically, generating tailored suggestions like "Users who viewed X and hesitated on Y often love Z for its similar features at a better price." This tutorial builds a production-ready system: session tracking in Next.js, Claude-powered analysis via API, and seamless frontend rendering. We'll use Claude 3.5 Sonnet for its balance of speed and reasoning depth. ## Prerequisites - [Anthropic API key](https://console.anthropic.com/) (free tier suffices for testing) - Node.js 18+ and a Next.js 14+ project (`npx create-next-app@latest`) - Basic familiarity with React hooks and server actions - Optional: Vercel for deployment, Redis for session storage Install dependencies: ```bash npm install @anthropic-ai/sdk npm install cookies-next # for session handling ``` ## Step 1: Model Session Data Structure Capture granular user interactions to feed Claude. Define a session as an array of events: ```typescript interface Product { id: string; name: string; category: string; price: number; description: string; image: string; } type EventType = 'view' | 'search' | 'add_to_cart' | 'remove_from_cart' | 'purchase'; interface SessionEvent { type: EventType; product?: Product; query?: string; timestamp: number; } type SessionContext = { events: SessionEvent[]; userId?: string; totalDuration: number; }; ``` Track events client-side with a custom hook: ```tsx // hooks/useSessionTracker.ts import { useEffect } from 'react'; import { setCookie } from 'cookies-next'; export const useSessionTracker = (sessionId: string) => { useEffect(() => { const events: SessionEvent[] = JSON.parse(localStorage.getItem(`session_${sessionId}`) || '[]'); const track = (event: SessionEvent) => { events.push({ ...event, timestamp: Date.now() }); localStorage.setItem(`session_${sessionId}`, JSON.stringify(events)); setCookie('sessionId', sessionId, { maxAge: 3600 * 24 }); }; // Expose track to window for analytics (window as any).trackSession = track; return () => { // Sync to server on unmount }; }, [sessionId]); }; ``` Call `window.trackSession({ type: 'view', product })` on product hovers/clicks. ## Step 2: Initialize Claude API Client Create a server-side client for secure API calls: ```ts // lib/claude.ts import Anthropic from '@anthropic-ai/sdk'; const anthropic = new Anthropic({ apiKey: process.env.ANTHROPIC_API_KEY!, }); export async function getRecommendations( session: SessionContext, productCatalog: Product[] ): Promise<{ products: Product[]; reasons: string[] }> { const prompt = buildRecommendationPrompt(session, productCatalog); const response = await anthropic.messages.create({ model: 'claude-3-5-sonnet-20240620', max_tokens: 1000, messages: [{ role: 'user', content: prompt }], }); // Parse JSON from response const result = JSON.parse(response.content[0].text); return result; } function buildRecommendationPrompt(session: SessionContext, catalog: Product[]) { return `You are an e-commerce recommendation expert. Analyze this user session: Session: ${JSON.stringify(session, null, 2)} Catalog (recommend from these only): ${JSON.stringify(catalog.slice(0, 50), null, 2)} Provide 3-5 personalized product recommendations as JSON: { "products": [ { "id": "prod1", "reason": "brief explanation" } ], "reasons": ["overall summary"] } Few-shot: User viewed shoes, searched 'running', abandoned cart. Rec: Trail runners - matches search+intent.`; } ``` **Prompt Tips for Claude:** - Use XML-like structure for complex outputs: `<recommendations>...</recommendations>` - Limit context to 20-50 events; summarize older ones with Claude recursively - Sonnet handles 200K tokens—perfect for long sessions ## Step 3: Build Next.js API Route Expose recommendations via `/api/recommendations`: ```ts // app/api/recommendations/route.ts import { NextRequest, NextResponse } from 'next/server'; import { getCookie, hasCookie } from 'cookies-next'; import { getRecommendations } from '@/lib/claude'; const SAMPLE_CATALOG: Product[] = [ /* load from DB */ ]; export async function POST(request: NextRequest) { try { const sessionId = getCookie('sessionId', { req, res }) as string; if (!sessionId) return NextResponse.json({ error: 'No session' }, { status: 400 }); // Fetch session from DB/Redis (pseudo) const session: SessionContext = await fetchSession(sessionId); const recs = await getRecommendations(session, SAMPLE_CATALOG); return NextResponse.json(recs); } catch (error) { return NextResponse.json({ error: 'Internal error' }, { status: 500 }); } } ``` For production, use Upstash Redis or Prisma for sessions: ```ts // Persist session import { Redis } from '@upstash/redis'; const redis = new Redis({ /* creds */ }); await redis.set(`session:${sessionId}`, JSON.stringify(session), { ex: 86400 }); ``` ## Step 4: Frontend Integration Fetch and display recs in a product page or sidebar: ```tsx // components/Recommendations.tsx import { useSessionTracker } from '@/hooks/useSessionTracker'; import { useEffect, useState } from 'react'; export default function Recommendations({ productsViewed }: { productsViewed: Product[] }) { const [recs, setRecs] = useState<any>(null); const sessionId = typeof window !== 'undefined' ? localStorage.getItem('sessionId') || crypto.randomUUID() : null; useSessionTracker(sessionId!); useEffect(() => { fetch('/api/recommendations', { method: 'POST' }) .then(res => res.json()) .then(setRecs); }, [sessionId]); if (!recs) return <div>Loading recs...</div>; return ( <div className="recommendations"> <h3>Based on your session:</h3> <ul> {recs.products.map((rec: any) => ( <li key={rec.id}> <img src={SAMPLE_CATALOG.find(p => p.id === rec.id)?.image} /> {rec.reason} </li> ))} </ul> <p>{recs.reasons[0]}</p> </div> ); } ``` Embed in `/products/[id]/page.tsx`: ```tsx <Recommendations productsViewed={viewedProducts} /> ``` Trigger tracks on interactions: ```tsx <img src={product.image} onMouseEnter={() => (window as any).trackSession({ type: 'view', product })} /> <button onClick={() => trackAddToCart(product)}>Add to Cart</button> ``` ## Step 5: Advanced Optimizations ### Multi-Turn Context For returning users, append past sessions: ```ts // In prompt Past sessions: ${JSON.stringify(prevSessions)} Current: ${JSON.stringify(current)} ``` Claude's memory shines—"Notice user prefers eco-friendly after last purchase." ### RAG with Product Catalog Use MCP servers or Claude's tool use for dynamic catalogs: ```ts // Extend with tools messages: [{ role: 'user', content: prompt, tools: [{ name: 'search_catalog', description: '...' }] }] ``` ### Rate Limiting & Caching ```ts // In API import { cache } from 'react'; const getCachedRecs = cache(async (sessionHash: string) => { /* call Claude */ }); ``` Cache 5-10 mins; refresh on new events. Costs: ~$0.003/1K tokens (Sonnet). ### A/B Testing Compare Claude vs. collaborative filtering: - Track click-through rates (CTR) - Use PostHog or Vercel Analytics Expected uplift: 20-50% CTR from contextual reasoning. ## Security & Edge Cases - Sanitize session data (no PII) - Fallback to top-sellers if Claude fails - Rate limit API: 100 req/min per user - GDPR: Anonymize sessions ## Measuring Success | Metric | Baseline | Claude Expected | |--------|----------|-----------------| | CTR | 2-5% | 10-20% | | Conversion | 1-2% | 3-5% | | Revenue/Visitor | $0.50 | $1.50+ | Track with: ```ts event('recommendation_click', { product_id: rec.id, session_id }); ``` ## Deploy & Scale Deploy to Vercel: `vercel --prod`. Env vars for API key. For high traffic, queue jobs with BullMQ. Claude scales effortlessly—handle Black Friday spikes with Opus for complex reasoning. ## Conclusion This setup turns Claude into your e-commerce secret weapon: session-aware, explainable recs that boost engagement. Start prototyping today—fork the [GitHub repo](https://github.com/example/claude-ecom-recs) (imagine one exists). Experiment with prompts; Claude's flexibility rewards iteration. Questions? Drop in [Claude Directory Discord](https://claudedirectory.com/discord). *Word count: ~1450*