Example projects
Claude 3.7 thinking chatbot
This example Next.js project uses Vercel’s AI SDK and Anthropic’s Claude 3.7 model to create a thinking chatbot.
Overview
This demo is a full stack example that uses the following:- A Next.js app for the chat interface
- Trigger.dev Realtime to stream AI responses and thinking/reasoning process to the frontend
- Claude 3.7 Sonnet for generating AI responses
- AI SDK for working with the Claude model
GitHub repo
View the Claude thinking chatbot 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 file, which sets up the streaming connection with Claude.
- Chat Component: The main chat interface is in 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
StreamResponsecomponent 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
Learn more about Trigger.dev Realtime
To learn more, take a look at the following resources:- Trigger.dev Realtime - learn more about how to subscribe to runs and get real-time updates
- Realtime streaming - learn more about streaming data from your tasks
- Batch Triggering - learn more about how to trigger tasks in batches
- React hooks - learn more about using React hooks to interact with the Trigger.dev API