> ## Documentation Index
> Fetch the complete documentation index at: https://trigger.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# 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](https://nextjs.org/) app using [shadcn](https://ui.shadcn.com/) for the UI
* Our 'useRealtimeRun' [React hook](https://trigger.dev/docs/realtime/react-hooks/subscribe.md#userealtimerun) to subscribe to the run and show updates on the frontend
* The [Vercel AI SDK](https://sdk.vercel.ai/docs/introduction) to [generate images](https://sdk.vercel.ai/docs/ai-sdk-core/image-generation) using OpenAI's DALL-E models

## GitHub repo

> [card] [View the Vercel AI SDK image generator repo](https://github.com/triggerdotdev/examples/tree/main/vercel-ai-sdk-image-generator)
>
> 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

<video controls src="https://github.com/user-attachments/assets/960edcb6-e225-4983-a48c-6fa697295dec" />

## Relevant code

* View the Trigger.dev task code which generates the image using the Vercel AI SDK in [src/trigger/realtime-generate-image.ts](https://github.com/triggerdotdev/examples/tree/main/vercel-ai-sdk-image-generator/src/trigger/realtime-generate-image.ts).
* We use a [useRealtimeRun](https://trigger.dev/docs/realtime/react-hooks/subscribe.md#userealtimerun) hook to subscribe to the run in [src/app/processing/\[id\]/ProcessingContent.tsx](https://github.com/triggerdotdev/examples/tree/main/vercel-ai-sdk-image-generator/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](https://trigger.dev/docs/realtime.md) - learn more about how to subscribe to runs and get real-time updates
* [Realtime streaming](https://trigger.dev/docs/realtime/react-hooks/streams.md) - learn more about streaming data from your tasks
* [Batch Triggering](https://trigger.dev/docs/triggering.md#tasks-batchtrigger) - learn more about how to trigger tasks in batches
* [React hooks](https://trigger.dev/docs/realtime/react-hooks.md) - learn more about using React hooks to interact with the Trigger.dev API


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.