Vercel AI SDK image generator

This example Next.js project uses the Vercel AI SDK to generate images from a prompt.

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

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

Assistant

Responses are generated using AI and may contain mistakes.