Human-in-the-loop workflow with ReactFlow and Trigger.dev waitpoint tokens

Overview

This demo is a full stack example that uses the following:

• Next.js for the web application
• ReactFlow for the workflow UI
• Trigger.dev Realtime to subscribe to task runs and show the real-time status of the workflow steps
• Trigger.dev waitpoint tokens to create a human-in-the-loop flow with a review step
• OpenAI API to generate article summaries
• ElevenLabs to convert text to speech

GitHub repo

<Card title="View the human-in-the-loop workflow repo" icon="GitHub" href="https://github.com/triggerdotdev/examples/tree/main/article-summary-workflow"

Click here to view the full code for this project in our examples repository on GitHub. You can fork it and use it as a starting point for your own project. </Card>

Video

<video controls className="w-full aspect-video" src="https://content.trigger.dev/reactflow-waitpoints-example.mov"

</video>

Relevant code

Each node in the workflow corresponds to a Trigger.dev task. The idea is to enable building flows by composition of different tasks. The output of one task serves as input for another.

• Trigger.dev task splitting:
  • The summarizeArticle task uses the OpenAI API to generate a summary an article.
  • The convertTextToSpeech task uses the ElevenLabs API to convert the summary into an audio stream and upload it to an S3 bucket.
  • The reviewSummary task is a human-in-the-loop step that shows the result and waits for approval of the summary before continuing.
  • articleWorkflow is the entrypoint that ties the workflow together and orchestrates the tasks. You might choose to approach the orchestration differently, depending on your use case.
• ReactFlow Nodes: there are three types of nodes in this example. All of them are custom ReactFlow nodes.
  • The InputNode is the starting node of the workflow. It triggers the workflow by submitting an article URL.
  • The ActionNode is a node that shows the status of a task run in Trigger.dev, in real-time using the React hooks for Trigger.dev.
  • The ReviewNode is a node that shows the summary result and prompts the user for approval before continuing. It uses the Realtime API to fetch details about the review status. Also, it interacts with the Trigger.dev waitpoint API for completing the waitpoint token using Next.js server actions.
• Workflow orchestration:
  • The workflow is orchestrated by the Flow component. It lays out the nodes, the connections between them, as well as the mapping to the Trigger.dev tasks. It also uses the useRealtimeRunsWithTag hook to subscribe to task runs associated with the workflow and passes down the run details to the nodes.

The waitpoint token is created in a Next.js server action:

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

and later completed in another server action in the same file:

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

While the workflow in this example is static and does not allow changing the connections between nodes in the UI, it serves as a good baseline for understanding how to build completely custom workflow builders using Trigger.dev and ReactFlow.

Learn more about Trigger.dev Realtime and waitpoint tokens

To learn more, take a look at the following resources:

• Trigger.dev Realtime - learn more about how to subscribe to runs and get real-time updates
• Realtime streaming - learn more about streaming data from your tasks
• React hooks - learn more about using React hooks to interact with the Trigger.dev API
• Waitpoint tokens - learn about waitpoint tokens in Trigger.dev and human-in-the-loop flows