ai-coach-rn-sdk

The official React Native SDK for the AI Coach Jack conversational coaching platform. Drop in one component to give your users access to AI-powered coaching sessions, real-time streaming chat, coach selection, and full session history.

Features

• 🤖 Coach selection — browse and pick a coach before starting
• 💬 Streaming chat — real-time token-by-token response rendering via SSE
• 🗂 Session history — resume any previous conversation
• 🎨 Full theming — customize every color to match your brand
• 📱 iOS & Android — tested on both platforms

Requirements

• React Native >= 0.72
• React >= 18

Installation

Install the SDK and its peer dependencies:

npm install ai-coach-rn-sdk \
  @react-navigation/native \
  @react-navigation/native-stack \
  react-native-safe-area-context \
  react-native-screens \
  react-native-svg \
  react-native-sse \
  axios

iOS — link native dependencies:

cd ios && pod install

Android — no additional steps required.

Quick Start

Wrap your entry point or any screen with <AiCoachProvider>:

import React from 'react';
import { View } from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { AiCoachProvider } from 'ai-coach-rn-sdk';

export default function App() {
  return (
    <SafeAreaProvider>
      <View style={{ flex: 1 }}>
        <AiCoachProvider
          apiKey="YOUR_API_KEY"
          userId="user_123"
          userName="Alex"
          config={{
            baseUrl: 'https://aicoachjack.onrender.com',
          }}
        />
      </View>
    </SafeAreaProvider>
  );
}

The provider renders a self-contained navigation stack with all SDK screens (entry, coach list, coach detail, chat, session history). No extra router setup needed.

Props

| Prop | Type | Required | Description | |---|---|---|---| | apiKey | string | ✅ | Your AI Coach API key | | userId | string | ✅ | Unique ID for the current user in your system | | userName | string | — | Display name shown in the chat UI. Defaults to "User" | | config | Partial<AiCoachConfig> | — | Theme and endpoint overrides |

Theming

Pass any subset of these to config — all values have sensible defaults:

config={{
  baseUrl: 'https://aicoachjack.onrender.com',

  // Brand
  primaryColor: '#7B61FF',

  // Backgrounds
  backgroundColor: '#F9FAFB',
  surfaceColor: '#F7F7F7',

  // Text
  textColor: '#1F2937',
  secondaryTextColor: '#403F3F',

  // Borders
  borderColor: '#D4D4D4',

  // Top bar
  topBarBackgroundColor: '#FFFFFF',
  topBarTextColor: '#1F2937',

  // Coach message bubbles
  coachBubbleColor: '#EDEBFB',
  coachBubbleBorderColor: '#7B61FF',
  coachTextColor: '#403F3F',

  // User message bubbles
  userBubbleColor: '#FFFFFF',
  userBubbleBorderColor: '#D4D4D4',
  userTextColor: '#403F3F',

  // Input field
  inputBackgroundColor: '#FFFFFF',
  inputBorderColor: '#D4D4D4',
  inputFocusBorderColor: '#7B61FF',
  inputPlaceholderColor: '#9CA3AF',
  inputTextColor: '#1F2937',

  // Debug
  isLoggingEnabled: false,
}}

Dark mode example

<AiCoachProvider
  apiKey="YOUR_API_KEY"
  userId="user_123"
  config={{
    primaryColor: '#A78BFA',
    backgroundColor: '#0F172A',
    surfaceColor: '#1E293B',
    textColor: '#F8FAFC',
    secondaryTextColor: '#94A3B8',
    borderColor: '#334155',
    topBarBackgroundColor: '#1E293B',
    topBarTextColor: '#F8FAFC',
    coachBubbleColor: '#312E81',
    coachTextColor: '#E2E8F0',
    userBubbleColor: '#1E293B',
    userTextColor: '#F8FAFC',
    inputBackgroundColor: '#1E293B',
    inputBorderColor: '#334155',
    inputFocusBorderColor: '#A78BFA',
    inputTextColor: '#F8FAFC',
    baseUrl: 'https://aicoachjack.onrender.com',
  }}
/>