Dynamic Visitor Context: Real-World Intelligence

What It Does

Instead of static mock context (like "Chicago, IL, rainy weather"), the system now automatically detects:

• Location - IP-based city/state detection (no permission needed)
• Weather - Real-time weather conditions for visitor's location
• Time of Day - Timezone-aware morning/afternoon/evening/night
• Device Type - Mobile, tablet, or desktop detection
• Browsing Behavior - Session tracking to infer urgency and interests
• Optional Precise Location - Browser geolocation with user permission

Why It Matters

Context transforms generic product recommendations into personalized experiences. A visitor in rainy San Francisco at 6 PM gets different suggestions than someone in sunny Miami at 9 AM. The system works automatically—no user configuration required.

Visual Features

• Weather Icons - Dynamic icons for sunny, cloudy, rain, snow conditions
• Time Icons - Sun, moon, and horizon icons for time of day
• Urgency Badges - Color-coded badges (red=high, amber=medium, green=low)
• Location Display - Map pin icon with city/state format
• Responsive Design - Adapts to mobile, tablet, and desktop layouts

Data Storage

• SessionStorage - Location and behavior data (clears on close)
• No Database - Context never stored in Supabase or any database
• No Analytics - No tracking pixels, no analytics events
• IP Location - Server-side only, not stored on client

User Control

• URL Parameters - Override context for testing: ?weather=rain&location=Chicago,IL
• Geolocation Permission - User can deny and system still works with IP location
• Session-Based - New session = fresh context (no memory across visits)

React Hook: useVisitorContext

import { useVisitorContext } from '@/lib/context/useVisitorContext';

function MyComponent() {
  const { context, loading, error } = useVisitorContext({
    useIPLocation: true,    // Enable IP-based location
    useWeather: true,       // Enable weather detection
    useGeolocation: false,  // Opt-in geolocation (default: false)
  });

  if (loading) return <div>Loading...</div>;
  
  return (
    <div>
      <p>Location: {context.location}</p>
      <p>Weather: {context.weather}</p>
      <p>Time: {context.timeOfDay}</p>
    </div>
  );
}

Server-Side: buildServerContext

import { buildServerContext } from '@/lib/context/visitorContext';
import { NextRequest } from 'next/server';

export async function GET(request: NextRequest) {
  const context = await buildServerContext(request, {
    useIPLocation: true,
    useWeather: true,
  });
  
  return Response.json({ context });
}

API Routes

• GET /api/context/location - Returns visitor location from IP
• GET /api/context/weather?lat={lat}&lon={lon} - Returns weather for coordinates
• GET /api/context/weather?location={city,state} - Returns weather for location name

What Each Version Gets

• All Versions - Full context detection (IP location, weather, time, device, behavior)
• All Versions - ContextBanner component for visual context display
• All Versions - Automatic context integration in layout generation
• All Versions - Privacy-first session-based tracking