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

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

Assistant

Responses are generated using AI and may contain mistakes.