From 1565bb78102db77aac53022dd1d5254233e627bd Mon Sep 17 00:00:00 2001 From: D-K-P <8297864+D-K-P@users.noreply.github.com> Date: Wed, 8 Jan 2025 18:01:43 +0000 Subject: [PATCH 1/6] Added repo links --- docs/guides/examples/fal-ai-realtime.mdx | 11 +++++++++++ .../supabase-edge-functions-basic.mdx | 16 +++++++++++----- ...upabase-edge-functions-database-webhooks.mdx | 17 ++++++++++++----- 3 files changed, 34 insertions(+), 10 deletions(-) diff --git a/docs/guides/examples/fal-ai-realtime.mdx b/docs/guides/examples/fal-ai-realtime.mdx index 2314f4d7cb..4771ccb467 100644 --- a/docs/guides/examples/fal-ai-realtime.mdx +++ b/docs/guides/examples/fal-ai-realtime.mdx @@ -4,6 +4,17 @@ sidebarTitle: "Fal.ai with Realtime" description: "This example task generates an image from a prompt using Fal.ai and shows the progress of the task on the frontend using Trigger.dev Realtime." --- +## GitHub repo + + + 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. + + ## Walkthrough This video walks through the process of creating this task in a Next.js project. diff --git a/docs/guides/frameworks/supabase-edge-functions-basic.mdx b/docs/guides/frameworks/supabase-edge-functions-basic.mdx index c239153c63..5fd9f5eb46 100644 --- a/docs/guides/frameworks/supabase-edge-functions-basic.mdx +++ b/docs/guides/frameworks/supabase-edge-functions-basic.mdx @@ -17,11 +17,6 @@ import NextjsTroubleshootingButtonSyntax from "/snippets/nextjs-button-syntax.md import WorkerFailedToStartWhenRunningDevCommand from "/snippets/worker-failed-to-start.mdx"; import SupabaseDocsCards from "/snippets/supabase-docs-cards.mdx"; - - The project created in this guide can be found in this [GitHub - repo](https://github.com/triggerdotdev/example-projects/tree/main/supabase). - - ## Overview Supabase edge functions allow you to trigger tasks either when an event is sent from a third party (e.g. when a new Stripe payment is processed, when a new user signs up to a service, etc), or when there are any changes or updates to your Supabase database. @@ -36,6 +31,17 @@ This guide shows you how to set up and deploy a simple Supabase edge function ex - [Create a Trigger.dev account](https://cloud.trigger.dev) - [Create a new Trigger.dev project](/guides/dashboard/creating-a-project) +## GitHub repo + + + 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. + + ## Initial setup diff --git a/docs/guides/frameworks/supabase-edge-functions-database-webhooks.mdx b/docs/guides/frameworks/supabase-edge-functions-database-webhooks.mdx index 8d8471a49b..223ae23aa5 100644 --- a/docs/guides/frameworks/supabase-edge-functions-database-webhooks.mdx +++ b/docs/guides/frameworks/supabase-edge-functions-database-webhooks.mdx @@ -13,11 +13,6 @@ import NextjsTroubleshootingButtonSyntax from "/snippets/nextjs-button-syntax.md import WorkerFailedToStartWhenRunningDevCommand from "/snippets/worker-failed-to-start.mdx"; import SupabaseDocsCards from "/snippets/supabase-docs-cards.mdx"; - - The project created in this guide can be found in this [GitHub - repo](https://github.com/triggerdotdev/example-projects/tree/main/supabase). - - ## Overview Supabase and Trigger.dev can be used together to create powerful workflows triggered by real-time changes in your database tables: @@ -25,6 +20,7 @@ Supabase and Trigger.dev can be used together to create powerful workflows trigg - A Supabase Database Webhook triggers an Edge Function when a row including a video URL is inserted into a table - The Edge Function triggers a Trigger.dev task, passing the `video_url` column data from the new table row as the payload - The Trigger.dev task then: + - Uses [FFmpeg](https://www.ffmpeg.org/) to extract the audio track from a video URL - Uses [Deepgram](https://deepgram.com) to transcribe the extracted audio - Updates the original table row using the `record.id` in Supabase with the new transcription using `update` @@ -38,6 +34,17 @@ Supabase and Trigger.dev can be used together to create powerful workflows trigg - [Create a new Trigger.dev project](/guides/dashboard/creating-a-project) - [Create a new Deepgram account](https://deepgram.com/) and get your API key from the dashboard +## GitHub repo + + + 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. + + ## Initial setup From 068e8599e7d564b704c2dfbab8a9036d3130b237 Mon Sep 17 00:00:00 2001 From: D-K-P <8297864+D-K-P@users.noreply.github.com> Date: Wed, 8 Jan 2025 18:11:22 +0000 Subject: [PATCH 2/6] Added links to remix / nextjs webhooks examples --- docs/guides/frameworks/nextjs-webhooks.mdx | 11 +++++++++++ docs/guides/frameworks/remix-webhooks.mdx | 11 +++++++++++ 2 files changed, 22 insertions(+) diff --git a/docs/guides/frameworks/nextjs-webhooks.mdx b/docs/guides/frameworks/nextjs-webhooks.mdx index fbbfbf30e5..5f7d6de036 100644 --- a/docs/guides/frameworks/nextjs-webhooks.mdx +++ b/docs/guides/frameworks/nextjs-webhooks.mdx @@ -11,6 +11,17 @@ import VercelDocsCards from "/snippets/vercel-docs-cards.mdx"; - [A Next.js project, set up with Trigger.dev](/guides/frameworks/nextjs) - [cURL](https://curl.se/) installed on your local machine. This will be used to send a POST request to your webhook handler. +## GitHub repo + + + 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. + + ## Adding the webhook handler The webhook handler in this guide will be an API route. diff --git a/docs/guides/frameworks/remix-webhooks.mdx b/docs/guides/frameworks/remix-webhooks.mdx index 3df269092a..2a4270a3ef 100644 --- a/docs/guides/frameworks/remix-webhooks.mdx +++ b/docs/guides/frameworks/remix-webhooks.mdx @@ -9,6 +9,17 @@ description: "Learn how to trigger a task from a webhook in a Remix app." - [A Remix project, set up with Trigger.dev](/guides/frameworks/remix) - [cURL](https://curl.se/) installed on your local machine. This will be used to send a POST request to your webhook handler. +## GitHub repo + + + 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. + + ## Adding the webhook handler The webhook handler in this guide will be an API route. Create a new file `app/routes/api.webhook-handler.ts` or `app/routes/api.webhook-handler.js`. From 7c51adab0948e43d40aae9d131032f71742d2a46 Mon Sep 17 00:00:00 2001 From: D-K-P <8297864+D-K-P@users.noreply.github.com> Date: Wed, 8 Jan 2025 21:06:57 +0000 Subject: [PATCH 3/6] Added a Realtime learn more snippet --- docs/guides/example-projects/realtime-fal-ai.mdx | 4 ++++ docs/snippets/realtime-learn-more.mdx | 7 +++++++ 2 files changed, 11 insertions(+) create mode 100644 docs/snippets/realtime-learn-more.mdx diff --git a/docs/guides/example-projects/realtime-fal-ai.mdx b/docs/guides/example-projects/realtime-fal-ai.mdx index 7c156276b2..e3b7c4c460 100644 --- a/docs/guides/example-projects/realtime-fal-ai.mdx +++ b/docs/guides/example-projects/realtime-fal-ai.mdx @@ -4,6 +4,8 @@ sidebarTitle: "Realtime image gen with Fal.ai" description: "This example project generates an image from a prompt using Fal.ai and shows the progress of the task on the frontend using Trigger.dev Realtime." --- +import RealtimeLearnMore from "/snippets/realtime-learn-more.mdx"; + ## Overview This full stack Next.js project showcases the following: @@ -40,3 +42,5 @@ This video walks through the process of creating this task in a Next.js project. allowfullscreen /> + + diff --git a/docs/snippets/realtime-learn-more.mdx b/docs/snippets/realtime-learn-more.mdx new file mode 100644 index 0000000000..05d5ce54e7 --- /dev/null +++ b/docs/snippets/realtime-learn-more.mdx @@ -0,0 +1,7 @@ +## Learn more about Trigger.dev Realtime + +To learn more about Trigger.dev Realtime, take a look at the following resources: + +- [Batch Trigger docs](https://trigger.dev/docs/triggering) - learn about the Batch Trigger feature of Trigger.dev. +- [Realtime docs](https://trigger.dev/docs/realtime) - learn about the Realtime feature of Trigger.dev. +- [React hooks](https://trigger.dev/docs/frontend/react-hooks) - learn about the React hooks provided by Trigger.dev. From 2aca534343770abf7011726796a06322c67f9099 Mon Sep 17 00:00:00 2001 From: D-K-P <8297864+D-K-P@users.noreply.github.com> Date: Wed, 8 Jan 2025 21:07:57 +0000 Subject: [PATCH 4/6] Added the batch llm evaluator docs --- .../example-projects/batch-llm-evaluator.mdx | 49 +++++++++++++++++++ docs/mint.json | 5 +- 2 files changed, 53 insertions(+), 1 deletion(-) create mode 100644 docs/guides/example-projects/batch-llm-evaluator.mdx diff --git a/docs/guides/example-projects/batch-llm-evaluator.mdx b/docs/guides/example-projects/batch-llm-evaluator.mdx new file mode 100644 index 0000000000..bd0d984b98 --- /dev/null +++ b/docs/guides/example-projects/batch-llm-evaluator.mdx @@ -0,0 +1,49 @@ +--- +title: "Batch LLM Evaluator" +sidebarTitle: "Batch LLM Evaluator" +description: "This example project evaluates multiple LLM models using the Vercel AI SDK and streams updates to the frontend using Trigger.dev Realtime." +--- + +import RealtimeLearnMore from "/snippets/realtime-learn-more.mdx"; + +## Overview + +This demo is a full stack example that uses the following: + +- A [Next.js](https://nextjs.org/) app with [Prisma](https://www.prisma.io/) for the database. +- Trigger.dev [Realtime](https://trigger.dev/launchweek/0/realtime) to stream updates to the frontend. +- Work with multiple LLM models using the Vercel [AI SDK](https://sdk.vercel.ai/docs/introduction). (OpenAI, Anthropic, XAI) +- Distribute tasks across multiple tasks using the new [`batch.triggerByTaskAndWait`](https://trigger.dev/docs/triggering#batch-triggerbytaskandwait) method. + +## GitHub repo + + + 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. + + +## Video + + + +## Relevant code + +- View the Trigger.dev task code in the [src/trigger/batch.ts](https://github.com/triggerdotdev/examples/blob/main/batch-llm-evaluator/src/trigger/batch.ts) file. +- The `evaluateModels` task uses the `batch.triggerByTaskAndWait` method to distribute the task to the different LLM models. +- It then passes the results through to a `summarizeEvals` task that calculates some dummy "tags" for each LLM response. +- We use a [useRealtimeRunsWithTag](https://trigger.dev/docs/frontend/react-hooks/realtime#userealtimerunswithtag) hook to subscribe to the different evaluation tasks runs in the [src/components/llm-evaluator.tsx](https://github.com/triggerdotdev/examples/blob/main/batch-llm-evaluator/src/components/llm-evaluator.tsx) file. +- We then pass the relevant run down into three different components for the different models: + - The `AnthropicEval` component: [src/components/evals/Anthropic.tsx](https://github.com/triggerdotdev/examples/blob/main/batch-llm-evaluator/src/components/evals/Anthropic.tsx) + - The `XAIEval` component: [src/components/evals/XAI.tsx](https://github.com/triggerdotdev/examples/blob/main/batch-llm-evaluator/src/components/evals/XAI.tsx) + - The `OpenAIEval` component: [src/components/evals/OpenAI.tsx](https://github.com/triggerdotdev/examples/blob/main/batch-llm-evaluator/src/components/evals/OpenAI.tsx) +- Each of these components then uses [useRealtimeRunWithStreams](https://trigger.dev/docs/frontend/react-hooks/realtime#userealtimerunwithstreams) to subscribe to the different LLM responses. + + diff --git a/docs/mint.json b/docs/mint.json index 0ebf027168..e990387378 100644 --- a/docs/mint.json +++ b/docs/mint.json @@ -348,7 +348,10 @@ }, { "group": "Example projects", - "pages": ["guides/example-projects/realtime-fal-ai"] + "pages": [ + "guides/example-projects/realtime-fal-ai", + "guides/example-projects/batch-llm-evaluator" + ] }, { "group": "Example tasks", From 16530e645f4ff6cc8ab3a56900d859a9a7838492 Mon Sep 17 00:00:00 2001 From: D-K-P <8297864+D-K-P@users.noreply.github.com> Date: Wed, 8 Jan 2025 21:12:56 +0000 Subject: [PATCH 5/6] Improved snippet --- docs/snippets/realtime-learn-more.mdx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/snippets/realtime-learn-more.mdx b/docs/snippets/realtime-learn-more.mdx index 05d5ce54e7..56674cd6d3 100644 --- a/docs/snippets/realtime-learn-more.mdx +++ b/docs/snippets/realtime-learn-more.mdx @@ -1,7 +1,7 @@ ## Learn more about Trigger.dev Realtime -To learn more about Trigger.dev Realtime, take a look at the following resources: +To learn more, take a look at the following resources: -- [Batch Trigger docs](https://trigger.dev/docs/triggering) - learn about the Batch Trigger feature of Trigger.dev. -- [Realtime docs](https://trigger.dev/docs/realtime) - learn about the Realtime feature of Trigger.dev. -- [React hooks](https://trigger.dev/docs/frontend/react-hooks) - learn about the React hooks provided by Trigger.dev. +- [Realtime docs](https://trigger.dev/docs/realtime) - learn more about Realtime. +- [Batch Trigger docs](https://trigger.dev/docs/triggering) - learn more about Batch Triggers. +- [React hooks](https://trigger.dev/docs/frontend/react-hooks) - learn more about React hooks. From ed8f91b4db94bd405228e72be078de62c832eced Mon Sep 17 00:00:00 2001 From: D-K-P <8297864+D-K-P@users.noreply.github.com> Date: Wed, 8 Jan 2025 21:14:54 +0000 Subject: [PATCH 6/6] Updated intro --- docs/guides/introduction.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/guides/introduction.mdx b/docs/guides/introduction.mdx index 5ed3e4d4de..9676f89baf 100644 --- a/docs/guides/introduction.mdx +++ b/docs/guides/introduction.mdx @@ -40,6 +40,7 @@ Example projects are full projects with example repos you can fork and use. Thes | Example project | Description | Framework | GitHub Repo | | :--------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------- | :-------- | :---------------------------------------------------------------------------------------------------- | | [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) | +| [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) | ## Example tasks