diff --git a/docs/frontend/react-hooks/overview.mdx b/docs/frontend/react-hooks/overview.mdx
index da4286c95c..3dedfcaa2b 100644
--- a/docs/frontend/react-hooks/overview.mdx
+++ b/docs/frontend/react-hooks/overview.mdx
@@ -4,6 +4,8 @@ sidebarTitle: Overview
description: Using the Trigger.dev v3 API from your React application.
---
+import RealtimeExamplesCards from "/snippets/realtime-examples-cards.mdx";
+
Our react hooks package provides a set of hooks that make it easy to interact with the Trigger.dev API from your React application, using our [frontend API](/frontend/overview). You can use these hooks to fetch runs, and subscribe to real-time updates, and trigger tasks from your frontend application.
## Installation
@@ -331,3 +333,5 @@ See our [Realtime hooks documentation](/frontend/react-hooks/realtime) for more
## Trigger Hooks
See our [Trigger hooks documentation](/frontend/react-hooks/triggering) for more information.
+
+<RealtimeExamplesCards />
diff --git a/docs/frontend/react-hooks/realtime.mdx b/docs/frontend/react-hooks/realtime.mdx
index bf3c290c68..d1cb260faa 100644
--- a/docs/frontend/react-hooks/realtime.mdx
+++ b/docs/frontend/react-hooks/realtime.mdx
@@ -4,6 +4,8 @@ sidebarTitle: Realtime
description: Get live updates from the Trigger.dev API in your frontend application.
---
+import RealtimeExamplesCards from "/snippets/realtime-examples-cards.mdx";
+
These hooks allow you to subscribe to runs, batches, and streams using [Trigger.dev realtime](/realtime). Before reading this guide:
- Read our [Realtime documentation](/realtime) to understand how the Trigger.dev realtime API works.
@@ -414,3 +416,5 @@ export function MyComponent({
);
}
```
+
+<RealtimeExamplesCards />
diff --git a/docs/frontend/react-hooks/triggering.mdx b/docs/frontend/react-hooks/triggering.mdx
index 9b00d0f295..26bfcb1c12 100644
--- a/docs/frontend/react-hooks/triggering.mdx
+++ b/docs/frontend/react-hooks/triggering.mdx
@@ -4,6 +4,8 @@ sidebarTitle: Triggering
description: Triggering tasks from your frontend application.
---
+import RealtimeExamplesCards from "/snippets/realtime-examples-cards.mdx";
+
We provide a set of hooks that can be used to trigger tasks from your frontend application.
## Demo
@@ -248,3 +250,5 @@ export function MyComponent({ publicAccessToken }: { publicAccessToken: string }
);
}
```
+
+<RealtimeExamplesCards />
diff --git a/docs/realtime/overview.mdx b/docs/realtime/overview.mdx
index b4193f1366..718181dc16 100644
--- a/docs/realtime/overview.mdx
+++ b/docs/realtime/overview.mdx
@@ -4,6 +4,8 @@ sidebarTitle: Overview
description: Using the Trigger.dev v3 realtime API
---
+import RealtimeExamplesCards from "/snippets/realtime-examples-cards.mdx";
+
Trigger.dev Realtime is a set of APIs that allow you to subscribe to runs and get real-time updates on the run status. This is useful for monitoring runs, updating UIs, and building realtime dashboards.
## How it works
@@ -17,9 +19,9 @@ The Realtime API is built on top of [Electric SQL](https://electric-sql.com/), a
height="315"
src="https://www.youtube.com/embed/RhJAbSGkS88?si=4Z72SfygeklNI3As"
title="YouTube video player"
- allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
- referrerPolicy="strict-origin-when-cross-origin"
- allowFullScreen
+ allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+ referrerPolicy="strict-origin-when-cross-origin"
+ allowFullScreen
/>
## Usage
@@ -266,3 +268,5 @@ The Realtime API in the Trigger.dev Cloud limits the number of concurrent subscr
## Known issues
There is currently a known issue where the realtime API does not work if subscribing to a run that has a large payload or large output and are stored in object store instead of the database. We are working on a fix for this issue: https://github.com/triggerdotdev/trigger.dev/issues/1451. As a workaround you'll need to keep payloads and outputs below 128KB when using the realtime API.
+
+<RealtimeExamplesCards />
diff --git a/docs/realtime/streams.mdx b/docs/realtime/streams.mdx
index 6f5ba353ca..aa74a68e09 100644
--- a/docs/realtime/streams.mdx
+++ b/docs/realtime/streams.mdx
@@ -4,6 +4,8 @@ sidebarTitle: Streams
description: Stream data in realtime from inside your tasks
---
+import RealtimeExamplesCards from "/snippets/realtime-examples-cards.mdx";
+
The world is going realtime, and so should your tasks. With the Streams API, you can stream data from your tasks to the outside world in realtime. This is useful for a variety of use cases, including AI.
## How it works
@@ -449,3 +451,5 @@ export const aiStreamingWithTools = schemaTask({
},
});
```
+
+<RealtimeExamplesCards />
diff --git a/docs/snippets/realtime-examples-cards.mdx b/docs/snippets/realtime-examples-cards.mdx
new file mode 100644
index 0000000000..9cfaa80576
--- /dev/null
+++ b/docs/snippets/realtime-examples-cards.mdx
@@ -0,0 +1,54 @@
+## Examples
+
+<CardGroup cols={2}>
+ <Card
+ title="Image Generation with fal.ai"
+ icon="image"
+ href="/guides/example-projects/realtime-fal-ai"
+ >
+ A Next.js app that uses the Realtime API and react hooks to create on-demand image generation
+ through fal.ai's services.
+ </Card>
+ <Card
+ title="Realtime CSV Importer"
+ icon="file-csv"
+ href="/guides/example-projects/realtime-csv-importer"
+ >
+ Upload CSV files and view the progress of the task being processed on the frontend live using
+ the Realtime API.
+ </Card>
+ <Card
+ title="Batch LLM Evaluator"
+ icon="sparkles"
+ href="/guides/example-projects/batch-llm-evaluator"
+ >
+ A Next.js app that uses the Realtime API and react hooks to evaluate language model responses on
+ the frontend in real-time.
+ </Card>
+ <Card
+ title="Claude Thinking Chatbot"
+ icon="messages"
+ href="/guides/example-projects/claude-thinking-chatbot"
+ >
+ A chatbot that demonstrates Claude 3.7's thinking capabilities through the Realtime API and
+ react hooks.
+ </Card>
+
+</CardGroup>
+
+### Learn more
+
+<CardGroup cols={2}>
+ <Card title="View all our guides & examples" icon="books" href="/guides">
+ Guides, example projects and example tasks. Copy any of the code and use it in your own
+ projects.
+ </Card>
+ <Card
+ title="Example projects repo"
+ icon="github"
+ href="https://github.com/triggerdotdev/examples"
+ >
+ Star/Fork our examples repo to learn more about how to use Trigger.dev in full stack
+ applications.
+ </Card>
+</CardGroup>