Human-in-the-loop workflow

Overview

This full-stack example shows how to build a visual, node-based workflow where each step in the pipeline is a Trigger.dev task and a human reviewer must approve an AI-generated summary before the audio version is created. Tech stack:

Next.js — web application framework
ReactFlow — visual workflow UI
Trigger.dev Realtime — subscribe to task runs and display live status
Trigger.dev waitpoint tokens — pause the workflow until a human approves
OpenAI API — generate article summaries
ElevenLabs — convert text summaries to audio

GitHub repo

View the human-in-the-loop workflow repo

Fork this repo to use it as a starting point for your own human-in-the-loop project.

Demo video

How it works

The workflow consists of three Trigger.dev tasks wired together by an orchestrator, represented visually as ReactFlow nodes:

summarizeArticle — calls the OpenAI API to produce a plain-text summary from a URL
reviewSummary — pauses the workflow and waits for a human to approve or reject the summary
convertTextToSpeech — sends the approved summary to ElevenLabs and uploads the resulting audio to S3
articleWorkflow — the entrypoint that orchestrates all three tasks in sequence

Waitpoint token pattern

The human review step is powered by Trigger.dev waitpoint tokens. The token is created inside a Next.js server action when the workflow starts:

app/actions.ts

import { wait } from "@trigger.dev/sdk";

const reviewWaitpointToken = await wait.createToken({
  tags: [workflowTag],
  timeout: "1h",
  idempotencyKey: `review-summary-${workflowTag}`,
});

The reviewSummary task then suspends by waiting for that token:

trigger/reviewSummary.ts

import { task, wait } from "@trigger.dev/sdk";

export const reviewSummary = task({
  id: "review-summary",
  run: async (payload: { summary: string; tokenId: string }) => {
    // The task pauses here — no compute resources are consumed while waiting
    const result = await wait.forToken<{ approved: boolean; approvedBy: string }>(
      { id: payload.tokenId }
    );

    if (!result.ok) {
      throw new Error("Review timed out or was cancelled");
    }

    return result.output;
  },
});

When the reviewer clicks Approve in the ReactFlow UI, another server action completes the token:

app/actions.ts

import { wait } from "@trigger.dev/sdk";

await wait.completeToken<{ approved: boolean; approvedAt: Date; approvedBy: string }>(
  { id: tokenId },
  {
    approved: true,
    approvedAt: new Date(),
    approvedBy: user,
  }
);

Once the token is completed, the reviewSummary task resumes and the orchestrator moves on to the convertTextToSpeech step.

Real-time status with Realtime hooks

The ReactFlow UI shows the live status of each node by subscribing to task runs using the useRealtimeRunsWithTag hook:

components/Flow.tsx

import { useRealtimeRunsWithTag } from "@trigger.dev/react-hooks";

// Subscribe to all runs tagged with the current workflow ID
const { runs } = useRealtimeRunsWithTag(workflowTag);

Each ActionNode receives the relevant run object and displays its current status (queued, executing, completed, failed) in real time.

ReactFlow node types

Node	Purpose
`InputNode`	Starting node — accepts an article URL and triggers the workflow
`ActionNode`	Displays the real-time status of a Trigger.dev task run
`ReviewNode`	Shows the AI-generated summary and prompts for human approval

Learn more

Waitpoint tokens

Learn how waitpoint tokens work and how to build human-in-the-loop flows

Trigger.dev Realtime

Subscribe to runs and stream live updates to your frontend

React hooks

Use React hooks to interact with the Trigger.dev API from your UI

Wait for token

Pause tasks and wait for human approval using waitpoint tokens

Guides

Example Projects

Example Tasks

Human-in-the-loop workflow

Overview

GitHub repo

View the human-in-the-loop workflow repo

Demo video

How it works

Waitpoint token pattern

Real-time status with Realtime hooks

ReactFlow node types

Learn more

Waitpoint tokens

Trigger.dev Realtime

React hooks

Wait for token

​Overview

​GitHub repo

View the human-in-the-loop workflow repo

​Demo video

​How it works

​Waitpoint token pattern

​Real-time status with Realtime hooks

​ReactFlow node types

​Learn more

Waitpoint tokens

Trigger.dev Realtime

React hooks

Wait for token

Overview

GitHub repo

Demo video

How it works

Waitpoint token pattern

Real-time status with Realtime hooks

ReactFlow node types

Learn more