Skip to content

Commit 664bce5

Browse files
D-K-PD-K-P
committed
Added vercel ai sdk image generator example to the docs
1 parent 7347158 commit 664bce5

File tree

3 files changed

+49
-6
lines changed

3 files changed

+49
-6
lines changed

‎docs/guides/example-projects/vercel-ai-sdk-image-generator.mdx

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
---
2+
title: "Vercel AI SDK image generator"
3+
sidebarTitle: "Vercel AI SDK image generator"
4+
description: "This example Next.js project uses the Vercel AI SDK to generate images from a prompt."
5+
---
6+
7+
import RealtimeLearnMore from "/snippets/realtime-learn-more.mdx";
8+
9+
## Overview
10+
11+
This demo is a full stack example that uses the following:
12+
13+
- A [Next.js](https://nextjs.org/) app using [shadcn](https://ui.shadcn.com/) for the UI
14+
- Our 'useRealtimeRun' [React hook](https://trigger.dev/docs/frontend/react-hooks/realtime) to subscribe to the run and show updates on the frontend
15+
- 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
16+
17+
## GitHub repo
18+
19+
<Card
20+
title="View the Vercel AI SDK image generator repo"
21+
icon="GitHub"
22+
href="https://github.com/triggerdotdev/examples/tree/main/vercel-ai-sdk-image-generator"
23+
>
24+
Click here to view the full code for this project in our examples repository on GitHub. You can
25+
fork it and use it as a starting point for your own project.
26+
</Card>
27+
28+
## Video
29+
30+
<video
31+
controls
32+
className="w-full aspect-video"
33+
src="https://github.com/user-attachments/assets/960edcb6-e225-4983-a48c-6fa697295dec"
34+
></video>
35+
36+
## Relevant code
37+
38+
- 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).
39+
- We use a [useRealtimeRun](https://trigger.dev/docs/frontend/react-hooks/realtime#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).
40+
41+
<RealtimeLearnMore />

‎docs/guides/introduction.mdx

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -37,11 +37,12 @@ Get set up fast using our detailed walk-through guides.
3737

3838
Example projects are full projects with example repos you can fork and use. These are a great way of learning how to encorporate Trigger.dev into your project.
3939

40-
| Example project | Description | Framework | GitHub Repo |
41-
| :--------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------- | :-------- | :---------------------------------------------------------------------------------------------------- |
42-
| [Realtime Fal.ai image generation](/guides/example-projects/realtime-fal-ai) | Generate an image from a prompt using Fal.ai and show the progress of the task on the frontend using Realtime. | Next.js | [View the repo](https://github.com/triggerdotdev/examples/tree/main/realtime-fal-ai-image-generation) |
43-
| [Batch LLM Evaluator](/guides/example-projects/batch-llm-evaluator) | Evaluate multiple LLM models and stream the results to the frontend. | Next.js | [View the repo](https://github.com/triggerdotdev/examples/tree/main/batch-llm-evaluator) |
44-
| [Realtime CSV Importer](/guides/example-projects/realtime-csv-importer) | Upload a CSV file and see the progress of the task streamed to the frontend. | Next.js | [View the repo](https://github.com/triggerdotdev/examples/tree/main/realtime-csv-importer) |
40+
| Example project | Description | Framework | GitHub Repo |
41+
| :-------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------- | :-------- | :---------------------------------------------------------------------------------------------------- |
42+
| [Realtime Fal.ai image generation](/guides/example-projects/realtime-fal-ai) | Generate an image from a prompt using Fal.ai and show the progress of the task on the frontend using Realtime. | Next.js | [View the repo](https://github.com/triggerdotdev/examples/tree/main/realtime-fal-ai-image-generation) |
43+
| [Batch LLM Evaluator](/guides/example-projects/batch-llm-evaluator) | Evaluate multiple LLM models and stream the results to the frontend. | Next.js | [View the repo](https://github.com/triggerdotdev/examples/tree/main/batch-llm-evaluator) |
44+
| [Realtime CSV Importer](/guides/example-projects/realtime-csv-importer) | Upload a CSV file and see the progress of the task streamed to the frontend. | Next.js | [View the repo](https://github.com/triggerdotdev/examples/tree/main/realtime-csv-importer) |
45+
| [Vercel AI SDK image generator](/guides/example-projects/vercel-ai-sdk-image-generator) | Use the Vercel AI SDK to generate images from a prompt. | Next.js | [View the repo](https://github.com/triggerdotdev/examples/tree/main/vercel-ai-sdk-image-generator) |
4546

4647
## Example tasks
4748

‎docs/mint.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -346,7 +346,8 @@
346346
"pages": [
347347
"guides/example-projects/realtime-fal-ai",
348348
"guides/example-projects/batch-llm-evaluator",
349-
"guides/example-projects/realtime-csv-importer"
349+
"guides/example-projects/realtime-csv-importer",
350+
"guides/example-projects/vercel-ai-sdk-image-generator"
350351
]
351352
},
352353
{

0 commit comments

Comments
 (0)