How to Build Lead generation tool with V0

1// Paste this prompt into V0's AI chat:
2// Build a lead generation tool. Create a Supabase schema:
3// 1. forms: id (uuid PK), name (text), slug (text UNIQUE), steps (jsonb), scoring_rules (jsonb), redirect_url (text), owner_id (uuid FK to auth.users)
4// 2. leads: id (uuid PK), form_id (uuid FK to forms), email (text), name (text), company (text), responses (jsonb), score (int DEFAULT 0), status (text DEFAULT 'new'), source (text), utm_params (jsonb), created_at (timestamptz)
5// 3. pipeline_stages: id (uuid PK), name (text), position (int), color (text)
6// 4. lead_stage: lead_id (uuid FK to leads), stage_id (uuid FK to pipeline_stages), moved_at (timestamptz), moved_by (uuid FK to auth.users)
7// Add RLS policies. Seed pipeline_stages with: New, Contacted, Qualified, Proposal, Won, Lost.
8// Generate SQL and TypeScript types.

1// Paste this prompt into V0's AI chat:
2// Create a multi-step lead form at app/f/[slug]/page.tsx.
3// Requirements:
4// - Fetch the form definition by slug from Supabase (static generation with generateStaticParams)
5// - Parse the steps jsonb to render each step's fields dynamically
6// - Use shadcn/ui Input, Select, RadioGroup based on field type from the steps config
7// - Show a Progress bar at the top showing step X of Y
8// - Navigation: 'Next' Button advances, 'Back' Button goes back
9// - On final step, show a 'Submit' Button that POSTs to /api/leads with all responses + UTM params from URL searchParams
10// - After submit, redirect to the form's redirect_url or show a thank-you Card
11// - Capture utm_source, utm_medium, utm_campaign, utm_content from the page URL automatically
12// - Make it responsive and mobile-friendly with max-w-lg centered layout

1import { createClient } from '@supabase/supabase-js'
2import { NextRequest, NextResponse } from 'next/server'
3
4const supabase = createClient(
5  process.env.SUPABASE_URL!,
6  process.env.SUPABASE_SERVICE_ROLE_KEY!
7)
8
9function calculateScore(
10  responses: Record<string, string>,
11  rules: { field: string; value: string; points: number }[]
12): number {
13  let score = 0
14  for (const rule of rules) {
15    if (responses[rule.field] === rule.value) {
16      score += rule.points
17    }
18  }
19  return score
20}
21
22function getTier(score: number): string {
23  if (score >= 80) return 'hot'
24  if (score >= 40) return 'warm'
25  return 'cold'
26}
27
28export async function POST(req: NextRequest) {
29  const { form_id, email, name, company, responses, source, utm_params } =
30    await req.json()
31
32  const { data: form } = await supabase
33    .from('forms')
34    .select('scoring_rules')
35    .eq('id', form_id)
36    .single()
37
38  const score = form?.scoring_rules
39    ? calculateScore(responses, form.scoring_rules)
40    : 0
41
42  const { data: lead, error } = await supabase
43    .from('leads')
44    .insert({
45      form_id,
46      email,
47      name,
48      company,
49      responses,
50      score,
51      status: getTier(score),
52      source: source || 'direct',
53      utm_params: utm_params || {},
54    })
55    .select()
56    .single()
57
58  if (error) {
59    return NextResponse.json({ error: error.message }, { status: 500 })
60  }
61
62  // Assign to 'New' pipeline stage
63  const { data: newStage } = await supabase
64    .from('pipeline_stages')
65    .select('id')
66    .eq('name', 'New')
67    .single()
68
69  if (newStage) {
70    await supabase.from('lead_stage').insert({
71      lead_id: lead.id,
72      stage_id: newStage.id,
73      moved_at: new Date().toISOString(),
74    })
75  }
76
77  return NextResponse.json({ success: true, lead_id: lead.id })
78}

1// Paste this prompt into V0's AI chat:
2// Create a pipeline Kanban board at app/leads/page.tsx.
3// Requirements:
4// - Fetch all pipeline_stages ordered by position, with leads in each stage
5// - Display as horizontal columns (one per stage) with the stage name and count as header
6// - Each lead shows as a shadcn/ui Card: name, company, email, score Badge (hot=red, warm=yellow, cold=blue), source, created_at
7// - Clicking a lead Card opens a Sheet sidebar with full details: all form responses, score breakdown, stage history timeline, and notes
8// - Add a Select dropdown on each lead to move it to a different pipeline stage (Server Action updates lead_stage)
9// - Add filters at the top: search Input, score tier Select (hot/warm/cold), source Select, date range
10// - Show total lead counts and conversion rate (Won / total) in summary Cards above the board
11// - Mobile layout: stack columns vertically with collapsible sections

1// Paste this prompt into V0's AI chat:
2// Create a form builder at app/forms/[id]/edit/page.tsx.
3// Requirements:
4// - Fetch the form by ID, show current steps and fields
5// - Each step is a Card with: step title Input, list of fields below
6// - Each field has: label Input, type Select (text/email/select/radio/number), options Textarea (for select/radio, comma-separated), required Switch
7// - Add Field Button appends a new field to the current step
8// - Add Step Button appends a new step
9// - Scoring Rules section: for each select/radio field, show a Table where you assign points to each option value
10// - Save Button uses a Server Action to update the form's steps and scoring_rules jsonb
11// - Preview Button opens the form in a new tab at /f/[slug]
12// - Use shadcn/ui Accordion for collapsible steps, Switch for required toggle, and Separator between sections