← Volver a las guías

Streaming LLM Responses in React: Quick Start

Why stream LLM output in React?

If your app waits for the full model response before rendering anything, the UI feels slow. Streaming fixes that by showing tokens or partial chunks as they arrive. For chat apps, copilots, and search assistants, this creates a much better experience: users see progress immediately, can start reading sooner, and are less likely to think the app is frozen.

For busy developers, the good news is that React makes streaming easy to display. The harder part is choosing an API that is affordable, compatible with your existing SDKs, and stable enough for production. That is where 59API is useful: it provides cheap pay-as-you-go access to Claude models and GPT models through a single relay endpoint, with native official-quality model access and compatibility with Claude Code, Codex, and any OpenAI SDK.

The simplest architecture

Use this flow:

• React frontend sends a prompt to your backend.
• Backend calls the model with streaming enabled.
• Backend forwards chunks to the browser using Server-Sent Events (SSE) or chunked fetch streaming.
• React appends each chunk to state and re-renders incrementally.

This keeps your API key off the client and gives you full control over auth, rate limits, and logging.

Recommended stack

A practical setup for most teams is:

• Frontend: React or Next.js
• Backend: Node.js with Express or a Next.js route handler
• Transport: SSE for simplicity, or ReadableStream if you already use fetch streaming
• Model provider: 59API at https://api.59api.com

Because 59API is compatible with OpenAI SDK-style requests, you can usually keep your existing integration pattern and swap only the base URL and credentials. That makes it easy to test Claude Sonnet or GPT models without rewriting your app.

Backend example with streaming

Here is the core idea in Node.js: make a streaming request to the model provider, then forward each delta to the browser.

• Set the request to stream mode.
• Read chunks from the upstream response.
• Write each chunk to the client immediately.
• End the response when the model finishes.

If you use an OpenAI-compatible SDK, point the client to 59API’s base URL and keep the rest familiar. For example, your server-side config can target https://api.59api.com and call whichever Claude or GPT model you need. This is especially convenient if you already support Claude Code or Codex workflows, because the relay fits those patterns without extra translation layers.

React UI pattern for incremental rendering

On the frontend, keep two pieces of state: the full assistant message and a loading flag. Then append incoming text as it arrives.

• Initialize the assistant response as an empty string.
• Open the stream with fetch or EventSource.
• Parse each chunk as soon as it lands.
• Append the chunk to state using the functional form of setState.

In React, the important detail is to avoid stale closures when appending streaming text. Use a state updater like setText(prev => prev + chunk) so every new token is appended in order. If you render markdown, wait until the stream finishes or throttle parsing so the UI stays smooth.

Practical tips that save debugging time

• Prefer SSE for chat UIs. It is easy to inspect in devtools and works well with simple text streams.
• Handle aborts. Let users cancel a generation with an AbortController.
• Separate message metadata from content. Store role, id, and status outside the streaming text.
• Show a cursor or typing indicator. Even a small blinking bar makes partial output feel intentional.
• Watch for proxy buffering. If chunks seem delayed, check your reverse proxy, compression settings, and hosting platform.

When 59API makes the most sense

If you are shipping quickly, cost and compatibility matter. 59API is a strong fit when you want official-quality Claude and GPT responses without paying premium direct-provider pricing. It is especially helpful for prototypes, internal tools, startup apps, and any product that streams a lot of tokens to end users. Since it is a pay-as-you-go relay with a referral rebate, you can keep experimentation cheap while scaling usage only when the app proves itself.

Another advantage is operational simplicity: one relay endpoint, broad SDK compatibility, and access to current model families without having to juggle multiple integrations. For developers building a React frontend, that means less glue code and fewer provider-specific edge cases.

Quick launch checklist

• Choose SSE or fetch streaming.
• Keep the API key on the server.
• Point your SDK to https://api.59api.com.
• Render chunks into React state as they arrive.
• Add abort support and a visible loading indicator.
• Test with a long response so you can verify incremental updates.

If you want to ship streaming AI features fast without overpaying for tokens, sign up for 59API and wire it into your React backend today. You will get a low-cost path to Claude and GPT streaming while keeping your frontend fast and responsive.