How to Build Personalization system with V0

1// Paste this prompt into V0's AI chat:
2// Build a personalization engine. Create a Supabase schema with these tables:
3// 1. user_profiles: id (uuid PK), user_id (uuid FK unique), preferences (jsonb), segments (text[]), created_at (timestamptz), updated_at (timestamptz)
4// 2. events: id (uuid PK), user_id (uuid FK), event_type (text), event_data (jsonb), page_url (text), created_at (timestamptz)
5// 3. personalization_rules: id (uuid PK), name (text), segment_criteria (jsonb), content_variant (jsonb), priority (integer), is_active (boolean), created_at (timestamptz)
6// 4. ab_tests: id (uuid PK), rule_id (uuid FK), variant_key (text), impressions (integer default 0), conversions (integer default 0), created_at (timestamptz)
7// Enable pgvector extension and add: user_embeddings (id uuid PK, user_id uuid FK, embedding vector(1536), updated_at timestamptz)
8// Add RLS policies so only authenticated users can read their own profiles.
9// Generate SQL migration and TypeScript types.

1import { NextRequest, NextResponse } from 'next/server'
2import { createClient } from '@supabase/supabase-js'
3
4const supabase = createClient(
5  process.env.SUPABASE_URL!,
6  process.env.SUPABASE_SERVICE_ROLE_KEY!
7)
8
9export async function POST(req: NextRequest) {
10  const { user_id, event_type, event_data, page_url } = await req.json()
11
12  if (!user_id || !event_type) {
13    return NextResponse.json(
14      { error: 'user_id and event_type are required' },
15      { status: 400 }
16    )
17  }
18
19  const { error } = await supabase.from('events').insert({
20    user_id,
21    event_type,
22    event_data: event_data ?? {},
23    page_url: page_url ?? null,
24  })
25
26  if (error) {
27    return NextResponse.json({ error: error.message }, { status: 500 })
28  }
29
30  return NextResponse.json({ success: true })
31}

1import { NextRequest, NextResponse } from 'next/server'
2import { createClient } from '@supabase/supabase-js'
3
4export const runtime = 'edge'
5
6export async function GET(req: NextRequest) {
7  const supabase = createClient(
8    process.env.SUPABASE_URL!,
9    process.env.SUPABASE_SERVICE_ROLE_KEY!
10  )
11
12  const userId = req.nextUrl.searchParams.get('user_id')
13  if (!userId) {
14    return NextResponse.json({ error: 'user_id required' }, { status: 400 })
15  }
16
17  const { data: profile } = await supabase
18    .from('user_profiles')
19    .select('segments, preferences')
20    .eq('user_id', userId)
21    .single()
22
23  if (!profile) {
24    return NextResponse.json({ variant: null, fallback: true })
25  }
26
27  const { data: rules } = await supabase
28    .from('personalization_rules')
29    .select('id, name, segment_criteria, content_variant, priority')
30    .eq('is_active', true)
31    .order('priority', { ascending: false })
32
33  const matchedRule = rules?.find((rule) => {
34    const criteria = rule.segment_criteria as { segments?: string[] }
35    return criteria.segments?.some((s: string) => profile.segments?.includes(s))
36  })
37
38  if (matchedRule) {
39    await supabase.rpc('increment_impressions', { rule_id: matchedRule.id })
40  }
41
42  return NextResponse.json({
43    variant: matchedRule?.content_variant ?? null,
44    rule_name: matchedRule?.name ?? null,
45    fallback: !matchedRule,
46  })
47}

1// Paste this prompt into V0's AI chat:
2// Build a personalization rule management dashboard at app/dashboard/personalization/page.tsx.
3// Requirements:
4// - Fetch all personalization_rules and display in a shadcn/ui Table
5// - Each row shows: name, target segments (as Badges), priority (number), is_active (Switch toggle), created_at
6// - Add a "Create Rule" Button that opens a Sheet from the right side
7// - Sheet contains: Input for rule name, Select for target segments (multi-select), JSON editor for content_variant, Slider for priority (1-100)
8// - Switch toggles should immediately update is_active via Server Action
9// - Add Tabs at the top: "Rules" and "A/B Tests"
10// - A/B Tests tab shows a Table with variant_key, impressions, conversions, conversion rate, and a Badge showing statistical significance (green if >95% confidence)
11// - Use Recharts BarChart to visualize conversion rates across variants
12// - Use Server Components for data fetching, 'use client' only for interactive elements

1// Paste this prompt into V0's AI chat:
2// Create a Supabase SQL migration for segment computation:
3// 1. A database function compute_user_segments(target_user_id uuid) that:
4//    - Counts events by type for the user in the last 30 days
5//    - Assigns segments based on thresholds: 'power_user' (50+ events), 'active' (10-49 events), 'new_user' (<10 events)
6//    - Checks event_data for purchase events to assign 'buyer' segment
7//    - Updates user_profiles.segments array and updated_at timestamp
8// 2. A wrapper function recompute_all_segments() that loops through all users with recent events
9// 3. A pg_cron job that runs recompute_all_segments() every hour
10// 4. An RPC function increment_impressions(rule_id uuid) that atomically increments ab_tests.impressions
11// Also create an API route at app/api/segments/recompute/route.ts that manually triggers recomputation for testing.

1'use client'
2
3import { useCallback, useRef, useEffect } from 'react'
4
5interface TrackEvent {
6  event_type: string
7  event_data?: Record<string, unknown>
8  page_url?: string
9}
10
11export function useEventTracker(userId: string | null) {
12  const queue = useRef<TrackEvent[]>([])
13
14  const flush = useCallback(async () => {
15    if (!userId || queue.current.length === 0) return
16    const events = [...queue.current]
17    queue.current = []
18
19    await Promise.allSettled(
20      events.map((event) =>
21        fetch('/api/events/track', {
22          method: 'POST',
23          headers: { 'Content-Type': 'application/json' },
24          body: JSON.stringify({ user_id: userId, ...event }),
25        })
26      )
27    )
28  }, [userId])
29
30  useEffect(() => {
31    const interval = setInterval(flush, 5000)
32    return () => {
33      clearInterval(interval)
34      flush()
35    }
36  }, [flush])
37
38  const track = useCallback(
39    (event_type: string, event_data?: Record<string, unknown>) => {
40      queue.current.push({
41        event_type,
42        event_data,
43        page_url: typeof window !== 'undefined' ? window.location.pathname : undefined,
44      })
45    },
46    []
47  )
48
49  return { track }
50}