Stream LLM Tokens in React: A Practical Guide
Why Stream LLM Responses?
When a React application waits for a complete LLM response, users may see a blank loading state for several seconds. Streaming improves that experience by displaying generated text as it arrives, similar to a live chat reply. It also makes long responses feel faster and lets users stop generation when the answer is already sufficient.
Most modern AI APIs deliver streamed output using Server-Sent Events (SSE). Your backend receives small data events, extracts the newly generated text, and forwards those events to the browser. React then appends each fragment to the message currently being displayed.
Use a Backend as a Secure Proxy
Do not put an AI API key in React code. Browser JavaScript can be inspected by every visitor, so a key embedded in an environment variable such as VITE_API_KEY is still exposed after the application is built. Instead, create a server endpoint such as /api/chat. The browser sends the user message to this endpoint, and the server adds the secret key before calling the model provider.
59API is useful for this setup because it provides pay-as-you-go access to Claude Opus, Sonnet, Haiku, Fable, and GPT models through https://api.59api.com. It is compatible with the OpenAI SDK and supports workflows involving Claude Code and Codex, so you can keep familiar request patterns while choosing a low-cost relay with native official-quality models.
Request a Stream from the Server
Your server should send a request with streaming enabled. For an OpenAI-compatible chat request, the important fields are model, messages, and stream: true. The request URL commonly uses the /v1/chat/completions path, with the API base URL configured as https://api.59api.com. Check your 59API account documentation for the exact model identifiers available to your account.
Conceptually, the server request looks like this: fetch('https://api.59api.com/v1/chat/completions', { method: 'POST', headers: { 'Authorization': 'Bearer ' + API_KEY, 'Content-Type': 'application/json' }, body: JSON.stringify({ model: 'your-model', messages, stream: true }) }). Do this in a server route, never in a component running in the browser.
After receiving the provider response, return a streaming response from your own endpoint with the content type text/event-stream. Forward each event as it arrives and flush the response when your server framework requires it. Also forward errors in a format your React client can display.
Read the Stream in React
In the component, create an AbortController for the request and call fetch('/api/chat', ...). Read the response body with response.body.getReader(), then decode bytes using a TextDecoder. A simplified loop is: const reader = response.body.getReader(); const decoder = new TextDecoder(); let buffer = ''; while (true) { const result = await reader.read(); if (result.done) break; buffer += decoder.decode(result.value, { stream: true }); }.
Network chunks do not necessarily match complete SSE events. Keep a buffer, split it on double newlines, and retain the final incomplete section for the next read. For each complete event, remove the data: prefix, ignore empty lines, and parse the JSON payload. Append the returned text delta to React state with setAnswer(previous => previous + delta). Providers may send a final [DONE] marker, which should end processing without attempting to parse it as JSON.
Handle Cancellation and Errors
Store the AbortController in component state or a ref. A Stop button can call controller.abort(), then reset the loading state. Disable duplicate submissions while a request is active, and clear the previous answer before starting a new stream. Check response.ok before reading the body, because authentication, quota, or model errors are usually returned as a normal HTTP error response.
- Show a visible typing or connection state while the first token is pending.
- Keep the submit button disabled until the message is non-empty.
- Render the final answer only after the stream closes, but update the visible draft on every delta.
- Log provider request IDs on the server, while avoiding logging user prompts that may contain private data.
Keep Costs Predictable
Streaming changes delivery speed, not token pricing, so set sensible maximum output tokens and reject excessively long prompts. Choose a smaller model for routine tasks and reserve larger Claude or GPT models for complex work. 59API’s pay-as-you-go pricing and referral rebate can make experimentation more affordable, especially when you need several model options without committing to a large subscription. Developers who want to try the relay can sign up for a 59API account and configure the API base URL in their existing server-side SDK.