Skip to content

Adding example projects #1564

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Jan 3, 2025
Merged

Adding example projects #1564

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
0fa7277
Added new side menu section and updated intro
D-K-P Dec 13, 2024
039e703
Updated the fal ai realtime project
D-K-P Dec 13, 2024
008ab68
Copy update
D-K-P Dec 13, 2024
b0ba355
Merge branch 'main' into docs/example-projects
D-K-P Jan 3, 2025
a7acc43
Added example project
D-K-P Jan 3, 2025
13e3ec4
Swapped walkthrough and repo
D-K-P Jan 3, 2025
d50d4f4
Restore original fal task page
D-K-P Jan 3, 2025
c11c8a4
Added links back to the intro
D-K-P Jan 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 42 additions & 0 deletions docs/guides/example-projects/realtime-fal-ai.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
---
title: "Generate an image from a prompt using Fal.ai and Trigger.dev Realtime"
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."
---

## Overview

This full stack Next.js project showcases the following:

- A Trigger.dev task which [generates an image from a prompt using Fal.ai](https://github.com/triggerdotdev/examples/blob/main/realtime-fal-ai-image-generation/src/trigger/realtime-generate-image.ts)
- When a [form is submitted](https://github.com/triggerdotdev/examples/blob/main/realtime-fal-ai-image-generation/src/app/page.tsx) in the UI, triggering the task using a [server action](https://github.com/triggerdotdev/examples/blob/main/realtime-fal-ai-image-generation/src/app/actions/process-image.ts)
- Showing the [progress of the task](https://github.com/triggerdotdev/examples/blob/main/realtime-fal-ai-image-generation/src/app/processing/%5Bid%5D/ProcessingContent.tsx) on the frontend using Trigger.dev Realtime. This also includes error handling and a fallback UI
Comment on lines +11 to +13
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Based on the verification results, I can now provide the final response:

Documentation links need to be updated - referenced example files not found

The documentation references code files in the examples repository that appear to be missing. None of the following referenced files could be found:

  • realtime-fal-ai-image-generation/src/trigger/realtime-generate-image.ts
  • realtime-fal-ai-image-generation/src/app/page.tsx
  • realtime-fal-ai-image-generation/src/app/actions/process-image.ts
  • realtime-fal-ai-image-generation/src/app/processing/[id]/ProcessingContent.tsx

Please either:

  1. Update the documentation to point to the correct file locations, or
  2. Add the missing example files to the examples repository
🔗 Analysis chain

Verify the existence of referenced code files

Let's ensure all the linked files exist in the examples repository:

Let me try a different approach to verify the files using fd command which is available in the sandbox environment.

Let me try one more verification with a slightly different approach:

Let me try one more verification by checking the actual repository content:

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify that all referenced code files exist in the examples repository

# Clone the examples repository to a temporary directory
git clone https://github.com/triggerdotdev/examples.git /tmp/examples
cd /tmp/examples

# Check each referenced file
files=(
  "realtime-fal-ai-image-generation/src/trigger/realtime-generate-image.ts"
  "realtime-fal-ai-image-generation/src/app/page.tsx"
  "realtime-fal-ai-image-generation/src/app/actions/process-image.ts"
  "realtime-fal-ai-image-generation/src/app/processing/[id]/ProcessingContent.tsx"
)

for file in "${files[@]}"; do
  if [ ! -f "$file" ]; then
    echo "Missing file: $file"
  fi
done

Length of output: 918

Script:

#!/bin/bash
# Search for the specific files in the repository
echo "Searching for realtime-generate-image.ts:"
fd "realtime-generate-image.ts$" --type f

echo -e "\nSearching for page.tsx in realtime-fal-ai-image-generation:"
fd "page.tsx$" --type f --glob "*realtime-fal-ai*"

echo -e "\nSearching for process-image.ts:"
fd "process-image.ts$" --type f

echo -e "\nSearching for ProcessingContent.tsx:"
fd "ProcessingContent.tsx$" --type f

Length of output: 670

Script:

#!/bin/bash
# List all files in the repository to understand the structure
echo "Listing all TypeScript/TSX files:"
fd -e ts -e tsx

Length of output: 73556

Script:

#!/bin/bash
# Check the content of the repository to find the example files
echo "Checking repository content:"
fd -t f -p "realtime-fal-ai-image-generation"

Length of output: 112

- Once the task is completed, showing the generated image on the frontend next to the original image

## GitHub repo

<Card
title="View the project on GitHub"
icon="GitHub"
href="https://github.com/triggerdotdev/examples/tree/main/realtime-fal-ai-image-generation"
>
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>

## Walkthrough video

This video walks through the process of creating this task in a Next.js project.

<div className="w-full h-full aspect-video mb-3">
<iframe
width="100%"
height="100%"
src="https://www.youtube.com/embed/BWZqYfUaigg?si=XpqVUEIf1j4bsYZ4"
title="Trigger.dev walkthrough"
frameborder="0"
allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
/>
</div>
39 changes: 32 additions & 7 deletions docs/guides/examples/fal-ai-realtime.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,51 @@
---
title: "Generate an image from a prompt using Fal.ai and Trigger.dev Realtime"
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."
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."
---

## Walkthrough

This video walks through the process of creating this task in a Next.js project.

<div className="w-full h-full aspect-video mb-3">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/BWZqYfUaigg?si=XpqVUEIf1j4bsYZ4" title="Trigger.dev walkthrough" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen/>
<iframe
width="100%"
height="100%"
src="https://www.youtube.com/embed/BWZqYfUaigg?si=XpqVUEIf1j4bsYZ4"
title="Trigger.dev walkthrough"
frameborder="0"
allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
/>
</div>

## Prerequisites
## Tech stack

- An existing project
- A [Trigger.dev account](https://cloud.trigger.dev) with Trigger.dev [initialized in your project](/quick-start)
- A [Fal.ai](https://fal.ai/) account
- Next.js using the App Router for the frontend
- Trigger tasks from the frontend using our [React hooks](/frontend/react-hooks)
- [Trigger.dev Realtime](/realtime/overview) to stream updates to the frontend
- [Trigger.dev](https://cloud.trigger.dev) for task processing
- [Fal.ai](https://fal.ai/) for AI image generation

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Tech stack should specify minimum version requirements

Based on the package.json from the reference implementation, here are the minimum version requirements that should be added:

  • Next.js 14.x or later
  • @trigger.dev/react-hooks 3.x
  • @trigger.dev/sdk 3.x
  • @fal-ai/serverless-client 0.15.x or later
🔗 Analysis chain

Tech stack section needs version requirements

The tech stack section should specify minimum version requirements for critical dependencies.

Let's check the package.json in the demo repo for version requirements:

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check package.json for dependency versions
gh api repos/triggerdotdev/nextjs-realtime-fal-demo/contents/package.json | jq -r '.content' | base64 -d | jq '.dependencies'

Length of output: 220

Script:

#!/bin/bash
# Let's try searching for package.json files in the repository
fd "package.json" --type f --exec cat {}

Length of output: 62589

Script:

#!/bin/bash
# Let's check the demo repository directly for version requirements
fd "package.json" --type f --exec rg -l "next|@trigger.dev/react-hooks|@trigger.dev/sdk|fal-ai" {}

Length of output: 827

Script:

#!/bin/bash
# Let's examine the nextjs-realtime reference project's package.json for specific versions
rg -A 10 "\"dependencies\":|\"devDependencies\":" "./references/nextjs-realtime/package.json"

Length of output: 810

<Note>You will need all of these services to run this project.</Note>

## GitHub Repo

Check out and fork the full code in our [nextjs-realtime-fal-demo repo
](https://github.com/triggerdotdev/nextjs-realtime-fal-demo).

<Note>
To run the project and tasks locally, add your API keys to an `.env` file, and update the project
ID in the `trigger.config.ts` file to your project ID. To run the project in production, set the
`TRIGGER_API_KEY` environment variable to your project API key, and update the environment
variables in the Trigger.dev dashboard.
</Note>

## Task code

This task converts an image to a cartoon using fal AI, and uploads the result to Cloudflare R2.
This task converts an image to a cartoon using fal AI.

```ts trigger/fal-ai-image-from-prompt-realtime.ts
import * as fal from "@fal-ai/serverless-client";
Expand Down
12 changes: 9 additions & 3 deletions docs/guides/introduction.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,16 +33,22 @@ Get set up fast using our detailed walk-through guides.
| [Using webhooks in Remix](/guides/frameworks/remix-webhooks) | Trigger tasks from a webhook in Remix |
| [Stripe webhooks](/guides/examples/stripe-webhook) | Trigger tasks from incoming Stripe webhook events |

## Example projects

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.

| 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) |

## Example tasks

Tasks you can copy and paste to get started with Trigger.dev. They can all be extended and customized to fit your needs.
Task code you can copy and paste to use in your project. They can all be extended and customized to fit your needs.

| Example task | Description |
| :---------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------- |
| [DALL·E 3 image generation](/guides/examples/dall-e3-generate-image) | Use OpenAI's GPT-4o and DALL·E 3 to generate an image and text. |
| [Deepgram audio transcription](/guides/examples/deepgram-transcribe-audio) | Transcribe audio using Deepgram's speech recognition API. |
| [Fal.ai image to cartoon](/guides/examples/fal-ai-image-to-cartoon) | Convert an image to a cartoon using Fal.ai, and upload the result to Cloudflare R2. |
| [Fal.ai with Realtime](/guides/examples/fal-ai-realtime) | Generate an image from a prompt using Fal.ai and show the progress of the task on the frontend using Realtime. |
| [FFmpeg video processing](/guides/examples/ffmpeg-video-processing) | Use FFmpeg to process a video in various ways and save it to Cloudflare R2. |
| [Firecrawl URL crawl](/guides/examples/firecrawl-url-crawl) | Learn how to use Firecrawl to crawl a URL and return LLM-ready markdown. |
| [LibreOffice PDF conversion](/guides/examples/libreoffice-pdf-conversion) | Convert a document to PDF using LibreOffice. |
Expand Down
66 changes: 17 additions & 49 deletions docs/mint.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,7 @@
{
"$schema": "https://mintlify.com/schema.json",
"name": "Trigger.dev",
"openapi": [
"/openapi.yml",
"/v3-openapi.yaml"
],
"openapi": ["/openapi.yml", "/v3-openapi.yaml"],
"api": {
"playground": {
"mode": "simple"
Expand Down Expand Up @@ -140,30 +137,20 @@
"pages": [
{
"group": "Tasks",
"pages": [
"tasks/overview",
"tasks/schemaTask",
"tasks/scheduled"
]
"pages": ["tasks/overview", "tasks/schemaTask", "tasks/scheduled"]
},
"triggering",
"runs",
"apikeys",
{
"group": "Configuration",
"pages": [
"config/config-file",
"config/extensions/overview"
]
"pages": ["config/config-file", "config/extensions/overview"]
}
]
},
{
"group": "Development",
"pages": [
"cli-dev",
"run-tests"
]
"pages": ["cli-dev", "run-tests"]
},
{
"group": "Deployment",
Expand All @@ -173,9 +160,7 @@
"github-actions",
{
"group": "Deployment integrations",
"pages": [
"vercel-integration"
]
"pages": ["vercel-integration"]
}
]
},
Expand All @@ -187,13 +172,7 @@
"errors-retrying",
{
"group": "Wait",
"pages": [
"wait",
"wait-for",
"wait-until",
"wait-for-event",
"wait-for-request"
]
"pages": ["wait", "wait-for", "wait-until", "wait-for-event", "wait-for-request"]
},
"queue-concurrency",
"versioning",
Expand Down Expand Up @@ -238,10 +217,7 @@
"management/overview",
{
"group": "Tasks API",
"pages": [
"management/tasks/trigger",
"management/tasks/batch-trigger"
]
"pages": ["management/tasks/trigger", "management/tasks/batch-trigger"]
},
{
"group": "Runs API",
Expand Down Expand Up @@ -280,9 +256,7 @@
},
{
"group": "Projects API",
"pages": [
"management/projects/runs"
]
"pages": ["management/projects/runs"]
}
]
},
Expand Down Expand Up @@ -328,17 +302,11 @@
},
{
"group": "Help",
"pages": [
"community",
"help-slack",
"help-email"
]
"pages": ["community", "help-slack", "help-email"]
},
{
"group": "",
"pages": [
"guides/introduction"
]
"pages": ["guides/introduction"]
},
{
"group": "Frameworks",
Expand Down Expand Up @@ -378,6 +346,10 @@
}
]
},
{
"group": "Example projects",
"pages": ["guides/example-projects/realtime-fal-ai"]
},
{
"group": "Example tasks",
"pages": [
Expand All @@ -404,20 +376,16 @@
},
{
"group": "Dashboard",
"pages": [
"guides/dashboard/creating-a-project"
]
"pages": ["guides/dashboard/creating-a-project"]
},
{
"group": "Migrations",
"pages": [
"guides/use-cases/upgrading-from-v2"
]
"pages": ["guides/use-cases/upgrading-from-v2"]
}
],
"footerSocials": {
"twitter": "https://twitter.com/triggerdotdev",
"github": "https://github.com/triggerdotdev",
"linkedin": "https://www.linkedin.com/company/triggerdotdev"
}
}
}
Loading