Your native app calls your own backend, not a same-origin browser route. Use useChat from @tanstack/ai-react with an XHR adapter and an absolute URL.
const baseUrl =
process.env.EXPO_PUBLIC_TANSTACK_AI_BASE_URL ??
'http://127.0.0.1:8787'
const httpUrl = `${baseUrl}/chat/http`
const sseUrl = `${baseUrl}/chat/sse`Use a URL that your runtime can reach:
Use xhrHttpStream() for Expo and React Native. It reads newline-delimited JSON from incremental XHR progress events. Your server returns the stream with toHttpResponse() (see HTTP Stream):
import { useChat, xhrHttpStream } from "@tanstack/ai-react";
const baseUrl = process.env.EXPO_PUBLIC_TANSTACK_AI_BASE_URL ?? 'http://127.0.0.1:8787';
const httpUrl = `${baseUrl}/chat/http`;
const chat = useChat({
connection: xhrHttpStream(httpUrl),
});Mobile connections drop often. If the server adds a durability adapter, both XHR adapters reconnect and support joinRun. See Resumable Streams.
If your server returns text/event-stream with toServerSentEventsResponse() (see Server-Sent Events), use xhrServerSentEvents():
import { useChat, xhrServerSentEvents } from "@tanstack/ai-react";
const baseUrl = process.env.EXPO_PUBLIC_TANSTACK_AI_BASE_URL ?? 'http://127.0.0.1:8787';
const sseUrl = `${baseUrl}/chat/sse`;
const chat = useChat({
connection: xhrServerSentEvents(sseUrl),
});fetchHttpStream() works only if your React Native runtime has all of these:
The server still returns newline-delimited JSON with toHttpResponse():
import { useChat, fetchHttpStream } from "@tanstack/ai-react";
const baseUrl = process.env.EXPO_PUBLIC_TANSTACK_AI_BASE_URL ?? 'http://127.0.0.1:8787';
const httpUrl = `${baseUrl}/chat/http`;
const chat = useChat({
connection: fetchHttpStream(httpUrl),
});If one of these APIs is missing, fetchHttpStream() throws UnsupportedResponseStreamError. A polyfill that buffers the response does not help, because the adapter needs incremental bytes. Use xhrHttpStream() or xhrServerSentEvents().
Keep provider SDKs and server helpers on your backend. Import only hooks and connection adapters in the React Native bundle. Do not import these:
For a full mobile walkthrough, see Quick Start: React Native.
Send a message from the simulator. The reply streams into chat.messages as the model writes it.