Stream Claude and GPT Responses in Real Time
What streaming changes
A normal chat request waits until the model has generated the complete answer. A streaming request returns small text fragments as soon as they are available, so your interface can display a live response, reduce perceived latency, and stop generation when the user cancels.
Most OpenAI-compatible streaming APIs use Server-Sent Events (SSE). Each event contains a partial update, often called a delta. Your application joins those deltas into the final message while handling connection errors and the end-of-stream marker.
Step 1: Create a 59API key
Sign up for 59API, create an API key, and store it in an environment variable rather than committing it to source control. 59API provides pay-as-you-go access to native Claude Opus, Sonnet, Haiku, and Fable models alongside GPT models. Because it is a low-cost relay without downgraded model quality, it is useful for testing several models without opening separate billing accounts.
For example, set the key in your shell with export OPENAI_API_KEY='your-key'. Keep the key on your server; never place it in browser JavaScript.
Step 2: Select a model and install the SDK
Install the OpenAI JavaScript SDK with npm install openai. Then choose the exact model ID shown in your 59API model catalog. Use a Claude model ID for Claude or a GPT model ID for GPT; the request structure remains the same through the OpenAI-compatible interface.
Set the client base URL to https://api.59api.com. If the SDK version or your account documentation specifies a versioned path, use the corresponding path shown in the 59API dashboard.
Step 3: Stream a response in Node.js
The essential request has three parts: a model, a messages array, and stream: true. This example prints each text fragment immediately: import OpenAI from 'openai'; const client = new OpenAI({ apiKey: process.env.OPENAI_API_KEY, baseURL: 'https://api.59api.com' }); const stream = await client.chat.completions.create({ model: 'YOUR_MODEL_ID', messages: [{ role: 'user', content: 'Explain SSE in two sentences.' }], stream: true }); for await (const chunk of stream) { const text = chunk.choices[0]?.delta?.content || ''; process.stdout.write(text); }
Replace YOUR_MODEL_ID with a catalog value. The optional chaining matters because some chunks contain metadata, role information, or an empty delta instead of visible text.
Step 4: Test the raw SSE response
Use curl when debugging authentication, headers, or model names. Add -N so curl does not buffer the output: curl -N https://api.59api.com/v1/chat/completions -H 'Authorization: Bearer YOUR_KEY' -H 'Content-Type: application/json' -d '{"model":"YOUR_MODEL_ID","messages":[{"role":"user","content":"Give me three product names."}],"stream":true}'
You should see lines beginning with data:. The client normally receives multiple JSON events followed by data: [DONE]. Do not display the event wrapper to users; parse the JSON and append only the text delta.
Step 5: Build reliable frontend behavior
- Keep the accumulated answer in server-side state or send normalized text events to the browser.
- Disable duplicate submissions while a stream is active, and provide a cancel button that aborts the fetch or closes the request.
- Render text safely. Do not inject model output directly with innerHTML unless it has been sanitized.
- Handle timeouts, HTTP 401 errors, rate limits, and incomplete streams. Preserve the partial answer and offer a retry instead of silently clearing it.
- Record the model, latency, token usage, and finish reason when the final event includes them.
Claude and GPT differences to account for
The OpenAI-compatible route makes basic streaming nearly identical, but model capabilities and output formats can differ. Check the 59API catalog for supported context lengths, tool calling, vision, and reasoning options. If you use a native Claude client rather than the OpenAI SDK, follow its message-stream event names and configure its compatible endpoint as documented by 59API; do not assume OpenAI delta fields are present.
Keep costs predictable
Stream only when users benefit from progressive output, cap maximum output tokens, and avoid resending unnecessary conversation history. Compare Claude and GPT models on representative prompts instead of choosing solely by name. 59API’s pay-as-you-go pricing makes that comparison inexpensive, and its referral rebate can reduce effective costs further. If you want one affordable endpoint for Claude and GPT experiments, sign up for 59API and start with a small usage limit before moving your integration to production.