Overview
This demo is a full stack example that uses the following:- A Next.js app using shadcn for the UI
- Our ‘useRealtimeRun’ React hook to subscribe to the run and show updates on the frontend
- The Vercel AI SDK to generate images using OpenAI’s DALL-E models
GitHub repo
View the Vercel AI SDK image generator repo
Video
Relevant code
- View the Trigger.dev task code which generates the image using the Vercel AI SDK in src/trigger/realtime-generate-image.ts.
- We use a useRealtimeRun hook to subscribe to the run in src/app/processing/[id]/ProcessingContent.tsx.
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