Streaming Claude Opus 5.5 Token by Token in the Browser

01 · What a Long Claude Opus 5.5 Answer Looks Like on the Wire

Long generations are the worst case for a plain request and response. When a team asks Claude Opus 5.5 for a deep analysis, a naive client shows an empty box for many minutes and then paints everything at once. Server-sent events change that picture. The client sends one request, the response is marked as an event stream, and the server writes frames as tokens are produced. Each frame carries a data field and, optionally, an event name and an id. The page receives each frame the moment it lands, so the opening sentence appears long before the closing usage numbers do.

The protocol is deliberately one-directional. The prompt travels up in the initial request, and everything after that flows down. That matches generation work, where one instruction is followed by a long tail of text. Frames are plain text, the format is trivial to split on blank lines, and keep-alive comments stop intermediaries from closing a quiet connection. If the socket drops, a conforming client reconnects and sends the last event id it saw, so a well-built server can continue from a known point rather than restarting the whole answer.

02 · One API Base Address, Many Models, One Stream Contract

Quanta is a pay-as-you-go API relay built for power users and teams with heavy, sustained workloads. One balance covers a wide roster of models, and the stream contract stays identical whichever one you choose. That matters when a pipeline routes its fast summarisation step to Claude Haiku 4.5 and its slow reasoning step to Claude Opus 5.5: the rendering code that consumes tokens never changes, only the model parameter does.

Tool compatibility is the practical reason teams move to a relay. Quanta works with Claude Code, Codex, Gemini CLI and any OpenAI SDK, so the streaming client you already wrote keeps working. SDK users see a sequence of partial chunks that the library assembles into deltas, with usage reported at the end of the stream. Raw HTTP users see the same bytes as event frames. Two views of one connection, with no bespoke adapter per model.

03 · EventSource or Fetch: Picking the Client Around Your Auth Model

Two client techniques cover most frontends. EventSource is the browser's built-in server-sent event client: point it at an endpoint, listen for message events, and the browser manages keep-alives, reconnection and the resume header for you. Its limits are firm. It issues a GET, it cannot carry custom headers, and it delivers text only. The moment your API needs an authorisation header, a POST body carrying the prompt, or an abort signal tied to a cancel button, you switch to fetch and read the response body as a stream, splitting frames yourself.

• › Buffer frames for a few dozen milliseconds and flush once, rather than repainting the document on every token.
• › Render into a dedicated node and keep layout work out of the stream loop, because a long answer will otherwise starve input handling.
• › Close the connection deliberately on navigation or unmount, and keep an abort signal in scope so a cancelled request stops consuming resources downstream.
• › Cap the parsed buffer size and treat a malformed frame as ignorable rather than fatal, so one bad byte does not kill a twelve-minute answer.

Teams that already run an OpenAI-compatible client usually start with fetch, because it reuses the same middleware for headers, timeouts and logging. Teams shipping a small public viewer often start with EventSource and move only when they need authenticated calls.

04 · Token Accounting: What the Final Frame Tells Finance

Streaming does not change how a call is metered. Every call through Quanta is metered on real tokens, with cache writes and cache reads priced separately, so the figure your budget owner cares about arrives at the end of the stream rather than with the first token. Treat the closing usage payload as the source of truth, and record it against the request the moment you render the last chunk.

Two habits keep budgets honest at volume. First, log prompt tokens and completion tokens apart from each other, because a burst of long contexts behaves very differently from a burst of short ones. Second, watch cache activity explicitly. A long system prompt reused across a stream of requests shows up as cache reads, while the first time it is stored it shows up as a cache write, and those are priced separately. Teams that only count total tokens tend to discover that distinction late.

05 · Reconnects, Timeouts and Concurrency Caps Under Sustained Load

Sustained streaming multiplies connection count, and connection count is what breaks naive infrastructure. Set a client timeout well above your longest expected answer, because a timeout that fires mid-stream wastes every token already generated. Decide whether a reconnect should resume or restart: restarting is simpler and safe for stateless summaries, while resuming needs the server to hold partial output briefly. Put a ceiling on concurrent streams per user so a shared account cannot open hundreds of long answers at the same instant.

Failure handling deserves the same attention. Surface a reconnecting state in the interface instead of an error, retry with backoff when the relay returns a transient status, and fail fast on authentication problems rather than looping. If your team replays the same long prompt during evaluation, expect cache reads to appear in the usage payload and plan the rollout budget around them.

06 · Rolling Streaming to a Team With Sustained Workloads

Roll streaming out in stages. Start with one workflow, one model and a hard concurrency cap, then measure time to first token, completion length and total metered tokens per request before widening access. Keep the non-streaming path behind a flag until the streamed path has handled a full week of real traffic, then switch the default and keep the flag for emergencies.

For teams that want a single balance across models such as Claude Opus 5.5, DeepSeek V4 Flash, Gemini 3.8 Flash and GLM-5.3 without maintaining separate accounts, Quanta is a natural fit, and the referral programme earns you nineteen percent of the top-ups made by people you bring along. Open an account with Quanta, point one workflow at the relay, and you can watch the same stream contract carry your heaviest model before you commit the rest of the pipeline.