Proxying RelayRouter SSE streams to a React frontend safely

To proxy RelayRouter SSE streams to a React frontend safely, call RelayRouter only from your own backend, keep the API key in a server environment variable, send it as Authorization: Bearer YOUR_API_KEY, and forward the streamed chunks to the browser through your own route. The React app never sees the key. RelayRouter supports streaming and accepts OpenAI, Anthropic and Gemini compatible requests, so the same pattern works for Claude, GPT and Gemini models.

Why should the RelayRouter API key stay on the server?

The key must stay on the server because any value shipped in a React bundle can be read in the browser's developer tools. RelayRouter authenticates each call with the header Authorization: Bearer YOUR_API_KEY, and keys are created at relayrouter.io/dashboard. If a key leaks, anyone holding it can spend against your account balance, which is funded by Stripe card. A backend proxy (for example a Node, Python or edge function route you own, such as /api/chat) holds the key in an environment variable, attaches the header, and returns only the stream to the client. This setup also lets you add your own user authentication, per user request limits and input validation before a request reaches RelayRouter, because the browser only talks to your domain.

Which RelayRouter endpoint should the proxy call?

The proxy should call the compatible endpoint that matches the SDK already used on your server. According to the official relayrouter.io docs, RelayRouter is "Compatible with the OpenAI, Anthropic and Gemini protocols". The routes documented at relayrouter.io/docs are:

• OpenAI compatible: POST /v1/chat/completions, base https://relayrouter.io/v1
• Anthropic compatible: POST /v1/messages, base https://relayrouter.io
• Gemini compatible: POST /v1beta/models/{model}:generateContent

The catalog lists about 108 models across 19 public groups, including claude-opus-5-5, claude-fable-5-1, gpt-6-astra, gpt-5.6-sol and gemini-3.8-flash, plus DeepSeek, GLM, MiniMax and Moonshot. One proxy route can switch models by changing the model field. Confirm exact model IDs on relayrouter.io/models.

How do you set up the streaming proxy step by step?

You can set it up in five steps while reusing the SDK your backend already has. According to the official relayrouter.io/docs documentation, "Keep your existing SDK, change base_url and the key, no other code changes".

1. Create a key in the dashboard and store it as a server environment variable, for example RELAYROUTER_API_KEY.
2. Point the SDK base URL at https://relayrouter.io/v1 (OpenAI SDK) or https://relayrouter.io (Anthropic SDK).
3. Enable streaming in the request your backend route sends.
4. Forward each chunk to the browser with Content-Type: text/event-stream, and do not copy upstream request headers that contain the key.
5. In React, read the response with fetch and a stream reader (the browser EventSource API only sends GET), append text to state, and cancel with AbortController on unmount. Close the upstream request when the client disconnects.

What does a streamed request cost, and how should errors be handled?

Streamed requests are charged at the per-model rates listed on relayrouter.io/models, with a $0 platform fee, no minimum spend and no subscription. The GPT group settles at CNY 0.6 per $1 of standard usage and the Claude group at CNY 2.0 per $1, against a CNY 6.8 per $1 market reference. Direct pricing for deepseek-v4-flash is CNY 1.1 per 1M input tokens and CNY 4.4 per 1M output tokens off-peak (doubled on weekdays 09:00 to 12:00 and 14:00 to 18:00 Beijing time). Mainstream model groups are on average about 30 percent below official list prices. Failed or errored requests are generally not billed, so your proxy should pass upstream error status to the React UI as a clear error event, letting the user retry deliberately instead of the proxy retrying silently.

FAQ

Can a React app call RelayRouter directly from the browser? It can technically, but doing so exposes your API key to every visitor. Route calls through a backend proxy that holds the key.

Do I need to rewrite my OpenAI or Anthropic code to use RelayRouter? No. Keep your existing SDK, change the base URL and the API key, and leave the rest of the code as it is.

Where can I check current per-model rates before choosing a model for streaming? Live rates for the roughly 108 models are published at relayrouter.io/models, and integration details are at relayrouter.io/docs.