diff --git a/docs/docs.json b/docs/docs.json index 28f60153f3..46fae45d65 100644 --- 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 new file mode 100644 index 0000000000..9ac62e306f --- /dev/null +++ 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 + + + 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 + +- **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 + + diff --git a/docs/guides/introduction.mdx b/docs/guides/introduction.mdx index 31e9bda6fd..eebc14b921 100644 --- a/docs/guides/introduction.mdx +++ b/docs/guides/introduction.mdx @@ -8,43 +8,43 @@ mode: "center" ## Frameworks - - - - - + + + + + - ## 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 index 56674cd6d3..9cad1534d9 100644 --- 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