Skip to main content

Streaming Responses

1 min read

Implementing real-time streaming responses with the Claude API


title: Streaming Responses description: Implementing real-time streaming responses with the Claude API

Streaming allows you to receive Claude's response in real-time as it's generated, providing a better user experience and enabling progressive rendering. This guide covers implementing streaming in various contexts.

Why Use Streaming?

  • Better UX: Users see responses immediately instead of waiting
  • Progressive rendering: Display partial results as they arrive
  • Long responses: Handle lengthy outputs without timeout issues
  • Cancellation: Users can stop generation mid-stream

Basic Streaming Implementation

Node.js / TypeScript

TypeScript

Python

Python

Server-Sent Events (SSE)

Next.js API Route

TypeScript

Client-Side Consumption

TypeScript

Stream Events

Understanding the event types:

| Event Type | Description | |------------|-------------| | message_start | Stream beginning, contains message metadata | | content_block_start | New content block starting | | content_block_delta | Incremental content update | | content_block_stop | Content block complete | | message_delta | Message-level updates (stop reason, usage) | | message_stop | Stream complete |

Processing All Events

TypeScript

Streaming with Tool Use

When Claude uses tools, the stream includes tool calls:

TypeScript

Cancellation

Client-Side Cancellation

TypeScript

Server-Side Cancellation

TypeScript

React Integration

Custom Hook for Streaming

TypeScript

Best Practices

1. Handle Reconnection

TypeScript

2. Progress Indication

Show users that something is happening:

TypeScript

3. Buffer for Word Boundaries

Avoid showing partial words:

TypeScript

Next Steps

Generated with AI using Claude AI by Anthropic

Model: Claude Opus 4.5 · Generated: 2025-12-20 · Build: v1.21.0-75762dc

Edit this page on GitHub··

Discussion

0/2000

Comments are reviewed before being published