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

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

<RealtimeLearnMore />