OpenAI API in React Native
OpenAI API from a React Native app done right: proxy on your backend, streaming responses, cost controls, and rate-limit handling.
Do not call OpenAI from the mobile app
The first rule is cheap to get wrong: do not put your OpenAI API key in the mobile bundle. It will be extracted within hours of shipping, and someone will burn through your credit.
Every call goes through your backend. Mobile client talks to your NestJS (or your stack of choice). Your backend holds the key and makes the OpenAI call.
This also gives you the place to enforce quotas and log usage per user.
The shape I ship
- NestJS endpoint:
POST /ai/chatthat takes{ messages, userId }. - Inside the endpoint: quota check against Supabase, then the OpenAI call.
- Response streamed back as Server-Sent Events or chunked text.
- React Native client reads the stream and appends tokens to the UI.
Streaming is worth the extra work
Non-streaming answers feel slow. Streaming feels fast, even when the total latency is the same.
React Native supports fetch-based streaming via fetch with ReadableStream. On older RN versions you may need react-native-sse. AI App Factory ships a hook (useAiStream) that covers both paths.
Real cost controls I use
- Per-user daily cap: 100 messages per user per day. Tracked in a Supabase row, checked before every call.
- Soft warn at 80%: Client shows "You are near today limit" so power users are not surprised.
- Hard cap at 100%: Return 429 from the backend. Mobile client shows a polite "Back tomorrow" state.
Without these, one viral share was enough to 10x my OpenAI bill on a free app. I caught it within a day because the Supabase row showed a single userId dominating usage.
Rate-limit handling from OpenAI
OpenAI returns 429 under load. Implement exponential backoff with a max of 3 retries. Beyond that surface a friendly error — do not silently retry forever.
Ship your first app this weekend.
This integration is pre-configured in AI App Factory. One-time purchase.