Overview

This demo is a full stack example that uses the following:

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: