Skip to content

Commit 796e710

Browse files
D-K-PD-K-P
authored
Added claude thinking chatbot docs (#1743)
1 parent c8732be commit 796e710

File tree

4 files changed

+81
-29
lines changed

4 files changed

+81
-29
lines changed

‎docs/docs.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -276,8 +276,9 @@
276276
{
277277
"group": "Example projects",
278278
"pages": [
279-
"guides/example-projects/realtime-fal-ai",
280279
"guides/example-projects/batch-llm-evaluator",
280+
"guides/example-projects/claude-thinking-chatbot",
281+
"guides/example-projects/realtime-fal-ai",
281282
"guides/example-projects/realtime-csv-importer",
282283
"guides/example-projects/vercel-ai-sdk-image-generator"
283284
]

‎docs/guides/example-projects/claude-thinking-chatbot.mdx

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
---
2+
title: "Claude 3.7 thinking chatbot"
3+
sidebarTitle: "Claude thinking chatbot"
4+
description: "This example Next.js project uses Vercel's AI SDK and Anthropic's Claude 3.7 model to create a thinking chatbot."
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 for the chat interface
14+
- [Trigger.dev Realtime](/realtime/overview) to stream AI responses and thinking/reasoning process to the frontend
15+
- [Claude 3.7 Sonnet](https://www.anthropic.com/claude) for generating AI responses
16+
- [AI SDK](https://sdk.vercel.ai/docs/introduction) for working with the Claude model
17+
18+
## GitHub repo
19+
20+
<Card
21+
title="View the Claude thinking chatbot repo"
22+
icon="GitHub"
23+
href="https://github.com/triggerdotdev/examples/tree/main/claude-thinking-chatbot"
24+
>
25+
Click here to view the full code for this project in our examples repository on GitHub. You can
26+
fork it and use it as a starting point for your own project.
27+
</Card>
28+
29+
## Video
30+
31+
<video
32+
controls
33+
className="w-full aspect-video"
34+
src="https://github.com/user-attachments/assets/053739a5-9736-4cb5-ab1c-81c35b69f4c4"
35+
></video>
36+
37+
## Relevant code
38+
39+
- **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.
40+
- **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:
41+
- Message state management
42+
- User input handling
43+
- Rendering of message bubbles
44+
- Integration with Trigger.dev for streaming
45+
- **Stream Response**: The `StreamResponse` component within the chat component handles:
46+
- Displaying streaming text from Claude
47+
- Showing/hiding the thinking process with an animated toggle
48+
- Auto-scrolling as new content arrives
49+
50+
<RealtimeLearnMore />

‎docs/guides/introduction.mdx

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -8,43 +8,43 @@ mode: "center"
88
## Frameworks
99

1010
<CardGroup cols={3}>
11-
<Card title="Bun" img="/images/logo-bun.png" href="/guides/frameworks/bun"/>
12-
<Card title="Next.js" img="/images/logo-nextjs.png" href="/guides/frameworks/nextjs"/>
13-
<Card title="Node.js" img="/images/logo-nodejs.png" href="/guides/frameworks/nodejs"/>
14-
<Card title="Remix" img="/images/logo-remix.png" href="/guides/frameworks/remix"/>
15-
<Card title="SvelteKit" img="/images/logo-svelte.png" href="/guides/community/sveltekit"/>
11+
<Card title="Bun" img="/images/logo-bun.png" href="/guides/frameworks/bun" />
12+
<Card title="Next.js" img="/images/logo-nextjs.png" href="/guides/frameworks/nextjs" />
13+
<Card title="Node.js" img="/images/logo-nodejs.png" href="/guides/frameworks/nodejs" />
14+
<Card title="Remix" img="/images/logo-remix.png" href="/guides/frameworks/remix" />
15+
<Card title="SvelteKit" img="/images/logo-svelte.png" href="/guides/community/sveltekit" />
1616
</CardGroup>
1717

18-
1918
## Guides
2019

2120
Get set up fast using our detailed walk-through guides.
2221

23-
| Guide | Description |
24-
| :----------------------------------------------------------------------------------------- | :------------------------------------------------ |
25-
| [AI Agent: Generate and translate copy](/guides/ai-agents/generate-translate-copy) | Chain prompts to generate and translate content |
26-
| [AI Agent: Route questions](/guides/ai-agents/route-question) | Route questions to different models based on complexity |
27-
| [AI Agent: Content moderation](/guides/ai-agents/respond-and-check-content) | Parallel check content while responding to customers |
28-
| [AI Agent: News verification](/guides/ai-agents/verify-news-article) | Orchestrate fact checking of news articles |
29-
| [AI Agent: Translation refinement](/guides/ai-agents/translate-and-refine) | Evaluate and refine translations with feedback |
30-
| [Prisma](/guides/frameworks/prisma) | How to setup Prisma with Trigger.dev |
31-
| [Sequin database triggers](/guides/frameworks/sequin) | Trigger tasks from database changes using Sequin |
32-
| [Supabase edge function hello world](/guides/frameworks/supabase-edge-functions-basic) | Trigger tasks from Supabase edge function |
33-
| [Supabase database webhooks](/guides/frameworks/supabase-edge-functions-database-webhooks) | Trigger tasks using Supabase database webhooks |
34-
| [Using webhooks in Next.js](/guides/frameworks/nextjs-webhooks) | Trigger tasks from a webhook in Next.js |
35-
| [Using webhooks in Remix](/guides/frameworks/remix-webhooks) | Trigger tasks from a webhook in Remix |
36-
| [Stripe webhooks](/guides/examples/stripe-webhook) | Trigger tasks from incoming Stripe webhook events |
22+
| Guide | Description |
23+
| :----------------------------------------------------------------------------------------- | :------------------------------------------------------ |
24+
| [AI Agent: Generate and translate copy](/guides/ai-agents/generate-translate-copy) | Chain prompts to generate and translate content |
25+
| [AI Agent: Route questions](/guides/ai-agents/route-question) | Route questions to different models based on complexity |
26+
| [AI Agent: Content moderation](/guides/ai-agents/respond-and-check-content) | Parallel check content while responding to customers |
27+
| [AI Agent: News verification](/guides/ai-agents/verify-news-article) | Orchestrate fact checking of news articles |
28+
| [AI Agent: Translation refinement](/guides/ai-agents/translate-and-refine) | Evaluate and refine translations with feedback |
29+
| [Prisma](/guides/frameworks/prisma) | How to setup Prisma with Trigger.dev |
30+
| [Sequin database triggers](/guides/frameworks/sequin) | Trigger tasks from database changes using Sequin |
31+
| [Supabase edge function hello world](/guides/frameworks/supabase-edge-functions-basic) | Trigger tasks from Supabase edge function |
32+
| [Supabase database webhooks](/guides/frameworks/supabase-edge-functions-database-webhooks) | Trigger tasks using Supabase database webhooks |
33+
| [Using webhooks in Next.js](/guides/frameworks/nextjs-webhooks) | Trigger tasks from a webhook in Next.js |
34+
| [Using webhooks in Remix](/guides/frameworks/remix-webhooks) | Trigger tasks from a webhook in Remix |
35+
| [Stripe webhooks](/guides/examples/stripe-webhook) | Trigger tasks from incoming Stripe webhook events |
3736

3837
## Example projects
3938

4039
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.
4140

42-
| Example project | Description | Framework | GitHub |
41+
| Example project | Description | Framework | GitHub |
4342
| :-------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------- | :-------- | :---------------------------------------------------------------------------------------------------- |
44-
| [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) |
45-
| [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) |
46-
| [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) |
47-
| [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) |
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+
| [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) |
45+
| [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) |
46+
| [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) |
47+
| [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) |
4848

4949
## Example tasks
5050

‎docs/snippets/realtime-learn-more.mdx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
To learn more, take a look at the following resources:
44

5-
- [Realtime docs](https://trigger.dev/docs/realtime) - learn more about Realtime.
6-
- [Batch Trigger docs](https://trigger.dev/docs/triggering) - learn more about Batch Triggers.
7-
- [React hooks](https://trigger.dev/docs/frontend/react-hooks) - learn more about React hooks.
5+
- [Trigger.dev Realtime](/realtime) - learn more about how to subscribe to runs and get real-time updates
6+
- [Realtime streaming](/realtime/streams) - learn more about streaming data from your tasks
7+
- [Batch Triggering](/triggering#tasks-batchtrigger) - learn more about how to trigger tasks in batches
8+
- [React hooks](/frontend/react-hooks) - learn more about using React hooks to interact with the Trigger.dev API

0 commit comments

Comments
 (0)