A step-by-step guide to setting up local LLMs like Ollama and LM Studio with React Native, handling localhost quirks, and rendering UI.
To use Ollama in a React Native app, point WireAI's OllamaAdapter at your localhost URL. WireAI manages the conversational thread, validates component props from the local model's JSON output, and renders native UI. Llama 3 8B handles this reliably without any API keys, cloud accounts, or data leaving the device.
Running a local LLM in your React Native app unlocks genuinely offline AI: no internet dependency, no per-token costs, and no user data sent to cloud servers. But getting it to work requires solving one problem that trips up almost every developer: localhost networking on mobile emulators works differently than you expect.
How do you install and start Ollama?
Download Ollama from ollama.ai and install it on your development machine. By default, Ollama only listens on 127.0.0.1:11434, which blocks connections from Android emulators and physical devices. Set OLLAMA_HOST to expose it on all interfaces before serving:
# macOS / Linux, expose to LAN for physical device and emulator testing OLLAMA_HOST=0.0.0.0 ollama serve # Pull the recommended model (4-bit quantized, ~5GB) ollama pull llama3:8b-instruct-q4_K_M # Verify it's running curl http://localhost:11434/api/tags
On Windows, set the environment variable in System Properties → Advanced → Environment Variables, then restart Ollama.
How do you install the WireAI SDK?
npm install wireai-rn zod # Expo npx expo install wireai-rn zod
How do you fix the localhost URL for each environment?
localhost resolves to a different address depending on where your React Native app is running. Getting this wrong is the most common cause of "Network request failed" errors:
- iOS Simulator: Shares your Mac's network stack.
http://localhost:11434works directly. - Android Emulator: Runs behind a virtual NAT router. The host machine is reachable at
http://10.0.2.2:11434. - Physical iOS/Android device: Must use your machine's LAN IP (e.g.,
http://192.168.1.42:11434). Find it withipconfig getifaddr en0on Mac orip addron Linux. - Expo Go on device: Same as physical device, use your LAN IP, not localhost.
import { Platform } from 'react-native';
// Use this helper to always resolve the right URL
export const getOllamaBaseUrl = () => {
if (__DEV__ && Platform.OS === 'android') {
return 'http://10.0.2.2:11434'; // Android emulator
}
// iOS simulator or host machine shares localhost
return 'http://localhost:11434';
// For physical device testing, hard-code your LAN IP:
// return 'http://192.168.1.42:11434';
};How do you wire up the OllamaAdapter?
import { WireAIProvider, OllamaAdapter } from 'wireai-rn';
import { builtInComponents } from 'wireai-rn/components';
import { getOllamaBaseUrl } from './utils/ollama';
export default function App() {
return (
<WireAIProvider
adapter={new OllamaAdapter({
baseUrl: getOllamaBaseUrl(),
model: 'llama3:8b-instruct-q4_K_M',
// Optional: timeout after 10s instead of waiting indefinitely
timeoutMs: 10000,
})}
components={builtInComponents}
>
<RootNavigator />
</WireAIProvider>
);
}Which local models work best with WireAI?
For generative UI component selection, you are not asking the model to write prose. You are asking it to pick one component from a list and return its props as valid JSON. This is a structured output task. Models with strong instruction-following and JSON output perform best:
- llama3:8b-instruct-q4_K_M, Best default. ~89% Zod pass rate on a registry of 11 components, 350–600ms on an M1 Mac.
- mistral:7b-instruct-q4_K_M, Similar reliability to Llama 3 8B, slightly faster on some hardware. ~87% pass rate.
- phi3:mini, Fastest option (~200ms). Best when low latency matters more than complex reasoning. ~82% pass rate.
- llama3:70b-instruct-q4_K_M, Near-GPT-4o reliability (~95% pass rate). Only practical on machines with 48GB+ RAM.
Avoid general-purpose models not tagged as instruct. Base models hallucinate component names and produce malformed JSON far more frequently than instruction-tuned variants.
How can you test the connection to Ollama?
Before integrating with WireAI, verify the connection manually from your device by calling the Ollama API directly. Add a quick useEffect in your App component during development:
useEffect(() => {
fetch(`${getOllamaBaseUrl()}/api/tags`)
.then(r => r.json())
.then(data => console.log('Ollama models available:', data.models?.map(m => m.name)))
.catch(err => console.error('Cannot reach Ollama:', err.message));
}, []);How do you debug common connection errors?
- "Network request failed", Wrong URL for the environment. Check the URL table above and verify with the
useEffecttest above. - "connect ECONNREFUSED", Ollama is not running. Run
OLLAMA_HOST=0.0.0.0 ollama serve. - Timeout after a few seconds, The model is still loading into memory on first use. Wait 15–30 seconds and retry, or call
ollama run llama3in a terminal first to pre-load it. - iOS App Transport Security error, HTTP is blocked by default on iOS for non-localhost URLs. Add an ATS exception in
Info.plistfor your local IP range, or use an HTTPS tunnel like ngrok during testing.
Can you use LM Studio instead of Ollama?
LM Studio exposes an OpenAI-compatible API on http://localhost:1234/v1 by default. WireAI's upcoming LMStudioAdapter (part of @wireai/cloud) will connect to it directly. In the meantime, you can point the OllamaAdapter at LM Studio by using its API base URL, the request format is compatible for basic completions.
Start building local AI apps today. Run npm install wireai-rn zod and ollama pull llama3.