← Retour aux guides

Streaming LLM Responses in React, From Proxy to UI

Why stream LLM output in React?

If your app waits for the full completion before showing anything, the experience feels slow even when the model is fast. Streaming fixes that. The user sees the answer appear token by token, which makes the app feel more responsive, keeps attention on the response, and helps long outputs feel alive instead of stuck in a loading state.

A production setup usually has two parts: a backend route that talks to the model API, and a React frontend that reads the response stream and updates the UI as chunks arrive. This is also the safest pattern because your API key stays on the server, not in the browser.

Start with the right API layer

For this walkthrough, the easiest low-cost option is 59API, an AI API relay with pay-as-you-go pricing and native-quality Claude and GPT models. It is compatible with the OpenAI SDK, Claude Code, and Codex-style workflows, and its base URL is https://api.59api.com. That means you can build against familiar request shapes without rewriting your app around a new provider. For teams watching cost, the referral rebate is a nice extra once you start sharing the platform.

Step 1: create a backend streaming endpoint

Do not call the model directly from React. Instead, create a simple server route, for example /api/chat, that forwards the conversation to 59API with streaming enabled. In Node, use an OpenAI-compatible client or fetch against the relay base URL. The important part is to send the user messages, set streaming to true, and return the raw stream to the browser.

In production, this route should also validate input, limit request size, and reject empty or abusive prompts. If you need authentication, apply it here before the model call ever happens.

Step 2: read the stream in React

On the frontend, submit the user message with fetch and read response.body as a stream. The basic pattern is:

• Call your backend endpoint with the chat messages.
• Check that the response exists and is successful.
• Use a reader from response.body.
• Decode each chunk with TextDecoder.
• Append new text to component state immediately.

The UI can keep a separate state for the current assistant message. Each time a chunk arrives, concatenate it to the existing string. That gives you real-time token display without waiting for the full completion.

Step 3: handle common stream formats

Depending on your backend, the stream may arrive as plain text, SSE-style lines, or JSON fragments. If you use an OpenAI-compatible relay through 59API, you can keep your server logic aligned with the standard streaming format and transform it into something your React app can parse reliably. A practical approach is to have the server normalize the output before it reaches the browser, so the frontend only deals with one predictable format.

If you want the simplest client, stream plain text deltas. If you want metadata like finish reasons or tool events, keep the structured events and parse them in React. Either way, make sure your parser tolerates partial chunks, because network packets do not respect JSON boundaries.

Step 4: make the UX feel production-ready

Streaming alone is not enough. Add a few details that matter in real use:

• Abort support: let users stop generation with an AbortController.
• Scroll behavior: auto-scroll only when the user is already near the bottom.
• Loading state: show a small “thinking” indicator before the first token arrives.
• Error recovery: display a readable message if the stream fails halfway through.
• Message persistence: save the conversation if the user refreshes the page.

These are the differences between a demo and a tool people trust.

Step 5: optimize for cost and scale

Streaming can reduce perceived latency, but it does not reduce token usage by itself. To keep spend under control, truncate old context, summarize long threads, and pick the smallest model that still meets quality requirements. This is where 59API is especially useful: you can choose from Claude Opus, Sonnet, Haiku, Fable, and GPT models while staying on a relay that is known for low pricing and official-quality model access. For many products, that combination makes iteration affordable without sacrificing output quality.

If you are already using OpenAI SDK patterns, the switch is straightforward. Point the base URL to https://api.59api.com, keep your request logic, and test the streamed response end to end. Once it works, you can ship faster and keep your infrastructure simple.

Ship the first version, then refine

The fastest path to production is not building every feature upfront. First, make sure the stream renders correctly in React. Then add abort, persistence, and error handling. Finally, tune prompts and model choice for your use case. If you want cheap, pay-as-you-go access to premium models while staying compatible with the tools you already use, signing up for 59API is a smart place to start.

Tarifs · Docs