chore: import upstream snapshot with attribution

2026-07-13 13:32:57 +08:00
commit cd420f9332
4811 changed files with 884702 additions and 0 deletions
@@ -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 />