Add a docs page for the human-in-the-loop example project #1919
Conversation
|
WalkthroughThis update enhances the documentation by adding a new example project focused on a human-in-the-loop workflow. The project utilizes ReactFlow and Trigger.dev waitpoint tokens for generating audio summaries of newspaper articles. The changes include the introduction of a new documentation file detailing this workflow, as well as updates to the introduction section to include the new project in the example projects table. Changes
Possibly related PRs
Suggested reviewers
Poem
Tip ⚡💬 Agentic Chat (Pro Plan, General Availability)
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (1)
🧰 Additional context used🪛 LanguageTooldocs/guides/introduction.mdx[uncategorized] ~37-~37: ‘In’ is unnecessary in most cases before the expression ‘next .’. (CONFUSION_OF_NN_IN_NEXT_NNP) 🔇 Additional comments (5)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
docs/guides/introduction.mdx (1)
44-54: New Example Project Row Added
The "Human-in-the-loop workflow" row has been added correctly with a comprehensive description and valid GitHub link. Please review the text for minor typos (e.g. “encorporate” should be “incorporate”) to ensure consistency.docs/guides/example-projects/human-in-the-loop-workflow.mdx (2)
9-11: Optional Grammar Refinement
Consider hyphenating the compound adjective in the sentence "This demo is a full stack example…" to "full‑stack example" for improved clarity.🧰 Tools
🪛 LanguageTool
[uncategorized] ~11-~11: If this is a compound adjective that modifies the following noun, use a hyphen.
Context: ...note.mdx"; ## Overview This demo is a full stack example that uses the following: - [Ne...(EN_COMPOUND_ADJECTIVE_INTERNAL)
58-77: Clear Code Snippets for Waitpoint Token Management
The TypeScript code examples for creating and completing a waitpoint token are well presented and informative. For additional clarity, consider adding brief inline comments about error handling or potential timeouts.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
docs/docs.json(2 hunks)docs/guides/example-projects/human-in-the-loop-workflow.mdx(1 hunks)docs/guides/introduction.mdx(1 hunks)
🧰 Additional context used
🪛 Biome (1.9.4)
docs/docs.json
[error] 43-43: unexpected character <
(parse)
[error] 43-43: unexpected character <
(parse)
[error] 43-43: unexpected character <
(parse)
[error] 43-43: unexpected character <
(parse)
[error] 43-43: unexpected character <
(parse)
[error] 43-43: unexpected character <
(parse)
[error] 43-43: expected , but instead found Updated
Remove Updated
(parse)
[error] 43-43: expected , but instead found upstream
Remove upstream
(parse)
[error] 44-44: expected , but instead found "pages"
Remove "pages"
(parse)
[error] 44-44: expected , but instead found :
Remove :
(parse)
[error] 44-44: expected , but instead found [
Remove [
(parse)
[error] 44-45: unexpected character =
(parse)
[error] 45-45: unexpected character =
(parse)
[error] 45-45: unexpected character =
(parse)
[error] 45-45: unexpected character =
(parse)
[error] 45-45: unexpected character =
(parse)
[error] 45-45: unexpected character =
(parse)
[error] 45-45: unexpected character =
(parse)
[error] 46-46: expected , but instead found "pages"
Remove "pages"
(parse)
[error] 46-46: expected , but instead found :
Remove :
(parse)
[error] 46-46: expected , but instead found [
Remove [
(parse)
[error] 46-47: unexpected character >
(parse)
[error] 47-47: unexpected character >
(parse)
[error] 47-47: unexpected character >
(parse)
[error] 47-47: unexpected character >
(parse)
[error] 47-47: unexpected character >
(parse)
[error] 47-47: unexpected character >
(parse)
[error] 47-47: unexpected character >
(parse)
[error] 47-47: expected , but instead found Stashed
Remove Stashed
(parse)
[error] 47-47: expected , but instead found changes
Remove changes
(parse)
🪛 LanguageTool
docs/guides/example-projects/human-in-the-loop-workflow.mdx
[uncategorized] ~11-~11: If this is a compound adjective that modifies the following noun, use a hyphen.
Context: ...note.mdx"; ## Overview This demo is a full stack example that uses the following: - [Ne...
(EN_COMPOUND_ADJECTIVE_INTERNAL)
🔇 Additional comments (3)
docs/docs.json (1)
323-323: New Page Entry Added
The new page entry"guides/example-projects/human-in-the-loop-workflow"has been successfully added to the "Example projects" group. Verify that the referenced file exists and that the navigation updates as expected.docs/guides/example-projects/human-in-the-loop-workflow.mdx (2)
1-5: Front Matter Verification
The front matter (title, sidebarTitle, and description) is clear and accurately sets the context for the human-in-the-loop workflow documentation.
39-56: Well-Structured Workflow Overview
The "Relevant code" section provides a clear and logical breakdown of the workflow components, with direct links to each corresponding Trigger.dev task and custom ReactFlow node. This helps users understand how the workflow is composed.
myftija
force-pushed
the
human-in-the-loop-reference-project-docs
branch
from
672585b to
051a82f
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
docs/guides/example-projects/human-in-the-loop-workflow.mdx (2)
11-19: Content Overview and Technology List are Informative.
The section clearly outlines the technologies used in the project with appropriate links.Nitpick: Consider hyphenating compound adjectives for consistency; for instance, "full stack" could be revised to "full-stack" if it modifies a noun, as suggested by language tools.
🧰 Tools
🪛 LanguageTool
[uncategorized] ~11-~11: If this is a compound adjective that modifies the following noun, use a hyphen.
Context: ...note.mdx"; ## Overview This demo is a full stack example that uses the following: - [Ne...(EN_COMPOUND_ADJECTIVE_INTERNAL)
39-47: Task Splitting Description Needs a Minor Text Tweak.
The bullet point for the [summarizeArticle] task on line 44 contains a small phrasing issue ("generate a summary an article"). Consider revising it to "generate a summary of an article" for clarity.- - 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. + - 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 of an article.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
docs/docs.json(2 hunks)docs/guides/example-projects/human-in-the-loop-workflow.mdx(1 hunks)docs/guides/introduction.mdx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- docs/guides/introduction.mdx
- docs/docs.json
🧰 Additional context used
🪛 LanguageTool
docs/guides/example-projects/human-in-the-loop-workflow.mdx
[uncategorized] ~11-~11: If this is a compound adjective that modifies the following noun, use a hyphen.
Context: ...note.mdx"; ## Overview This demo is a full stack example that uses the following: - [Ne...
(EN_COMPOUND_ADJECTIVE_INTERNAL)
🔇 Additional comments (12)
docs/guides/example-projects/human-in-the-loop-workflow.mdx (12)
1-5: Front Matter Configuration is Correct.
The YAML front matter is well-defined with appropriate keys (title, sidebarTitle, and description) to categorize and describe the page effectively.
7-7: Import Statement for UpgradeToV4Note is Clear.
The import is correctly referencing the upgrade note snippet, ensuring that important upgrade details are prominently displayed.
9-10: Overview Section Provides a Clear Introduction.
The headings and spacing effectively introduce the content of the document.
20-29: GitHub Repository Section is Well-Structured.
The Card component is effectively used to guide users to the project's GitHub repository, with clear title, icon, and hyperlink attributes.
31-38: Embedded Video Section is Correctly Implemented.
The<video>element includes necessary attributes such ascontrolsand appropriate styling classes, ensuring the video content is displayed properly.
48-51: ReactFlow Nodes Section Clearly Describes Custom Nodes.
The explanations for InputNode, ActionNode, and ReviewNode effectively illustrate their roles in the workflow without ambiguity.
52-54: Workflow Orchestration Section is Well Articulated.
The description of the Flow component’s role, coupled with the use of theuseRealtimeRunsWithTaghook, offers a concise explanation of task orchestration.
56-64: Waitpoint Token Creation Snippet is Informative.
The TypeScript code snippet clearly demonstrates how to create a waitpoint token with the proper parameters, serving as a helpful reference for implementing this feature.
66-77: Waitpoint Token Completion Snippet is Clear.
The snippet shows the process of completing a waitpoint token with clear payload structure, which aids in understanding the human-in-the-loop review process.
79-79: UpgradeToV4Note Component is Appropriately Integrated.
Utilizing the<UpgradeToV4Note />component here reinforces important upgrade information and is correctly placed after the code examples.
81-83: Static Workflow Description is Clear.
The text clearly explains that the workflow is static, making it easier for users to set the right expectations for customization.
84-91: Resource Links Section Effectively Enhances Further Learning.
The "Learn more" section provides valuable external links and learning resources, facilitating additional exploration of Trigger.dev Realtime and waitpoint tokens.
myftija
force-pushed
the
human-in-the-loop-reference-project-docs
branch
from
051a82f to
6ba6786
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
docs/guides/example-projects/human-in-the-loop-workflow.mdx (2)
9-11: Optional: Hyphenate "full-stack".On line 11, the phrase “full stack example” is used. When used as a compound adjective modifying "example," consider hyphenating it to “full‑stack example” for clarity.
-This demo is a full stack example that uses the following: +This demo is a full-stack example that uses the following:🧰 Tools
🪛 LanguageTool
[uncategorized] ~11-~11: If this is a compound adjective that modifies the following noun, use a hyphen.
Context: ...note.mdx"; ## Overview This demo is a full stack example that uses the following: - [Ne...(EN_COMPOUND_ADJECTIVE_INTERNAL)
43-45: Grammar Correction in Feature Description.In the description for the summarizeArticle task (line 44), change “generate a summary an article” to “generate a summary of an article” for grammatical accuracy.
- - 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. + - 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 of an article.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
docs/docs.json(1 hunks)docs/guides/example-projects/human-in-the-loop-workflow.mdx(1 hunks)docs/guides/introduction.mdx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- docs/docs.json
- docs/guides/introduction.mdx
🧰 Additional context used
🪛 LanguageTool
docs/guides/example-projects/human-in-the-loop-workflow.mdx
[uncategorized] ~11-~11: If this is a compound adjective that modifies the following noun, use a hyphen.
Context: ...note.mdx"; ## Overview This demo is a full stack example that uses the following: - [Ne...
(EN_COMPOUND_ADJECTIVE_INTERNAL)
🔇 Additional comments (10)
docs/guides/example-projects/human-in-the-loop-workflow.mdx (10)
1-5: Front Matter Metadata is well-formatted.The title, sidebar title, and description are clearly defined and provide good context for the document. Ensure that these meta fields consistently match the documentation standards for the site.
7-7: Import Statement for UpgradeToV4Note.The import is concise and correct. Just verify that the referenced file
/snippets/upgrade-to-v4-note.mdxexists and remains up-to-date.
20-29: GitHub Repo Card Section is Clear.The card component effectively presents the repository link with a clear call-to-action. The title, icon, and href are correctly provided.
31-37: Video Block Implementation is Effective.The
<video>element includes required attributes such ascontrols, a descriptive CSS class, and a valid source URL, ensuring a good user experience.
39-55: "Relevant Code" Section is Comprehensive.This section clearly explains the workflow, detailing the different tasks and custom ReactFlow nodes with proper external links. The presentation is informative and well-structured.
56-64: Waitpoint Token Creation Snippet is Clear.The TypeScript snippet that demonstrates creating a waitpoint token is straightforward and uses appropriate parameters. This example should help users understand server action integration.
66-77: Waitpoint Token Completion Snippet is Well-Documented.The completion snippet clearly shows how to finalize the token using
wait.completeToken. The inclusion of type parameters and structured payload data makes it easy to follow.
79-79: UpgradeToV4Note Component Usage.The inclusion of
<UpgradeToV4Note />is appropriate for highlighting upgrade information. Ensure the note content in/snippets/upgrade-to-v4-note.mdxis kept current.
82-83: Conclusion Paragraph Conveys the Workflow’s Nature.The final paragraph succinctly explains the static nature of the workflow and its value as a baseline example. This provides a clear takeaway for the reader.
84-90: "Learn More" Section is User-Friendly.The resources listed under the "Learn more" section are well-organized, with clear links guiding users to additional documentation on Trigger.dev Realtime and waitpoint tokens.
| @@ -323,6 +323,7 @@ | |||
| "guides/example-projects/turborepo-monorepo-prisma", | |||
| "guides/example-projects/realtime-fal-ai", | |||
| "guides/example-projects/realtime-csv-importer", | |||
| "guides/example-projects/human-in-the-loop-workflow", | |||
There was a problem hiding this comment.
Minor one but let's make this list alphabetical
There was a problem hiding this comment.
good point, made all lists in this page alphabetical
| | [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) | | ||
| | [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) | | ||
| | [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) | | ||
| | [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) | |
There was a problem hiding this comment.
Let's also make all of these alphabetical too (by title)
* Add a docs page for the human-in-the-loop example project * Order guides, example projects and example tasks alphabetically in the docs list
* WIP on secret env vars * Editing individual env var values is working * Sort the env vars by the key * Deleting values * Allowing setting secret env vars * Added medium switch style * Many style changes to the env var form * “Copy text” -> “Copy” * Draw a divider between hidden buttons * Env var tweaks * Don’t show Dev:you anymore * Grouping the same env var keys together * Styles improved * Improved styling of edit panel * Fix bun detection, dev flushing, and init command (#1914) * update nypm to support text-based bun lockfiles * add nypm changeset * handle dev flushing failures gracefully * fix path normalization for init.ts * add changesets * chore: remove pre.json after exiting pre mode * init command to install v4-beta packages * Revert "chore: remove pre.json after exiting pre mode" This reverts commit f5694fd. * make init default to cli version for all packages * Release 4.0.0-v4-beta.1 (#1916) * chore: Update version for release (v4-beta) * Release 4.0.0-v4-beta.1 --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: nicktrn <[email protected]> * Both run engines will only lock to versions they can handle (#1922) * run engine v1 will only lock to v1 deployments * run engine v2 will only lock to managed v2 deployments * test: create background worker and deployment with correct engine version * Add links to and from deployments (#1921) * link from deployments tasks to filtered runs view * jump to deployment * don't add version links for dev (yet) * Fix current worker deployment getter (#1924) * only return last v1 deployment in the shared queue consumer * be explicit about only returning managed deployments * 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 * Managed run controller revamp (#1927) * update nypm to support text-based bun lockfiles * fix retry spans * only download debug logs if admin * add nypm changeset * pull out env override logic * use runner env gather helper * handle dev flushing failures gracefully * fix path normalization for init.ts * add logger * add execution heartbeat service * add snapshot poller service * fix poller * add changesets * create socket in constructor * enable strictPropertyInitialization * deprecate dequeue from version * start is not async * dependency injection in prep for tests * add warm start count to all controller logs * add restore count * pull out run execution logic * temp disable pre * add a controller log when starting an execution * refactor execution and squash some bugs * cleanup completed docker containers by default * execution fixes and logging improvements * don't throw afet abort cleanup * poller should use private interval * rename heartbeat service file * rename HeartbeatService to IntervalService * restore old heartbeat service but deprecate it * use the new interval service everywhere * Revert "temp disable pre" This reverts commit e03f417. * add changeset * replace all run engine find uniques with find first * Release 4.0.0-v4-beta.2 (#1928) * chore: Update version for release (v4-beta) * Release 4.0.0-v4-beta.2 --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: nicktrn <[email protected]> * Remove batch ID carryover for non-batch waits (#1930) * add failing test case * do not carry over previous batch id when blocking with waitpoint * delete irrelevant test * Delete project (#1913) * Delete project - Don’t schedule tasks if the project is deleted - Delete queues from the master queues - Add the old delete project UI back in * Mark the project as deleted last * Fix for overriding local variable * Added a todo for deleting env queues * Remove todo * Improve usage flushing (#1931) * add flush to global usage api * enable controller debug logs * initialize usage manager after env overrides * add previous run id to more debug logs * add changeset * For secret env vars, don’t return the value * Added a new env var repository function for getting secrets with redactions * Test task for env vars * Delete heartbeat file, merge mess up --------- Co-authored-by: nicktrn <[email protected]> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Saadi Myftija <[email protected]>
This PR adds a docs page for the human-in-the-loop example projects showcasing the new waitpoint tokens.
Summary by CodeRabbit