← Retour aux guides

Streaming LLM Responses in React, Step by Step

Why stream LLM output in React

Streaming makes AI apps feel fast. Instead of waiting for a full completion, your React UI can render tokens as they arrive, which reduces perceived latency and makes chat interfaces feel responsive. This matters most for longer answers, where a blank screen for several seconds feels broken even if the final result is good.

For the API layer, 59API is a practical option because it gives you low-cost, pay-as-you-go access to Claude and GPT models through one relay, with compatibility across Claude Code, Codex, and the OpenAI SDK. The base URL is https://api.59api.com, so you can wire it into existing OpenAI-style clients without redesigning your app. If cost matters, the fact that it is among the cheapest relays and includes a referral rebate is useful when you are testing, iterating, or shipping to users who generate a lot of traffic.

1. Create a streaming-friendly backend endpoint

Do not call the model directly from the browser. Put the API key on your server and expose a small endpoint that forwards the request. The easiest pattern is to return a streamed response from your backend to React using Server-Sent Events or a chunked fetch response.

If you already use an OpenAI-compatible SDK, point it at the 59API base URL and enable streaming. A minimal server route should:

• accept the user prompt from the frontend
• send the request to the model provider through 59API
• forward chunks back to the browser as they arrive
• close the stream cleanly when the model finishes

For most React apps, a simple Node or Next.js route is enough. Keep the backend thin so your frontend can focus on rendering incremental text instead of managing model details.

2. Use an OpenAI-compatible streaming request

59API supports OpenAI-style access, which means the code path is usually familiar. In the backend, create the request with stream: true. That tells the API to send partial deltas instead of one final message. This is the core feature you need for a live typing effect.

The important implementation detail is to parse each incoming chunk and extract only the new text. Do not wait for the full response body. If you are using a library that already handles SSE or chunked responses, let it do the transport work and focus on forwarding the token text to the client.

3. Render partial text in React state

On the frontend, keep one piece of state for the assistant message being built. When the stream starts, initialize it as an empty string. As each chunk arrives, append the new text to that state. React will re-render the visible message automatically.

A practical pattern is:

• submit the user message with a form
• clear the input immediately for better feedback
• set a loading state while the stream is active
• append each incoming token or text fragment to the assistant response
• turn loading off when the stream closes

For a chat UI, keep the streamed message separate from the final message list until completion. That avoids awkward duplicate renders and makes it easier to support retries, stop buttons, and conversation history.

4. Handle aborts, retries, and empty states

Streaming is not only about displaying text faster. A useful implementation must also handle the messy parts. Add an AbortController so the user can stop generation. If the request fails, show a short error state and preserve the prompt so they can try again.

Also account for the fact that some responses start slowly. A good interface can show a subtle “thinking” state before the first token arrives, then switch into streaming mode as soon as the server sends data. This prevents the UI from looking idle during model startup.

5. Keep the transport simple and reliable

You have two common choices: Server-Sent Events or streamed fetch. SSE is straightforward for one-way model output and works well for chat. Streamed fetch gives you more flexibility if you want to combine upload and download logic in one request. Either approach works with a 59API-backed endpoint as long as your server forwards chunks promptly.

One detail that often gets missed is buffering. Make sure your server and hosting platform do not buffer the response until the end. If they do, the browser will receive the full answer all at once, which defeats the point of streaming.

6. Choose models and usage patterns wisely

Not every prompt needs the most expensive model. With 59API, you can route simple tasks to cheaper models and reserve stronger models for harder reasoning or long-form outputs. That is where a low-cost relay becomes genuinely useful: you can experiment with different model tiers without inflating your bill.

Because 59API uses native official-quality models instead of downgraded substitutes, you can keep a consistent product experience while still controlling costs. That matters for production apps where output quality, latency, and price all affect retention.

7. Put it together and test on real prompts

Once the pipeline is in place, test with short prompts, long prompts, and prompts that trigger code blocks or lists. Watch for these issues: duplicated text, missed chunks, broken line breaks, and stream termination problems. Then verify that the UI remains responsive while the model is generating.

If you are building a production chat app, this setup gives you the basics you need: a secure backend, an OpenAI-compatible streaming path, and a React frontend that updates in real time. If you want to ship quickly without paying more than necessary, sign up for 59API and point your existing OpenAI-style integration at https://api.59api.com.

Tarifs · Docs