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
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