How to Build a Workflow Automation with Lovable

1Create a workflow automation schema in Supabase.
2
3Tables:
4
51. workflows:
6   id uuid primary key default gen_random_uuid()
7   name text not null
8   description text
9   status text default 'draft' — 'draft', 'active', 'paused', 'archived'
10   steps jsonb not null default '{"nodes": [], "edges": []}'
11   trigger_config jsonb default '{}' — { type: 'webhook'|'cron'|'manual', cron_expression?: string, webhook_secret?: string }
12   created_by uuid references auth.users(id)
13   last_run_at timestamptz
14   run_count integer default 0
15   created_at timestamptz default now()
16   updated_at timestamptz default now()
17
182. workflow_runs:
19   id uuid primary key default gen_random_uuid()
20   workflow_id uuid references workflows(id) on delete cascade
21   status text default 'running' — 'running', 'completed', 'failed', 'cancelled'
22   trigger_type text — 'webhook', 'cron', 'manual'
23   trigger_payload jsonb
24   step_traces jsonb default '[]' — array of { node_id, status, started_at, finished_at, input, output, error }
25   error_message text
26   started_at timestamptz default now()
27   finished_at timestamptz
28   duration_ms integer
29
303. workflow_triggers:
31   id uuid primary key default gen_random_uuid()
32   workflow_id uuid references workflows(id) on delete cascade
33   trigger_type text not null
34   cron_job_name text
35   webhook_path text unique
36   is_active boolean default true
37   created_at timestamptz default now()
38
39RLS:
40- workflows: authenticated users read/write their own (created_by = auth.uid())
41- workflow_runs: authenticated users read runs of their own workflows
42- workflow_triggers: authenticated users read/write their own workflow triggers
43
44Indexes:
45- workflow_runs(workflow_id, started_at DESC)
46- workflow_runs(status)
47
48Step node types (stored in steps.nodes[].type):
49- 'http_request': { method, url, headers, body_template }
50- 'supabase_query': { table, operation, filters, limit }
51- 'condition': { expression } — evaluates a JS expression against run_context
52- 'delay': { duration_seconds }
53- 'send_email': { to_template, subject_template, body_template }
54- 'transform': { expression } — transforms data between steps

1Create a Supabase Edge Function at supabase/functions/execute-workflow/index.ts.
2
3The function accepts POST with body: { workflow_id: string, run_id: string, trigger_payload: object }
4
5Execution engine logic:
6
71. Fetch the workflow by workflow_id. Get steps.nodes and steps.edges.
82. Fetch the workflow_runs row by run_id.
93. Build a run_context object: { trigger: trigger_payload, steps: {} }
10   - {{trigger.field}} resolves to trigger_payload.field
11   - {{steps.nodeId.output.field}} resolves to run_context.steps[nodeId].output.field
12
134. Find the entry node: the node that has no incoming edges.
14
155. Process nodes in order. For each node:
16   a. Log start: append to step_traces with status='running', started_at
17   b. Interpolate all config string values by replacing {{...}} placeholders with run_context values
18   c. Execute based on node.type:
19
20   'http_request': fetch(config.url, { method, headers, body: JSON.stringify(interpolated_body) })
21     - Output: { status, body: await response.json() }
22
23   'supabase_query': use service role client to call .from(config.table).select/insert/update based on operation
24     - Output: { rows, count }
25
26   'condition': evaluate a simple expression (e.g. '{{steps.step1.output.status}} === 200')
27     - Replace placeholders, then use a safe evaluator (not eval — use a simple comparison parser)
28     - Output: { result: boolean }
29     - Next step: follow the edge where condition matches the result
30
31   'delay': await new Promise(resolve => setTimeout(resolve, config.duration_seconds * 1000))
32     - Note: max Edge Function timeout is 150s on paid Supabase. For longer delays, schedule a new run.
33     - Output: { delayed_ms }
34
35   'send_email': call the send-email Edge Function via fetch (if it exists) or direct Resend API
36     - Output: { message_id }
37
38   d. Store output in run_context.steps[node.id] = { output }
39   e. Update step_traces with status='completed', finished_at, output
40   f. On error: update step_trace with status='failed', error message. Set run status='failed'.
41
426. Find the next node by looking up edges where from = current_node_id
43   - For condition nodes: filter edges by edge.condition matching the output.result
44   - For all other nodes: take the single outgoing edge
45
467. When no more nodes to process: update workflow_runs.status='completed', finished_at, duration_ms
478. Update workflows.last_run_at and increment run_count

1// supabase/functions/trigger-webhook/index.ts
2import { serve } from 'https://deno.land/std@0.168.0/http/server.ts'
3import { createClient } from 'https://esm.sh/@supabase/supabase-js@2'
4
5const corsHeaders = {
6  'Access-Control-Allow-Origin': '*',
7  'Access-Control-Allow-Headers': 'authorization, x-client-info, content-type, x-webhook-signature',
8}
9
10serve(async (req: Request) => {
11  if (req.method === 'OPTIONS') return new Response('ok', { headers: corsHeaders })
12
13  const url = new URL(req.url)
14  const workflowPath = url.searchParams.get('path')
15
16  const supabase = createClient(
17    Deno.env.get('SUPABASE_URL') ?? '',
18    Deno.env.get('SUPABASE_SERVICE_ROLE_KEY') ?? ''
19  )
20
21  const { data: trigger } = await supabase
22    .from('workflow_triggers')
23    .select('workflow_id, workflow:workflows(id, status, trigger_config)')
24    .eq('webhook_path', workflowPath)
25    .eq('is_active', true)
26    .single()
27
28  if (!trigger?.workflow_id) {
29    return new Response(JSON.stringify({ error: 'Webhook not found' }), { status: 404, headers: corsHeaders })
30  }
31
32  const workflow = trigger.workflow as { id: string; status: string; trigger_config: { webhook_secret?: string } }
33
34  if (workflow.status !== 'active') {
35    return new Response(JSON.stringify({ error: 'Workflow is not active' }), { status: 400, headers: corsHeaders })
36  }
37
38  if (workflow.trigger_config?.webhook_secret) {
39    const signature = req.headers.get('x-webhook-signature') ?? ''
40    const body = await req.text()
41    const encoder = new TextEncoder()
42    const keyData = encoder.encode(workflow.trigger_config.webhook_secret)
43    const key = await crypto.subtle.importKey('raw', keyData, { name: 'HMAC', hash: 'SHA-256' }, false, ['verify'])
44    const sigBytes = new Uint8Array(signature.match(/.{2}/g)!.map((b) => parseInt(b, 16)))
45    const valid = await crypto.subtle.verify('HMAC', key, sigBytes, encoder.encode(body))
46    if (!valid) return new Response(JSON.stringify({ error: 'Invalid signature' }), { status: 401, headers: corsHeaders })
47  }
48
49  const payload = req.method === 'POST' ? await req.json().catch(() => ({})) : {}
50
51  const { data: run } = await supabase.from('workflow_runs').insert({
52    workflow_id: workflow.id,
53    trigger_type: 'webhook',
54    trigger_payload: payload,
55    status: 'running',
56  }).select().single()
57
58  if (!run) return new Response(JSON.stringify({ error: 'Failed to create run' }), { status: 500, headers: corsHeaders })
59
60  await fetch(`${Deno.env.get('SUPABASE_URL')}/functions/v1/execute-workflow`, {
61    method: 'POST',
62    headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${Deno.env.get('SUPABASE_SERVICE_ROLE_KEY')}` },
63    body: JSON.stringify({ workflow_id: workflow.id, run_id: run.id, trigger_payload: payload }),
64  })
65
66  return new Response(JSON.stringify({ run_id: run.id }), { headers: corsHeaders })
67})

1Build a workflow builder page at src/pages/WorkflowBuilder.tsx.
2
3Page layout:
4- Top bar: workflow name Input, status Badge, Save Button, Test Run Button
5- Main area: ordered list of step Cards
6
7Each step Card shows:
8- Step number and type Badge (HTTP, Query, Condition, Delay, Email)
9- Step name Input
10- Type-specific config fields:
11  - HTTP: URL Input, method Select (GET/POST/PUT/DELETE), Headers Textarea (JSON), Body Textarea
12  - Query: table Input, operation Select (select/insert/update/delete), filters Textarea
13  - Condition: expression Textarea with helper text showing available {{variables}}
14  - Delay: duration_seconds Input with helper 'Max 120s in Edge Functions'
15  - Email: to Input, subject Input, body Textarea
16- Between cards: a connector line with an 'Add Step' Button (adds after this step)
17- Remove step Button (trash icon) in the card header
18- Steps are reorderable with up/down arrow buttons
19
20Trigger configuration section (above steps):
21- Trigger type Select: Manual, Webhook, Cron
22- Webhook trigger shows the public webhook URL (trigger-webhook Edge Function URL + ?path=webhook_path)
23- Cron trigger shows a cron expression Input with a human-readable preview
24
25When Save is clicked:
26- Validate all required fields
27- Build the steps JSONB: nodes array with sequential edges (each step connects to the next)
28- Save to workflows table via Supabase update
29
30Test Run Button:
31- Opens a Dialog with a JSON editor for test trigger_payload
32- On confirm: creates a workflow_runs row and calls execute-workflow
33- Navigates to /workflows/:id/runs/:run_id after submission

1Build a run history viewer.
2
31. src/pages/WorkflowRuns.tsx — run list:
4   - DataTable with columns: Run ID (first 8 chars), Status Badge (green=completed, red=failed, blue=running), Trigger Type, Started At, Duration
5   - Filter by status using a Select above the table
6   - Clicking a row navigates to /workflows/:id/runs/:run_id
7   - Auto-refresh running runs every 3 seconds using useEffect with a setInterval
8
92. src/pages/WorkflowRunDetail.tsx — run detail:
10   - Header: status Badge, trigger type, started/finished timestamps, total duration
11   - Trigger Payload Card: shows the JSON that triggered the run in a code block
12   - Steps Accordion (shadcn/ui Accordion):
13     - One AccordionItem per step trace
14     - Trigger: step name + type Badge + status icon (checkmark, X, clock)
15     - Content: two columns — Input JSON and Output JSON in monospace code blocks
16     - Failed steps show the error message in a destructive Alert
17   - 'Re-run Workflow' Button: creates a new run with the same trigger payload
18   - For running workflows: show a progress indicator and auto-expand the currently executing step