Streaming Claude and GPT in 2026: Build It Right
Streaming makes an AI application feel faster by displaying output before generation finishes. It does not necessarily reduce total generation time or token costs. This 2026 guide explains how to stream Claude and GPT reliably, including endpoint selection, event handling, cancellation, and production monitoring.
1. Choose the endpoint before writing the parser
Streaming is not one universal response format. OpenAI-compatible Chat Completions, the OpenAI Responses API, and Claude-native Messages use different event structures. An SDK may normalize transport details, but your application still needs to understand the selected API.
For 59API, start with https://api.59api.com and check the dashboard or documentation for the exact SDK base URL, including whether it needs a versioned path. Do not guess endpoint support. Its catalog lists options such as Claude Sonnet 5.5 and GPT-6.1 Sol; copy the corresponding API identifier rather than assuming the display name is valid in requests.
2. Enable streaming and consume incremental output
With the OpenAI JavaScript SDK, initialize a client using your server-side API key and verified baseURL. For a supported Chat Completions route, the core request is:
const stream = await client.chat.completions.create({ model: modelId, messages: [{ role: 'user', content: 'Explain HTTP streaming briefly.' }], stream: true });
Here, modelId is the identifier verified in your provider dashboard. Consume the returned asynchronous iterator:
for await (const chunk of stream) { const text = chunk.choices[0]?.delta?.content; if (text) sendToBrowser(text); }
sendToBrowser is your own transport function. Read delta.content, not message.content, and tolerate chunks without text. Those chunks can contain role information, tool-call fragments, completion metadata, or usage instead.
3. Handle the correct stream events
- Chat Completions: Inspect choices and finish_reason. A raw SSE implementation may receive a [DONE] sentinel, which is not JSON.
- Responses API: Where supported, consume typed events such as response.output_text.delta and handle completion or failure events separately.
- Claude-native Messages: Handle content_block_delta events containing text_delta, plus message_stop and error events. Tool-input deltas require separate accumulation.
When parsing server-sent events yourself, decode UTF-8 incrementally, retain incomplete frames, and handle both LF and CRLF separators. A network chunk is not an event or necessarily valid standalone JSON. Join an event's data lines before interpreting its payload.
4. Put a streaming backend between users and keys
Keep API keys on your server. Have the browser POST to your backend, then forward incremental output through a streaming HTTP response. Browser fetch supports POST and readable response bodies; native EventSource does not support a custom POST body.
For SSE responses, use Content-Type: text/event-stream and appropriate cache controls. Check framework, reverse-proxy, compression, and hosting behavior for buffering. Test through the complete production path, not just localhost.
Render generated text as text rather than trusted HTML. Batch small UI updates to avoid excessive rerenders, and stop reading upstream if the client disconnects.
5. Treat interruption differently from completion
Connect a Stop button to cancellation, such as an AbortController wired into the upstream request. Cancellation does not guarantee zero additional charges: processing may already have occurred.
Do not mark every closed connection as successful. Distinguish normal completion, output limits, tool handoffs, provider errors, and unexpected disconnects. Buffer tool-call arguments until complete and valid before considering execution.
Retry transient failures conservatively before displaying output. After partial output appears, offer an explicit retry instead of silently appending a second generation. Otherwise, users can receive duplicate or contradictory text.
6. Measure latency and cost independently
Track time to first visible text, total duration, completion status, and reported token usage. Streaming chunks are not tokens. On compatible Chat Completions routes, stream_options: { include_usage: true } can request final usage; verify support and tolerate an empty choices array in the usage chunk.
59API offers low-cost, pay-as-you-go access across multiple model families with OpenAI SDK compatibility. It advertises native official-quality models without downgrades and offers a referral rebate. Compare current input/output pricing, context limits, and supported streaming features for your chosen route rather than assuming identical behavior across models.
If that setup fits your application, sign up for 59API and test a small streaming workload before scaling.