How to Build Workflow automation with V0

1CREATE TABLE workflows (
2  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
3  owner_id uuid NOT NULL,
4  name text NOT NULL,
5  description text,
6  is_active boolean DEFAULT false,
7  trigger_type text NOT NULL
8    CHECK (trigger_type IN ('webhook','schedule','db_change')),
9  trigger_config jsonb DEFAULT '{}',
10  created_at timestamptz DEFAULT now(),
11  updated_at timestamptz DEFAULT now()
12);
13
14CREATE TABLE workflow_steps (
15  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
16  workflow_id uuid REFERENCES workflows(id) ON DELETE CASCADE,
17  position int NOT NULL,
18  action_type text NOT NULL
19    CHECK (action_type IN ('http_request','send_email','transform_data','condition','delay','supabase_query')),
20  config jsonb NOT NULL DEFAULT '{}',
21  created_at timestamptz DEFAULT now()
22);
23
24CREATE TABLE workflow_runs (
25  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
26  workflow_id uuid REFERENCES workflows(id) ON DELETE CASCADE,
27  status text DEFAULT 'running'
28    CHECK (status IN ('running','completed','failed')),
29  trigger_data jsonb,
30  started_at timestamptz DEFAULT now(),
31  completed_at timestamptz
32);
33
34CREATE TABLE step_logs (
35  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
36  run_id uuid REFERENCES workflow_runs(id) ON DELETE CASCADE,
37  step_id uuid REFERENCES workflow_steps(id) ON DELETE CASCADE,
38  status text CHECK (status IN ('success','failed','skipped')),
39  input jsonb,
40  output jsonb,
41  error_message text,
42  duration_ms int,
43  executed_at timestamptz DEFAULT now()
44);
45
46CREATE INDEX idx_steps_workflow ON workflow_steps(workflow_id, position);
47CREATE INDEX idx_runs_workflow ON workflow_runs(workflow_id, started_at DESC);

1import { NextRequest, NextResponse } from 'next/server'
2import { createClient } from '@supabase/supabase-js'
3import { Resend } from 'resend'
4
5const supabase = createClient(
6  process.env.NEXT_PUBLIC_SUPABASE_URL!,
7  process.env.SUPABASE_SERVICE_ROLE_KEY!
8)
9const resend = new Resend(process.env.RESEND_API_KEY)
10
11async function executeStep(
12  step: { id: string; action_type: string; config: Record<string, unknown> },
13  context: Record<string, unknown>
14): Promise<Record<string, unknown>> {
15  switch (step.action_type) {
16    case 'http_request': {
17      const { url, method, headers, body } = step.config as {
18        url: string; method: string; headers?: Record<string, string>; body?: string
19      }
20      const res = await fetch(url, { method, headers, body })
21      return { status: res.status, data: await res.json() }
22    }
23    case 'send_email': {
24      const { to, subject, template } = step.config as {
25        to: string; subject: string; template: string
26      }
27      await resend.emails.send({
28        from: 'workflows@yourdomain.com',
29        to,
30        subject,
31        html: template.replace(/\{\{(\w+)\}\}/g, (_, key) =>
32          String(context[key] ?? '')
33        ),
34      })
35      return { sent: true, to }
36    }
37    case 'transform_data': {
38      const { expression } = step.config as { expression: string }
39      const fn = new Function('ctx', `return (${expression})`)
40      return { result: fn(context) }
41    }
42    case 'delay': {
43      const { ms } = step.config as { ms: number }
44      await new Promise((r) => setTimeout(r, Math.min(ms, 10000)))
45      return { delayed: ms }
46    }
47    case 'supabase_query': {
48      const { table, operation, filters, data } = step.config as {
49        table: string; operation: string; filters?: Record<string, unknown>; data?: Record<string, unknown>
50      }
51      let query = supabase.from(table)
52      if (operation === 'select') {
53        const { data: rows } = await query.select('*').match(filters ?? {})
54        return { rows }
55      }
56      if (operation === 'insert') {
57        await query.insert(data ?? {})
58        return { inserted: true }
59      }
60      return {}
61    }
62    default:
63      return {}
64  }
65}
66
67export async function POST(req: NextRequest) {
68  const { workflowId, triggerData } = await req.json()
69
70  const { data: run } = await supabase
71    .from('workflow_runs')
72    .insert({ workflow_id: workflowId, trigger_data: triggerData })
73    .select()
74    .single()
75
76  const { data: steps } = await supabase
77    .from('workflow_steps')
78    .select('*')
79    .eq('workflow_id', workflowId)
80    .order('position')
81
82  let context: Record<string, unknown> = { trigger: triggerData }
83  let failed = false
84
85  for (const step of steps ?? []) {
86    const start = Date.now()
87    try {
88      const output = await executeStep(step, context)
89      context = { ...context, [step.action_type]: output }
90
91      await supabase.from('step_logs').insert({
92        run_id: run!.id,
93        step_id: step.id,
94        status: 'success',
95        input: context,
96        output,
97        duration_ms: Date.now() - start,
98      })
99    } catch (err) {
100      failed = true
101      await supabase.from('step_logs').insert({
102        run_id: run!.id,
103        step_id: step.id,
104        status: 'failed',
105        input: context,
106        error_message: err instanceof Error ? err.message : 'Unknown error',
107        duration_ms: Date.now() - start,
108      })
109    }
110  }
111
112  await supabase
113    .from('workflow_runs')
114    .update({
115      status: failed ? 'failed' : 'completed',
116      completed_at: new Date().toISOString(),
117    })
118    .eq('id', run!.id)
119
120  return NextResponse.json({ runId: run!.id, status: failed ? 'failed' : 'completed' })
121}

1// app/api/webhooks/trigger/[id]/route.ts
2import { NextRequest, NextResponse } from 'next/server'
3import { createClient } from '@supabase/supabase-js'
4
5const supabase = createClient(
6  process.env.NEXT_PUBLIC_SUPABASE_URL!,
7  process.env.SUPABASE_SERVICE_ROLE_KEY!
8)
9
10export async function POST(
11  req: NextRequest,
12  { params }: { params: Promise<{ id: string }> }
13) {
14  const { id } = await params
15  const triggerData = await req.json()
16
17  const { data: workflow } = await supabase
18    .from('workflows')
19    .select('id, is_active, trigger_type')
20    .eq('id', id)
21    .eq('trigger_type', 'webhook')
22    .eq('is_active', true)
23    .single()
24
25  if (!workflow) {
26    return NextResponse.json({ error: 'Workflow not found or inactive' }, { status: 404 })
27  }
28
29  const executeRes = await fetch(
30    `${process.env.NEXT_PUBLIC_APP_URL}/api/workflows/execute`,
31    {
32      method: 'POST',
33      headers: { 'Content-Type': 'application/json' },
34      body: JSON.stringify({ workflowId: id, triggerData }),
35    }
36  )
37
38  const result = await executeRes.json()
39  return NextResponse.json(result)
40}
41
42// vercel.json — add this to the project root
43// { "crons": [{ "path": "/api/cron", "schedule": "*/5 * * * *" }] }

1// Paste this prompt into V0's AI chat:
2// Build a visual workflow builder at app/workflows/[id]/page.tsx with:
3// 1. Install reactflow and add it as a client component
4// 2. Custom node types: TriggerNode (webhook/schedule/db_change with config), ActionNode (http_request/send_email/transform_data/condition/delay/supabase_query)
5// 3. Sidebar with draggable action types that can be dropped onto the canvas
6// 4. Clicking a node opens a Dialog with a dynamic Form based on action_type:
7//    - http_request: Input for URL, Select for method, Textarea for headers JSON, Textarea for body
8//    - send_email: Input for to/subject, Textarea for HTML template with {{variable}} placeholders
9//    - transform_data: Textarea for JavaScript expression
10//    - condition: Input for field, Select for operator, Input for value
11//    - delay: Input for milliseconds
12//    - supabase_query: Input for table, Select for operation, Textarea for filters/data JSON
13// 5. Save Button that persists the node positions and step configs to Supabase
14// 6. shadcn/ui Switch for workflow active toggle
15// 7. Show the webhook URL (for webhook triggers) with copy-to-clipboard Button
16// Use reactflow's built-in edges for connecting nodes.

1// Paste this prompt into V0's AI chat:
2// Build a workflow run history page at app/workflows/[id]/runs/page.tsx with:
3// 1. Server Component fetching all workflow_runs for the workflow, ordered by started_at DESC
4// 2. shadcn/ui Table with columns: Run ID (truncated), Status Badge (running=secondary, completed=default, failed=destructive), Started At, Duration, Steps Passed/Total
5// 3. Clicking a row expands an Accordion showing step_logs for that run
6// 4. Each step log shows: step action_type Badge, status Badge, duration, input (collapsible JSON), output (collapsible JSON), error message if failed
7// 5. Summary Cards at top: total runs, success rate percentage, average duration, runs today
8// 6. Manual trigger Button that executes the workflow with an optional JSON input Dialog
9// 7. Filter by status using Select dropdown
10// Use pre/code blocks for JSON display with syntax highlighting.