React Native SDK

5-Minute Quick Start

Get a working AI chat app in 5 minutes. Copy and paste these steps:

1. Create new Expo project

npx create-expo-app@latest my-ai-app
cd my-ai-app

2. Install dependencies

npx expo install expo-auth-session expo-crypto expo-linking expo-secure-store expo-web-browser @react-native-async-storage/async-storage buffer

3. Download the SDK

# Create lib folder and download SDK
mkdir -p lib
curl -o lib/AiPassSDK.js https://aipass.one/docs/sdk/reactnative/AiPassSDK.js

4. Configure app.json

Add scheme to your app.json:

{
  "expo": {
    "scheme": "myaiapp"
  }
}

5. Replace App.js with this complete example

import React, { useState } from 'react';
import {
  View, Text, TextInput, Button,
  FlatList, ActivityIndicator, StyleSheet, SafeAreaView
} from 'react-native';
import { AiPassProvider, useAiPass, useAuthState, useBalance, useAiPassEvent } from './lib/AiPassSDK';

// ============================================
// REPLACE WITH YOUR CLIENT ID FROM STEP 1
// ============================================
const CLIENT_ID = 'YOUR_CLIENT_ID_HERE';

function ChatScreen() {
  const { sdk, login, logout, openDashboard } = useAiPass();
  const { isReady, isAuthenticated } = useAuthState();
  const { balance } = useBalance();
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');
  const [loading, setLoading] = useState(false);

  // Handle budget exceeded
  useAiPassEvent('budgetExceeded', ({ message }) => {
    alert('Budget exceeded: ' + message);
  });

  // Loading state
  if (!isReady) {
    return (
      <View style={styles.center}>
        <ActivityIndicator size="large" color="#4F46E5" />
        <Text style={styles.loadingText}>Loading AI Pass...</Text>
      </View>
    );
  }

  // Login screen
  if (!isAuthenticated) {
    return (
      <View style={styles.center}>
        <Text style={styles.title}>AI Chat</Text>
        <Text style={styles.subtitle}>Powered by AI Pass</Text>
        <Button title="Sign in with AI Pass" onPress={login} color="#4F46E5" />
      </View>
    );
  }

  // Send message
  const sendMessage = async () => {
    if (!input.trim() || loading) return;

    const userMessage = { role: 'user', content: input };
    setMessages(prev => [...prev, userMessage]);
    setInput('');
    setLoading(true);

    try {
      const result = await sdk.generateCompletion({
        messages: [...messages, userMessage],
        model: 'gemini/gemini-2.5-flash-lite',
        maxTokens: 1000
      });
      const aiMessage = result.choices[0].message;
      setMessages(prev => [...prev, aiMessage]);
    } catch (error) {
      alert('Error: ' + error.message);
      setMessages(prev => prev.slice(0, -1));
    } finally {
      setLoading(false);
    }
  };

  // Chat screen
  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.balance}>
          Balance: ${balance?.toFixed(2) || '...'}
        </Text>
        <View style={styles.headerButtons}>
          <Button title="Dashboard" onPress={openDashboard} />
          <Button title="Logout" onPress={logout} color="#ff4444" />
        </View>
      </View>

      <FlatList
        data={messages}
        keyExtractor={(_, i) => i.toString()}
        style={styles.messageList}
        renderItem={({ item }) => (
          <View style={[
            styles.message,
            item.role === 'user' ? styles.userMsg : styles.aiMsg
          ]}>
            <Text style={styles.messageText}>{item.content}</Text>
          </View>
        )}
        ListEmptyComponent={
          <Text style={styles.emptyText}>Send a message to start chatting!</Text>
        }
      />

      <View style={styles.inputRow}>
        <TextInput
          style={styles.input}
          value={input}
          onChangeText={setInput}
          placeholder="Type a message..."
          editable={!loading}
          onSubmitEditing={sendMessage}
        />
        <Button
          title={loading ? '...' : 'Send'}
          onPress={sendMessage}
          disabled={loading || !input.trim()}
          color="#4F46E5"
        />
      </View>
    </SafeAreaView>
  );
}

export default function App() {
  return (
    <AiPassProvider config={{ clientId: CLIENT_ID, debug: __DEV__ }}>
      <ChatScreen />
    </AiPassProvider>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#fff' },
  center: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20 },
  title: { fontSize: 32, fontWeight: 'bold', color: '#4F46E5', marginBottom: 8 },
  subtitle: { fontSize: 16, color: '#666', marginBottom: 24 },
  loadingText: { marginTop: 12, color: '#666' },
  header: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', padding: 16, borderBottomWidth: 1, borderBottomColor: '#eee' },
  headerButtons: { flexDirection: 'row', gap: 8 },
  balance: { fontSize: 16, fontWeight: '600' },
  messageList: { flex: 1, padding: 16 },
  message: { padding: 12, borderRadius: 12, marginVertical: 4, maxWidth: '80%' },
  userMsg: { backgroundColor: '#4F46E5', alignSelf: 'flex-end' },
  aiMsg: { backgroundColor: '#f0f0f0', alignSelf: 'flex-start' },
  messageText: { fontSize: 16 },
  emptyText: { textAlign: 'center', color: '#999', marginTop: 40 },
  inputRow: { flexDirection: 'row', padding: 16, borderTopWidth: 1, borderTopColor: '#eee', alignItems: 'center' },
  input: { flex: 1, borderWidth: 1, borderColor: '#ddd', borderRadius: 24, paddingHorizontal: 16, paddingVertical: 12, marginRight: 8, fontSize: 16 }
});

6. Run the app

npx expo start

Testing Checklist

• App loads and shows "Sign in with AI Pass" button
• Clicking login opens browser for authentication
• After login, chat screen appears with your balance
• Can send messages and receive AI responses
• Dashboard button opens AI Pass in browser
• Logout returns to login screen