triggerdotdev · ericallam · Mar 1, 2025 · Feb 28, 2025 · Feb 28, 2025 · Feb 28, 2025
diff --git a/docs/docs.json b/docs/docs.json
@@ -276,8 +276,9 @@
           {
             "group": "Example projects",
             "pages": [
-              "guides/example-projects/realtime-fal-ai",
               "guides/example-projects/batch-llm-evaluator",
+              "guides/example-projects/claude-thinking-chatbot",
+              "guides/example-projects/realtime-fal-ai",
               "guides/example-projects/realtime-csv-importer",
               "guides/example-projects/vercel-ai-sdk-image-generator"
             ]

diff --git a/docs/guides/example-projects/claude-thinking-chatbot.mdx b/docs/guides/example-projects/claude-thinking-chatbot.mdx
@@ -0,0 +1,50 @@
+---
+title: "Claude 3.7 thinking chatbot"
+sidebarTitle: "Claude thinking chatbot"
+description: "This example Next.js project uses Vercel's AI SDK and Anthropic's Claude 3.7 model to create a thinking chatbot."
+---
+
+import RealtimeLearnMore from "/snippets/realtime-learn-more.mdx";
+
+## Overview
+
+This demo is a full stack example that uses the following:
+
+- A [Next.js](https://nextjs.org/) app for the chat interface
+- [Trigger.dev Realtime](/realtime/overview) to stream AI responses and thinking/reasoning process to the frontend
+- [Claude 3.7 Sonnet](https://www.anthropic.com/claude) for generating AI responses
+- [AI SDK](https://sdk.vercel.ai/docs/introduction) for working with the Claude model
+
+## GitHub repo
+
+<Card
+  title="View the Claude thinking chatbot repo"
+  icon="GitHub"
+  href="https://github.com/triggerdotdev/examples/tree/main/claude-thinking-chatbot"
+>
+  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.
+</Card>
+
+## Video
+
+<video
+  controls
+  className="w-full aspect-video"
+  src="https://github.com/user-attachments/assets/053739a5-9736-4cb5-ab1c-81c35b69f4c4"
+></video>
+
+## Relevant code
+
+- **Claude Stream Task**: View the Trigger.dev task code in the [src/trigger/claude-stream.ts](https://github.com/triggerdotdev/examples/tree/main/claude-thinking-chatbot/src/trigger/claude-stream.ts) file, which sets up the streaming connection with Claude.
+- **Chat Component**: The main chat interface is in [app/components/claude-chat.tsx](https://github.com/triggerdotdev/examples/tree/main/claude-thinking-chatbot/app/components/claude-chat.tsx), which handles:
+  - Message state management
+  - User input handling
+  - Rendering of message bubbles
+  - Integration with Trigger.dev for streaming
+- **Stream Response**: The `StreamResponse` component within the chat component handles:
+  - Displaying streaming text from Claude
+  - Showing/hiding the thinking process with an animated toggle
+  - Auto-scrolling as new content arrives
+
+<RealtimeLearnMore />
diff --git a/docs/guides/introduction.mdx b/docs/guides/introduction.mdx
@@ -8,43 +8,43 @@ mode: "center"
 ## Frameworks
 
 <CardGroup cols={3}>
-  <Card title="Bun" img="/images/logo-bun.png" href="/guides/frameworks/bun"/>
-  <Card title="Next.js" img="/images/logo-nextjs.png" href="/guides/frameworks/nextjs"/>
-  <Card title="Node.js" img="/images/logo-nodejs.png" href="/guides/frameworks/nodejs"/>
-  <Card title="Remix" img="/images/logo-remix.png" href="/guides/frameworks/remix"/>
-  <Card title="SvelteKit" img="/images/logo-svelte.png" href="/guides/community/sveltekit"/>
+  <Card title="Bun" img="/images/logo-bun.png" href="/guides/frameworks/bun" />
+  <Card title="Next.js" img="/images/logo-nextjs.png" href="/guides/frameworks/nextjs" />
+  <Card title="Node.js" img="/images/logo-nodejs.png" href="/guides/frameworks/nodejs" />
+  <Card title="Remix" img="/images/logo-remix.png" href="/guides/frameworks/remix" />
+  <Card title="SvelteKit" img="/images/logo-svelte.png" href="/guides/community/sveltekit" />
 </CardGroup>
 
-
 ## Guides
 
 Get set up fast using our detailed walk-through guides.
 
-| Guide                                                                                      | Description                                       |
-| :----------------------------------------------------------------------------------------- | :------------------------------------------------ |
-| [AI Agent: Generate and translate copy](/guides/ai-agents/generate-translate-copy)                   | Chain prompts to generate and translate content   |
-| [AI Agent: Route questions](/guides/ai-agents/route-question)                                        | Route questions to different models based on complexity |
-| [AI Agent: Content moderation](/guides/ai-agents/respond-and-check-content)                         | Parallel check content while responding to customers |
-| [AI Agent: News verification](/guides/ai-agents/verify-news-article)                                | Orchestrate fact checking of news articles        |
-| [AI Agent: Translation refinement](/guides/ai-agents/translate-and-refine)                          | Evaluate and refine translations with feedback    |
-| [Prisma](/guides/frameworks/prisma)                                                        | How to setup Prisma with Trigger.dev              |
-| [Sequin database triggers](/guides/frameworks/sequin)                                      | Trigger tasks from database changes using Sequin  |
-| [Supabase edge function hello world](/guides/frameworks/supabase-edge-functions-basic)     | Trigger tasks from Supabase edge function         |
-| [Supabase database webhooks](/guides/frameworks/supabase-edge-functions-database-webhooks) | Trigger tasks using Supabase database webhooks    |
-| [Using webhooks in Next.js](/guides/frameworks/nextjs-webhooks)                            | Trigger tasks from a webhook in Next.js           |
-| [Using webhooks in Remix](/guides/frameworks/remix-webhooks)                               | Trigger tasks from a webhook in Remix             |
-| [Stripe webhooks](/guides/examples/stripe-webhook)                                         | Trigger tasks from incoming Stripe webhook events |
+| Guide                                                                                      | Description                                             |
+| :----------------------------------------------------------------------------------------- | :------------------------------------------------------ |
+| [AI Agent: Generate and translate copy](/guides/ai-agents/generate-translate-copy)         | Chain prompts to generate and translate content         |
+| [AI Agent: Route questions](/guides/ai-agents/route-question)                              | Route questions to different models based on complexity |
+| [AI Agent: Content moderation](/guides/ai-agents/respond-and-check-content)                | Parallel check content while responding to customers    |
+| [AI Agent: News verification](/guides/ai-agents/verify-news-article)                       | Orchestrate fact checking of news articles              |
+| [AI Agent: Translation refinement](/guides/ai-agents/translate-and-refine)                 | Evaluate and refine translations with feedback          |
+| [Prisma](/guides/frameworks/prisma)                                                        | How to setup Prisma with Trigger.dev                    |
+| [Sequin database triggers](/guides/frameworks/sequin)                                      | Trigger tasks from database changes using Sequin        |
+| [Supabase edge function hello world](/guides/frameworks/supabase-edge-functions-basic)     | Trigger tasks from Supabase edge function               |
+| [Supabase database webhooks](/guides/frameworks/supabase-edge-functions-database-webhooks) | Trigger tasks using Supabase database webhooks          |
+| [Using webhooks in Next.js](/guides/frameworks/nextjs-webhooks)                            | Trigger tasks from a webhook in Next.js                 |
+| [Using webhooks in Remix](/guides/frameworks/remix-webhooks)                               | Trigger tasks from a webhook in Remix                   |
+| [Stripe webhooks](/guides/examples/stripe-webhook)                                         | Trigger tasks from incoming Stripe webhook events       |
 
 ## Example projects
 
 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.
 
-| Example project                                                                         | Description                                                                                                    | Framework | GitHub                                                                                           |
+| Example project                                                                         | Description                                                                                                    | Framework | GitHub                                                                                                |
 | :-------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------- | :-------- | :---------------------------------------------------------------------------------------------------- |
-| [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 repo](https://github.com/triggerdotdev/examples/tree/main/realtime-fal-ai-image-generation) |
-| [Batch LLM Evaluator](/guides/example-projects/batch-llm-evaluator)                     | Evaluate multiple LLM models and stream the results to the frontend.                                           | Next.js   | [View repo](https://github.com/triggerdotdev/examples/tree/main/batch-llm-evaluator)              |
-| [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 repo](https://github.com/triggerdotdev/examples/tree/main/realtime-csv-importer)            |
-| [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 repo](https://github.com/triggerdotdev/examples/tree/main/vercel-ai-sdk-image-generator)    |
+| [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)              |
+| [Claude thinking chatbot](/guides/example-projects/claude-thinking-chatbot)             | Use Vercel's AI SDK and Anthropic's Claude 3.7 model to create a thinking chatbot.                             | Next.js   | [View the repo](https://github.com/triggerdotdev/examples/tree/main/claude-thinking-chatbot)          |
+| [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) |
+| [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)            |
+| [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)    |
 
 ## Example tasks
 

diff --git a/docs/snippets/realtime-learn-more.mdx b/docs/snippets/realtime-learn-more.mdx
@@ -2,6 +2,7 @@
 
 To learn more, take a look at the following resources:
 
-- [Realtime docs](https://trigger.dev/docs/realtime) - learn more about Realtime.
-- [Batch Trigger docs](https://trigger.dev/docs/triggering) - learn more about Batch Triggers.
-- [React hooks](https://trigger.dev/docs/frontend/react-hooks) - learn more about React hooks.
+- [Trigger.dev Realtime](/realtime) - learn more about how to subscribe to runs and get real-time updates
+- [Realtime streaming](/realtime/streams) - learn more about streaming data from your tasks
+- [Batch Triggering](/triggering#tasks-batchtrigger) - learn more about how to trigger tasks in batches
+- [React hooks](/frontend/react-hooks) - learn more about using React hooks to interact with the Trigger.dev API