Image generation with Fal.ai and Trigger.dev Realtime

This example Next.js 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
• When a form is submitted in the UI, triggering the task using a server action
• Showing the progress of the task 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

View the project on GitHub

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.

Learn more about Trigger.dev Realtime

To learn more, take a look at the following resources:

• Trigger.dev Realtime - learn more about how to subscribe to runs and get real-time updates
• Realtime streaming - learn more about streaming data from your tasks
• Batch Triggering - learn more about how to trigger tasks in batches
• React hooks - learn more about using React hooks to interact with the Trigger.dev API

Assistant

Responses are generated using AI and may contain mistakes.