How I built an AI workflow with preview, approval, and monitoring

Using one AI agent works for small tasks.

But once there are multiple steps — building, checking, updating, monitoring — things start to fall apart.

So, you need to structure AI into a system that can handle it.

Here’s how to set that up.

What this system does

This system takes a request and moves it through a structured process that:

Interprets what needs to change
Generates a proposed update
Lets you preview the result
Requires approval before it goes live
Monitors the result afterward

The workflow

Request → Plan → Change → Preview → Approve → Monitor

Each step does one job. Together, they run with minimal manual work.

Example

We’ll use one example the whole way through: Update contact page copy (e.g., change or rewrite the text)

Tools

Jotform → collect requests and run approvals
n8n → run the workflow
GitHub → store and update files
Vercel → preview and deploy
Claude (through n8n) → generate/rewrite the content

Step 1 — Create the trigger (Jotform)

Set up a form in Jotform.

Add:

Page/file (Short text)
What should change (Long text)
Definition of done (Long text)
Risk (Dropdown: Low / Medium / High)

Click Publish

Result: This form collects change requests (like changing text on a page). Once published, each submission triggers the workflow.

Step 2 — Create the workflow in n8n

Open n8n and click Create Workflow

Add your first node: Jotform Trigger

Connect your Jotform account
Select your form
Click Execute Node
Submit a test form

You should now see the form data inside n8n.

This is your trigger.

Result: Each submission now enters n8n and starts the workflow.

Step 3 — Planner (n8n model node)

Click +
Add a model (OpenAI, Claude, etc.)
Connect your model

Paste:

Pick ONE file to change.

Return:
- file path
- branch name
- short summary

Only choose content files.

Connect data

Map:

In your AI node, use values from the Jotform Trigger node as inputs.

Build your prompt like this:

Update the file based on this request:

What should change:
{What should change}

Definition of done:
{Definition of done}

Risk level:
{Risk level}

Keep the structure the same. Only change what is needed.

How to insert those fields in n8n

Click inside the prompt box
Click “Add Expression”
Select a field (e.g. “What should change”)
It will appear in your prompt

Repeat for the other fields.

Test

Click Execute Node

You should see:

File path
Branch name
Summary

Result: The AI decides what file to change and how to change it.

Step 4 — Add the builder (GitHub)

Add node: GitHub → Get File

Set:

Repository
File path (from planner)

This fetches the current version of the file.

Add next node: AI (text generation)

Paste this (or similar):

Update this file based on the request.

Keep the structure the same.
Only change what is needed.

Add next node: GitHub → Edit File

Set

In the GitHub → Edit File node:

Click into File path
1. Click Add Expression
2. Select the file path from the planner (Step 3)
Click into Branch name
1. Click Add Expression
2. Select the branch name from the planner (Step 3)
Click into Content
1. Click Add Expression
2. Select the output from the AI node

Test

Run workflow

Result: A new version of the file (with the updated content) is saved in your repository.

This is the step where the system makes a real change.

Step 5 — Preview (Vercel)

Set this up once in Vercel

Click New Project
Import your GitHub repo
Deploy

Now, every time your workflow creates or updates a branch in GitHub:

Vercel automatically builds that version of your project
It creates a preview URL for that branch

When that branch is later merged:

Vercel deploys it as the live version

Result: Each change can be viewed and checked before it goes live.

Step 6 — Review (manual approval with Jotform)

Do not automate this.

Create a second form in Jotform:

Task
Preview link
Approve / Reject
Notes

Flow: n8n sends the preview link → you check → you approve or reject

Result: You review each change before it goes live.

This is your quality control step.

Step 7 — Monitor (GitHub)

In GitHub: Click Add file → Create new file

.github/workflows/check.yml

Paste this:




name: Check site

on:
 schedule:
   - cron: "0 0 * * *"

jobs:
 check:
   runs-on: ubuntu-latest
   steps:
     - run: curl -f https://your-site.vercel.app

Commit

Result: The system automatically checks that your site is still working after changes.

This is the monitor agent.

That’s it.

You now have a controlled system for making changes safely, from request to verification.

Each step is separate and clearly defined — that’s what makes it reliable.