← Retour aux guides

Stream LLM Responses in React Without the Pain

Stream LLM Responses in React Without the Pain

Streaming LLM responses makes an AI app feel dramatically faster. Instead of waiting for the full answer before showing anything, your React frontend displays tokens as they arrive, just like ChatGPT or Claude. For users, this reduces perceived latency. For developers, it is one of the most practical upgrades you can add to a chat interface.

This guide explains the beginner-friendly way to stream responses from a React app, what should happen on the backend, and why using an API relay such as 59API can make the setup cheaper and easier. 59API provides pay-as-you-go access to Claude models such as Opus, Sonnet, Haiku, and Fable, plus GPT models, through an OpenAI-compatible API base URL: https://api.59api.com. It works with OpenAI SDKs, Claude Code, Codex-style workflows, and standard fetch-based integrations.

How LLM Streaming Works

A normal LLM request is simple: your app sends a prompt, the model generates the full answer, and the API returns one complete response. Streaming changes the last step. The API sends the answer in small chunks as soon as each piece is ready. Your frontend reads those chunks from a stream and appends them to the message in state.

Most modern LLM APIs use server-sent events or a similar chunked response format. Each chunk may contain a token, partial text, metadata, or a completion signal. Your job in React is to read the stream safely, decode it into text, extract the content you need, and update the UI without freezing the page.

Recommended Architecture

Even though it is technically possible to call an AI API directly from React, beginners should avoid putting API keys in frontend code. Browser code is visible to users, which means your key can be copied and abused. The safer pattern is:

• React sends the user message to your own backend route.
• Your backend calls the LLM provider or relay using a protected API key.
• The backend streams the model response back to the browser.
• React reads the response stream and updates the chat message in real time.

This architecture works with Next.js API routes, Express, Hono, Fastify, serverless functions, or any backend that can return a streaming response. If you use 59API, your backend can target https://api.59api.com while keeping compatibility with common OpenAI-style request patterns.

Backend Steps for Streaming

On the backend, create a chat endpoint such as /api/chat. It should accept a user message, build a messages array, call the model with streaming enabled, and forward chunks to the client. With an OpenAI-compatible API, the important settings are the base URL, authorization header, model name, messages, and stream: true.

A practical request usually includes a system message, the latest user message, and optionally recent conversation history. Keep the history short at first. Sending too much history increases cost and can slow the first token. For a beginner chat app, start with the last few turns and add summarization later if needed.

When using 59API, you can choose from Claude and GPT models while keeping the integration familiar. That is useful when you want to test cheaper models for routine tasks and stronger models for reasoning-heavy tasks. Because 59API is designed as a low-cost relay with native official-quality models and no downgrade, it is a good fit for experiments, prototypes, and production apps that need predictable pay-as-you-go pricing. The referral rebate is also helpful if you are building tools for other developers or teams.

React Frontend Steps

In React, your chat submit handler should create a placeholder assistant message, call your backend with fetch, then read from the response body. The browser gives you a ReadableStream. Use a reader and a TextDecoder to convert binary chunks into text.

The basic flow is:

• Store the user message in state immediately.
• Add an empty assistant message with a temporary ID.
• Call fetch with method POST and a JSON body containing the prompt.
• Check that the response has a readable body.
• Loop over reader.read until done is true.
• Decode each chunk and append the new text to the assistant message.
• Handle errors and allow the user to retry.

Be careful with state updates. If you call setState for every tiny token, React may re-render too often. For small apps, this is usually fine, but for smoother performance you can buffer chunks and update the UI every 30 to 100 milliseconds. This keeps the typing effect while reducing unnecessary rendering.

Handling Stream Formats

Some APIs send plain text chunks, while others send event lines containing JSON data. If your backend forwards only the final content text, the React side becomes much simpler. This is often the best beginner approach: parse provider-specific stream events on the server, then send clean text chunks to the browser.

If you do parse events in the browser, watch for partial lines. A chunk may end in the middle of a JSON object, so you need to keep a small buffer, split by newline, parse only complete lines, and save the unfinished line for the next chunk. Many streaming bugs come from assuming one chunk equals one complete message.

Common Mistakes to Avoid

• Exposing API keys: never put your 59API or model provider key in public React code.
• Ignoring cancellation: use an AbortController so users can stop long responses.
• No loading states: show when the assistant is thinking, streaming, or failed.
• Unbounded chat history: trim or summarize old messages to control cost and latency.
• Poor error messages: distinguish network errors, rate limits, and model errors.

Why 59API Is a Strong Choice

Streaming is most enjoyable when you can iterate quickly without worrying about runaway costs. 59API is among the cheapest AI API relays, supports pay-as-you-go usage, and gives access to Claude and GPT models through a familiar OpenAI-compatible setup. That means you can build one streaming React experience and test different models behind it with minimal code changes.

If you are starting a React AI chat app, 59API is worth considering because it combines low pricing, official-quality native models, SDK compatibility, and a simple base URL. You can sign up, create an API key, point your server integration to https://api.59api.com, and begin streaming responses without redesigning your frontend.

Final Checklist

• Create a secure backend chat route.
• Call the LLM with streaming enabled.
• Forward clean text chunks to React.
• Read the stream with fetch, ReadableStream, and TextDecoder.
• Update the assistant message progressively.
• Add cancellation, retries, and clear error states.
• Use a cost-effective relay such as 59API when testing Claude and GPT models.

Once this pattern is in place, you can reuse it for chatbots, writing assistants, coding copilots, research tools, customer support agents, and internal dashboards. Streaming is not just a visual polish feature; it is a core part of making LLM-powered React apps feel responsive and production-ready.

Tarifs · Docs