← Retour aux guides

Stream LLM Responses in React with 59API

Streaming LLM Responses in a React Frontend

Streaming makes an AI app feel dramatically faster. Instead of waiting for a full large language model response, your React frontend can display tokens as they arrive, just like ChatGPT or Claude. In this tutorial, you will build a practical streaming flow using React, a small backend proxy, and 59API as the model relay.

59API is a useful choice for this setup because it gives developers pay-as-you-go access to Claude models such as Opus, Sonnet, Haiku, and Fable, as well as GPT models, through an OpenAI-compatible API. The base URL is https://api.59api.com, which means many OpenAI SDK examples work with only a base URL and API key change. It is also designed to be low-cost, uses native official-quality models without downgrade, and includes a referral rebate if you are building or sharing AI tools.

Step 1: Understand the Architecture

Do not call an LLM API directly from your React browser code. Your API key would be exposed to anyone who opens DevTools. Instead, use this structure: React frontend sends the user message to your own backend endpoint; the backend calls 59API with streaming enabled; the backend forwards the stream back to the browser.

This approach keeps secrets safe, lets you add rate limits, and makes it easier to switch between GPT and Claude models later. It also lets your frontend stay simple: it only needs to read a streaming HTTP response and append chunks to the current assistant message.

Step 2: Create a Backend Streaming Endpoint

Create a server route such as POST /api/chat. In a Node or Next.js backend, read the incoming messages from the request body, then call 59API using the OpenAI-compatible chat completions format. Set the base URL to https://api.59api.com and include your API key in the Authorization header.

The essential request options are: model, messages, and stream: true. For example, choose a fast and affordable model for chat previews, or a stronger Claude Sonnet or GPT model for production answers. Because 59API is compatible with OpenAI SDK patterns, the migration path is straightforward if you already have code using chat.completions.create.

Your backend should return a Response object with headers suitable for streaming. Use Content-Type: text/event-stream or text/plain depending on your parsing method. Also set Cache-Control: no-cache and Connection: keep-alive. As chunks arrive from 59API, extract the incremental text delta and write it to the response stream.

Step 3: Build the React Chat State

In React, keep a messages array in state. Each message should have a role, such as user or assistant, and content. When the user submits a prompt, immediately add the user message and an empty assistant message. This gives the interface instant feedback before the model returns anything.

You will also want a loading state to disable the submit button during generation. For a better experience, add a cancel button using AbortController. Streaming requests can be long, and users should be able to stop generation without refreshing the page.

Step 4: Read the Stream in the Browser

Use fetch to call your backend endpoint. Pass the conversation messages in the POST body and attach an AbortController signal if you support cancellation. After fetch returns, access response.body and create a reader with getReader(). Then use a TextDecoder to convert Uint8Array chunks into readable text.

The loop is simple: call reader.read(), check whether done is true, decode the chunk, and append the decoded text to the last assistant message. In React, use a functional state update so you always modify the latest state. This avoids bugs where chunks arrive quickly and overwrite each other.

If your backend forwards Server-Sent Events, you may need to parse lines beginning with data:. If your backend forwards plain text deltas, the frontend can append the decoded chunk directly. Plain text forwarding is often easier for your first implementation, while SSE is better if you want structured events such as token, error, done, and usage.

Step 5: Handle Errors Gracefully

Streaming introduces a few edge cases. The network can drop, the model can return an error, or the user can cancel the request. In all cases, your UI should avoid leaving a permanent loading spinner. Wrap the fetch and read loop in try and finally logic. If the error is an abort, show a small “generation stopped” state. If it is a server error, replace the empty assistant message with a helpful error message.

On the backend, return clear HTTP status codes when validation fails. For example, reject empty messages, overly long prompts, or unauthenticated users before calling the model. This saves cost and prevents accidental abuse.

Step 6: Improve the User Experience

• Auto-scroll: Scroll the chat container to the newest token while streaming, but allow users to scroll up without fighting the UI.
• Typing cursor: Show a small cursor or animated dot while the assistant message is receiving chunks.
• Model selector: Let users choose between a low-cost fast model and a higher-quality model for complex tasks.
• Token budgeting: Trim old conversation history or summarize it before sending it to the backend.
• Retries: Add a retry button that resends the last user message if the stream fails.

Step 7: Optimize Cost with 59API

Streaming itself does not reduce token usage, but it improves perceived speed and helps users stop bad generations early. Combined with 59API’s cheap pay-as-you-go relay pricing, this is a practical way to build AI features without committing to large upfront spend. Because the service supports Claude Code, Codex, and OpenAI SDK-compatible workflows, you can use one integration style across several development tools and model families.

If you are experimenting with a React AI chat, support assistant, writing tool, or developer copilot, consider signing up for 59API and testing the same streaming code across Claude and GPT models. Start with a lower-cost model for everyday requests, then route difficult prompts to stronger models only when needed.

Final Checklist

• Keep API keys server-side and never expose them in React environment variables shipped to the browser.
• Use stream: true when calling the chat completion endpoint through https://api.59api.com.
• Forward text chunks from your backend to the browser as they arrive.
• Append chunks safely with functional React state updates.
• Add cancellation, errors, and rate limits before launching publicly.

With this pattern, you get a fast, modern chat experience while keeping your integration secure, flexible, and cost-conscious. The same foundation can power simple chat widgets, coding assistants, document Q&A tools, and full AI workspaces.

Tarifs · Docs