Skip to content

Commit 0b2eb34

Browse files
myftijamyftija
authored
Add a docs page for the human-in-the-loop example project (#1919)
* Add a docs page for the human-in-the-loop example project * Order guides, example projects and example tasks alphabetically in the docs list
1 parent 1816115 commit 0b2eb34

File tree

3 files changed

+110
-17
lines changed

3 files changed

+110
-17
lines changed

‎docs/docs.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -320,9 +320,10 @@
320320
"pages": [
321321
"guides/example-projects/batch-llm-evaluator",
322322
"guides/example-projects/claude-thinking-chatbot",
323-
"guides/example-projects/turborepo-monorepo-prisma",
324-
"guides/example-projects/realtime-fal-ai",
323+
"guides/example-projects/human-in-the-loop-workflow",
325324
"guides/example-projects/realtime-csv-importer",
325+
"guides/example-projects/realtime-fal-ai",
326+
"guides/example-projects/turborepo-monorepo-prisma",
326327
"guides/example-projects/vercel-ai-sdk-image-generator"
327328
]
328329
},

‎docs/guides/example-projects/human-in-the-loop-workflow.mdx

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
---
2+
title: "Human-in-the-loop workflow with ReactFlow and Trigger.dev waitpoint tokens"
3+
sidebarTitle: "Human-in-the-loop workflow"
4+
description: "This example project creates audio summaries of newspaper articles using a human-in-the-loop workflow built with ReactFlow and Trigger.dev waitpoint tokens."
5+
---
6+
7+
import UpgradeToV4Note from "/snippets/upgrade-to-v4-note.mdx";
8+
9+
## Overview
10+
11+
This demo is a full stack example that uses the following:
12+
13+
- [Next.js](https://nextjs.org/) for the web application
14+
- [ReactFlow](https://reactflow.dev/) for the workflow UI
15+
- [Trigger.dev Realtime](/realtime/overview) to subscribe to task runs and show the real-time status of the workflow steps
16+
- [Trigger.dev waitpoint tokens](/wait-for-token) to create a human-in-the-loop flow with a review step
17+
- [OpenAI API](https://openai.com/api/) to generate article summaries
18+
- [ElevenLabs](https://elevenlabs.io/text-to-speech) to convert text to speech
19+
20+
## GitHub repo
21+
22+
<Card
23+
title="View the human-in-the-loop workflow repo"
24+
icon="GitHub"
25+
href="https://github.com/triggerdotdev/examples/tree/main/article-summary-workflow"
26+
>
27+
Click here to view the full code for this project in our examples repository on GitHub. You can
28+
fork it and use it as a starting point for your own project.
29+
</Card>
30+
31+
## Video
32+
33+
<video
34+
controls
35+
className="w-full aspect-video"
36+
src="https://content.trigger.dev/reactflow-waitpoints-example.mov"
37+
></video>
38+
39+
## Relevant code
40+
41+
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.
42+
43+
- **Trigger.dev task splitting**:
44+
- The [summarizeArticle](https://github.com/triggerdotdev/examples/blob/main/article-summary-workflow/src/trigger/summarizeArticle.ts) task uses the OpenAI API to generate a summary an article.
45+
- The [convertTextToSpeech](https://github.com/triggerdotdev/examples/blob/main/article-summary-workflow/src/trigger/convertTextToSpeech.ts) task uses the ElevenLabs API to convert the summary into an audio stream and upload it to an S3 bucket.
46+
- The [reviewSummary](https://github.com/triggerdotdev/examples/blob/main/article-summary-workflow/src/trigger/reviewSummary.ts) task is a human-in-the-loop step that shows the result and waits for approval of the summary before continuing.
47+
- [articleWorkflow](https://github.com/triggerdotdev/examples/blob/main/article-summary-workflow/src/trigger/articleWorkflow.ts) 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.
48+
- **ReactFlow Nodes**: there are three types of nodes in this example. All of them are custom ReactFlow nodes.
49+
- The [InputNode](https://github.com/triggerdotdev/examples/blob/main/article-summary-workflow/src/components/InputNode.tsx) is the starting node of the workflow. It triggers the workflow by submitting an article URL.
50+
- The [ActionNode](https://github.com/triggerdotdev/examples/blob/main/article-summary-workflow/src/components/ActionNode.tsx) is a node that shows the status of a task run in Trigger.dev, in real-time using the React hooks for Trigger.dev.
51+
- The [ReviewNode](https://github.com/triggerdotdev/examples/blob/main/article-summary-workflow/src/components/ReviewNode.tsx) 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.
52+
- **Workflow orchestration**:
53+
- The workflow is orchestrated by the [Flow](https://github.com/triggerdotdev/examples/blob/main/article-summary-workflow/src/components/Flow.tsx) component. It lays out the nodes, the connections between them, as well as the mapping to the Trigger.dev tasks.
54+
It also uses the `useRealtimeRunsWithTag` hook to subscribe to task runs associated with the workflow and passes down the run details to the nodes.
55+
56+
The waitpoint token is created in [a Next.js server action](https://github.com/triggerdotdev/examples/blob/main/article-summary-workflow/src/app/actions.ts#L26):
57+
58+
```ts
59+
const reviewWaitpointToken = await wait.createToken({
60+
tags: [workflowTag],
61+
timeout: "1h",
62+
idempotencyKey: `review-summary-${workflowTag}`,
63+
});
64+
```
65+
66+
and later completed in another server action in the same file:
67+
68+
```ts
69+
await wait.completeToken<ReviewPayload>(
70+
{ id: tokenId },
71+
{
72+
approved: true,
73+
approvedAt: new Date(),
74+
approvedBy: user,
75+
}
76+
);
77+
```
78+
79+
<UpgradeToV4Note />
80+
81+
82+
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.
83+
84+
## Learn more about Trigger.dev Realtime and waitpoint tokens
85+
86+
To learn more, take a look at the following resources:
87+
88+
- [Trigger.dev Realtime](/realtime) - learn more about how to subscribe to runs and get real-time updates
89+
- [Realtime streaming](/realtime/streams) - learn more about streaming data from your tasks
90+
- [React hooks](/frontend/react-hooks) - learn more about using React hooks to interact with the Trigger.dev API
91+
- [Waitpoint tokens](/wait-for-token) - learn about waitpoint tokens in Trigger.dev and human-in-the-loop flows

‎docs/guides/introduction.mdx

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -21,35 +21,36 @@ Get set up fast using our detailed walk-through guides.
2121

2222
| Guide | Description |
2323
| :----------------------------------------------------------------------------------------- | :------------------------------------------------------------------- |
24-
| [AI Agent: Generate and translate copy](/guides/ai-agents/generate-translate-copy) | Chain prompts to generate and translate content |
25-
| [AI Agent: Route questions](/guides/ai-agents/route-question) | Route questions to different models based on complexity |
2624
| [AI Agent: Content moderation](/guides/ai-agents/respond-and-check-content) | Parallel check content while responding to customers |
25+
| [AI Agent: Generate and translate copy](/guides/ai-agents/generate-translate-copy) | Chain prompts to generate and translate content |
2726
| [AI Agent: News verification](/guides/ai-agents/verify-news-article) | Orchestrate fact checking of news articles |
27+
| [AI Agent: Route questions](/guides/ai-agents/route-question) | Route questions to different models based on complexity |
2828
| [AI Agent: Translation refinement](/guides/ai-agents/translate-and-refine) | Evaluate and refine translations with feedback |
2929
| [Prisma](/guides/frameworks/prisma) | How to setup Prisma with Trigger.dev |
3030
| [Python image processing](/guides/python/python-image-processing) | Use Python and Pillow to process images |
31-
| [Python web crawler](/guides/python/python-crawl4ai) | Use Python, Crawl4AI and Playwright to create a headless web crawler |
3231
| [Python PDF form extractor](/guides/python/python-pdf-form-extractor) | Use Python, PyMuPDF and Trigger.dev to extract data from a PDF form |
32+
| [Python web crawler](/guides/python/python-crawl4ai) | Use Python, Crawl4AI and Playwright to create a headless web crawler |
3333
| [Sequin database triggers](/guides/frameworks/sequin) | Trigger tasks from database changes using Sequin |
34-
| [Supabase edge function hello world](/guides/frameworks/supabase-edge-functions-basic) | Trigger tasks from Supabase edge function |
34+
| [Stripe webhooks](/guides/examples/stripe-webhook) | Trigger tasks from incoming Stripe webhook events |
3535
| [Supabase database webhooks](/guides/frameworks/supabase-edge-functions-database-webhooks) | Trigger tasks using Supabase database webhooks |
36+
| [Supabase edge function hello world](/guides/frameworks/supabase-edge-functions-basic) | Trigger tasks from Supabase edge function |
3637
| [Using webhooks in Next.js](/guides/frameworks/nextjs-webhooks) | Trigger tasks from a webhook in Next.js |
3738
| [Using webhooks in Remix](/guides/frameworks/remix-webhooks) | Trigger tasks from a webhook in Remix |
38-
| [Stripe webhooks](/guides/examples/stripe-webhook) | Trigger tasks from incoming Stripe webhook events |
3939

4040
## Example projects
4141

4242
Example projects are full projects with example repos you can fork and use. These are a great way of learning how to encorporate Trigger.dev into your project.
4343

44-
| Example project | Description | Framework | GitHub |
45-
| :-------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------- | :-------- | :------------------------------------------------------------------------------------------------------------ |
46-
| [Batch LLM Evaluator](/guides/example-projects/batch-llm-evaluator) | Evaluate multiple LLM models and stream the results to the frontend. | Next.js | [View the repo](https://github.com/triggerdotdev/examples/tree/main/batch-llm-evaluator) |
47-
| [Claude thinking chatbot](/guides/example-projects/claude-thinking-chatbot) | Use Vercel's AI SDK and Anthropic's Claude 3.7 model to create a thinking chatbot. | Next.js | [View the repo](https://github.com/triggerdotdev/examples/tree/main/claude-thinking-chatbot) |
48-
| [Turborepo monorepo with Prisma](/guides/example-projects/turborepo-monorepo-prisma) | Use Prisma in a Turborepo monorepo with Trigger.dev. | Next.js | [View the repo](https://github.com/triggerdotdev/examples/tree/main/monorepos/turborepo-prisma-tasks-package) |
49-
| [Realtime Fal.ai image generation](/guides/example-projects/realtime-fal-ai) | Generate an image from a prompt using Fal.ai and show the progress of the task on the frontend using Realtime. | Next.js | [View the repo](https://github.com/triggerdotdev/examples/tree/main/realtime-fal-ai-image-generation) |
50-
| [Realtime CSV Importer](/guides/example-projects/realtime-csv-importer) | Upload a CSV file and see the progress of the task streamed to the frontend. | Next.js | [View the repo](https://github.com/triggerdotdev/examples/tree/main/realtime-csv-importer) |
51-
| [Vercel AI SDK image generator](/guides/example-projects/vercel-ai-sdk-image-generator) | Use the Vercel AI SDK to generate images from a prompt. | Next.js | [View the repo](https://github.com/triggerdotdev/examples/tree/main/vercel-ai-sdk-image-generator) |
52-
| [Python web crawler](/guides/python/python-crawl4ai) | Use Python, Crawl4AI and Playwright to create a headless web crawler with Trigger.dev. | — | [View the repo](https://github.com/triggerdotdev/examples/tree/main/python-crawl4ai) |
44+
| Example project | Description | Framework | GitHub |
45+
| :-------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------- | :-------- | :------------------------------------------------------------------------------------------------------------ |
46+
| [Batch LLM Evaluator](/guides/example-projects/batch-llm-evaluator) | Evaluate multiple LLM models and stream the results to the frontend. | Next.js | [View the repo](https://github.com/triggerdotdev/examples/tree/main/batch-llm-evaluator) |
47+
| [Claude thinking chatbot](/guides/example-projects/claude-thinking-chatbot) | Use Vercel's AI SDK and Anthropic's Claude 3.7 model to create a thinking chatbot. | Next.js | [View the repo](https://github.com/triggerdotdev/examples/tree/main/claude-thinking-chatbot) |
48+
| [Human-in-the-loop workflow](/guides/example-projects/human-in-the-loop-workflow) | Create audio summaries of newspaper articles using a human-in-the-loop workflow built with ReactFlow and Trigger.dev waitpoint tokens. | Next.js | [View the repo](https://github.com/triggerdotdev/examples/tree/main/article-summary-workflow) |
49+
| [Python web crawler](/guides/python/python-crawl4ai) | Use Python, Crawl4AI and Playwright to create a headless web crawler with Trigger.dev. | — | [View the repo](https://github.com/triggerdotdev/examples/tree/main/python-crawl4ai) |
50+
| [Realtime CSV Importer](/guides/example-projects/realtime-csv-importer) | Upload a CSV file and see the progress of the task streamed to the frontend. | Next.js | [View the repo](https://github.com/triggerdotdev/examples/tree/main/realtime-csv-importer) |
51+
| [Realtime Fal.ai image generation](/guides/example-projects/realtime-fal-ai) | Generate an image from a prompt using Fal.ai and show the progress of the task on the frontend using Realtime. | Next.js | [View the repo](https://github.com/triggerdotdev/examples/tree/main/realtime-fal-ai-image-generation) |
52+
| [Turborepo monorepo with Prisma](/guides/example-projects/turborepo-monorepo-prisma) | Use Prisma in a Turborepo monorepo with Trigger.dev. | Next.js | [View the repo](https://github.com/triggerdotdev/examples/tree/main/monorepos/turborepo-prisma-tasks-package) |
53+
| [Vercel AI SDK image generator](/guides/example-projects/vercel-ai-sdk-image-generator) | Use the Vercel AI SDK to generate images from a prompt. | Next.js | [View the repo](https://github.com/triggerdotdev/examples/tree/main/vercel-ai-sdk-image-generator) |
5354

5455
## Example tasks
5556

@@ -66,9 +67,9 @@ Task code you can copy and paste to use in your project. They can all be extende
6667
| [LibreOffice PDF conversion](/guides/examples/libreoffice-pdf-conversion) | Convert a document to PDF using LibreOffice. |
6768
| [OpenAI with retrying](/guides/examples/open-ai-with-retrying) | Create a reusable OpenAI task with custom retry options. |
6869
| [PDF to image](/guides/examples/pdf-to-image) | Use `MuPDF` to turn a PDF into images and save them to Cloudflare R2. |
69-
| [React to PDF](/guides/examples/react-pdf) | Use `react-pdf` to generate a PDF and save it to Cloudflare R2. |
7070
| [Puppeteer](/guides/examples/puppeteer) | Use Puppeteer to generate a PDF or scrape a webpage. |
7171
| [React email](/guides/examples/react-email) | Send an email using React Email. |
72+
| [React to PDF](/guides/examples/react-pdf) | Use `react-pdf` to generate a PDF and save it to Cloudflare R2. |
7273
| [Resend email sequence](/guides/examples/resend-email-sequence) | Send a sequence of emails over several days using Resend with Trigger.dev. |
7374
| [Satori](/guides/examples/satori) | Generate OG images using React Satori. |
7475
| [Scrape Hacker News](/guides/examples/scrape-hacker-news) | Scrape Hacker News using BrowserBase and Puppeteer, summarize the articles with ChatGPT and send an email of the summary every weekday using Resend. |

0 commit comments

Comments
 (0)