Building AI SaaS on React Native + FastAPI

Key facts, with sources

• Menlo Ventures found enterprise spend on generative AI hit $37 billion in 2025, up 3.2x from $11.5 billion in 2024, making it the fastest-growing software category in history. (Menlo Ventures)
• 76 percent of enterprise AI use cases are now purchased rather than built in-house, up from 53 percent purchased in 2024. (Menlo Ventures)
• AI startups captured 63 percent of the enterprise AI application market in 2025, earning nearly $2 for every $1 earned by incumbents. (GlobeNewswire)
• 47 percent of enterprise AI deals convert from pilot to production versus about 25 percent for traditional SaaS, and enterprise AI now captures about 6 percent of the global SaaS market. (Menlo Ventures)
• The 2025 SaaS Benchmarks report found AI-native startups grow roughly three times faster than traditional SaaS peers, with median growth around 100 to 110 percent below $5 million ARR. (Growth Unhinged)

The architecture: the device never talks to the model

Rule one, non-negotiable: no model provider keys in the mobile app. Anything shipped in an app binary is extractable, and a leaked key with your billing attached is a costly lesson. Every AI request flows from the app to your FastAPI backend, which authenticates the user, assembles context, calls the provider, meters usage, and returns the result.

This is not just security hygiene — it is what makes the product operable. Server-side AI calls give you one place to version prompts, swap models, cache aggressively, enforce per-user budgets, and log every request for quality analysis. It also decouples AI iteration from mobile release cycles, which matters enormously: app-store review takes days, but a prompt fix on the server ships in minutes. The app should know it is talking to your API and nothing else; the model behind it is your implementation detail.

The FastAPI streaming endpoint

Perceived latency decides whether mobile AI feels magical or broken, and streaming is the difference. A full generation can take many seconds; users will not stare at a spinner that long on a phone, but they will happily read text that starts appearing almost immediately. So the backend relays tokens as they arrive using server-sent events — a plain HTTP response with a streaming body, which passes through mobile networks and proxies far more predictably than WebSockets and needs no connection lifecycle management for this one-directional case.

FastAPI's async support and the provider SDK's streaming interface compose cleanly: the endpoint below opens a model stream and forwards each text delta as an SSE frame, then sends a done sentinel so the client knows the generation finished rather than the connection dropping.

import json
import os
from anthropic import AsyncAnthropic
from fastapi import FastAPI
from fastapi.responses import StreamingResponse
from pydantic import BaseModel

MODEL = os.environ["LLM_MODEL"]  # keep the latest model id in config

app = FastAPI()
client = AsyncAnthropic()

class ChatIn(BaseModel):
    message: str

@app.post("/v1/chat/stream")
async def chat_stream(body: ChatIn):
    async def events():
        async with client.messages.stream(
            model=MODEL,
            max_tokens=1024,
            messages=[{"role": "user", "content": body.message}],
        ) as stream:
            async for text in stream.text_stream:
                payload = json.dumps({"delta": text})
                yield f"data: {payload}\n\n"
        yield "data: [DONE]\n\n"

    return StreamingResponse(events(), media_type="text/event-stream")

Consuming the stream in React Native

React Native's fetch does not expose response streams the way browsers do, so the reliable path is an SSE client library that works over the native networking layer rather than fighting the JavaScript runtime. I wrap the connection in a hook the chat screen consumes: open on send, append deltas to state as they arrive, close on the done sentinel or on error. The component just renders the accumulating string, so the streaming plumbing stays out of the UI code entirely.

Two performance notes from production. Rendering per-delta is fine for chat-sized outputs, but for very long generations you should batch state updates to a few per second — every setState triggers a render, and hundreds per second will stutter older Android devices. And always close the connection in the hook's cleanup path, or navigating away mid-stream leaks connections that keep consuming battery and backend capacity.

import { useRef, useState } from 'react';
import EventSource from 'react-native-sse';

export function useChatStream(apiUrl: string, token: string) {
  const [reply, setReply] = useState('');
  const esRef = useRef<EventSource | null>(null);

  const send = (message: string) => {
    setReply('');
    const es = new EventSource(`${apiUrl}/v1/chat/stream`, {
      method: 'POST',
      headers: {
        Authorization: `Bearer ${token}`,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ message }),
    });

    es.addEventListener('message', (event) => {
      if (event.data === '[DONE]') {
        es.close();
        return;
      }
      const { delta } = JSON.parse(event.data ?? '{}');
      setReply((prev) => prev + delta);
    });

    es.addEventListener('error', () => es.close());
    esRef.current = es;
  };

  return { reply, send };
}

Mobile realities: backgrounding, flaky networks, and review

Mobile adds failure modes web teams never think about. Users background the app mid-generation: decide explicitly whether the stream dies (fine for short outputs) or the job continues server-side and the result lands via push notification (necessary for long-running work — model your generations as server-side jobs with ids, not just open connections). Networks drop mid-stream constantly on mobile; make regenerate cheap and idempotent rather than trying to resume a half-finished SSE connection.

App review is the other reality. Apps generating open-ended content should ship with moderation on user input and model output, a report mechanism, and honest store metadata about AI features — review teams have tightened on all of these, and a rejection costs you a week. Keeping generation server-side helps here too: you can adjust filters and policies without resubmitting the binary.

Shipping cadence: server-side brains, thin client

The operational payoff of this stack is asymmetric iteration speed. Keep the client thin — it renders conversations, streams tokens, captures feedback — and keep every AI decision server-side: prompt templates, model selection, context assembly, feature availability. I version prompts in the backend with the config, so a quality regression rolls back in minutes without touching the app.

For client changes, over-the-air updates handle the JavaScript layer between store releases, which pairs well with fast-moving AI features. One habit worth adopting early: have the API return capability flags the app reads at launch — which AI features exist, what limits apply — so you can roll features out gradually, kill misbehaving ones instantly, and support old app versions calling new backends without breakage. The app stores punish teams whose product logic lives in the binary; this stack lets almost none of it live there.

When to hire senior help

Bring in senior AI engineering help when inference costs threaten margins or reliability issues block enterprise deals, because those are engineering problems solved with caching, routing, and evals rather than product tweaks. Fractional senior involvement at the architecture and pre-scaling stages costs far less than the margin permanently lost to an inefficient inference stack. If your stack includes React Native + Python + AI, a senior engineer who owns the full product beats coordinating multiple juniors.

Bottom line

Dhairya Senjaliya ships AI — AI SaaS Products projects worldwide — book a scoping call to discuss your specific situation.

Common pitfalls to avoid

• ✕Pricing per seat when value delivery is usage-based, so AI inference COGS scale with tokens while revenue stays flat and power users invert your margins
• ✕Ignoring gross margin economics; AI-first SaaS typically runs 50 to 60 percent margins versus 80 to 90 for traditional SaaS, and skipping caching and model routing locks in the worst case
• ✕Building a thin model wrapper with no proprietary data, workflow depth, or distribution advantage that the next foundation-model release erases
• ✕Running unpriced pilots without instrumenting value metrics, wasting the AI advantage of a 47 percent pilot-to-production conversion rate

Frequently asked questions

Sources

• Menlo Ventures
• GlobeNewswire
• Menlo Ventures
• Growth Unhinged