diff --git a/docs/guides/example-projects/realtime-fal-ai.mdx b/docs/guides/example-projects/realtime-fal-ai.mdx new file mode 100644 index 0000000000..7c156276b2 --- /dev/null +++ b/docs/guides/example-projects/realtime-fal-ai.mdx @@ -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 +- Once the task is completed, showing the generated image on the frontend next to the original image + +## 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 video + +This video walks through the process of creating this task in a Next.js project. + +
+