DEVOPS

Hold Vercel preview promotion on unreviewed visual diffs

Captures screenshots of key pages on each Vercel preview, diffs them against the production baseline.

CategoryDevOps
Enginesim
Difficultyadvanced
Triggerevent
Steps5
Setup~25 min

How it runs

The automated pipeline, trigger to output.

  • TriggerVercel preview deployment readyVercelVercel
  • ActionScreenshot key pages on previewBrowserbase
  • LogicVisual diff exceeds threshold?
  • ActionRequest approval in SlackSlack
  • OutputPromote deployment on approvalVercelVercel

What it does

This workflow catches unintended UI changes before they ship. For each preview, it screenshots a set of key pages, compares them pixel-by-pixel against the current production baseline, and measures the change. Small diffs auto-approve and promote. Diffs above your threshold are paused: the workflow posts the before/after images to Slack with approve and reject buttons, and promotion only proceeds on human approval.

When to use it

Use it when visual regressions are a real risk and you want a human in the loop only when the UI actually changed. It keeps routine deploys fast while forcing review of meaningful layout or styling shifts.

How it works

  1. 1Vercel fires a deployment.ready webhook for a preview build.
  2. 2A headless browser captures screenshots of the configured key pages.
  3. 3The flow diffs each screenshot against the stored production baseline.
  4. 4A branch checks whether any diff exceeds the change threshold.
  5. 5If exceeded, it posts the visual diffs to Slack for approve/reject and gates promotion on the response.
  6. 6On approval or a sub-threshold diff, it promotes the deployment via the Vercel API.

Set it up

What you configure once, before turning it on.

  1. 1
    Connect VercelDeploys, runtime logs, analytics.
  2. 2
    Connect BrowserbaseHeadless browsers, sessions, replays.
  3. 3
    Connect SlackChannels, DMs, threads, mentions.
  4. 4
    Set each agent's modelWe leave models unset so you pick the tier — fast + cheap, or top-quality.
  5. 5
    Tune it to your dataEdit the prompts, filters, and field mappings so it matches how your team works.
  6. 6
    Test, then turn it onRun once against a sample, confirm the output, then enable the trigger.

Run this workflow in your colony.

14-day trial. No DevOps. No Sales call. Provisioned in under a minute.