# Installation

Follow these steps to install the KinesteX SDK in your project.

## Step 1: Add Dependencies

Add the KinesteX SDK to your project using your platform's package manager.

**Install SDK**

_Swift (iOS)_
```swift
1. In Xcode: File > Add Package Dependencies...
2. Enter URL: https://github.com/KinesteX/KinesteX-AI-Kit.git
3. Click "Add Package"
```

_Kotlin (Android)_
```kotlin
// 1. Add JitPack repository in settings.gradle.kts
dependencyResolutionManagement {
    repositories {
        maven { url = uri("https://jitpack.io") }
    }
}

// 2. Add dependency in app/build.gradle.kts
dependencies {
    // Use the latest release from https://github.com/KinesteX/KinesteX-SDK-Kotlin/releases
    implementation("com.github.KinesteX:KinesteX-SDK-Kotlin:2.0.9")
}

// 3. Sync project with Gradle files
```

_React Native_
```jsx
// 1. Install packages
npm install kinestex-sdk-react-native react-native-webview

// 2. Install iOS dependencies
cd ios && pod install && cd ..

// For Expo projects:
npx expo install react-native-webview
```

_Flutter_
```dart
# 1. Add to pubspec.yaml
dependencies:
  kinestex_sdk_flutter: ^1.5.1 # use the latest version from pub.dev
  permission_handler: ^11.3.1

# 2. Install packages
flutter pub get

# 3. Install iOS dependencies
cd ios && pod install && cd ..
```

_HTML / JavaScript_
```html
<!-- Add iframe container to your HTML -->
<div id="webViewContainer" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none;">
  <iframe
    id="webView"
    frameborder="0"
    allow="camera; autoplay; accelerometer; gyroscope; magnetometer"
    sandbox="allow-same-origin allow-scripts"
    allowfullscreen="true"
    style="width: 100%; height: 100%;">
  </iframe>
</div>
```

_React (TypeScript)_
```tsx
npm i kinestex-sdk-react-ts
```

## Step 2: Configure Permissions

Add the required permissions for camera and motion sensors.

**Required Permissions**

_Swift (iOS)_
```swift
<!-- Info.plist -->
<key>NSCameraUsageDescription</key>
<string>Camera access is required for AI-powered workout tracking</string>
<key>NSMotionUsageDescription</key>
<string>Motion sensors help position your device correctly for workouts</string>
```

_Kotlin (Android)_
```kotlin
<!-- AndroidManifest.xml -->
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" android:required="false" />

<!-- Optional: For device orientation detection -->
<uses-feature android:name="android.hardware.sensor.accelerometer" android:required="false" />
<uses-feature android:name="android.hardware.sensor.gyroscope" android:required="false" />
```

_React Native_
```jsx
<!-- iOS: Info.plist -->
<key>NSCameraUsageDescription</key>
<string>Camera access is required for AI-powered workout tracking</string>
<key>NSMotionUsageDescription</key>
<string>Motion sensors help position your device correctly for workouts</string>

<!-- Android: AndroidManifest.xml -->
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" android:required="false" />
<uses-feature android:name="android.hardware.sensor.accelerometer" android:required="false" />
<uses-feature android:name="android.hardware.sensor.gyroscope" android:required="false" />
```

_Flutter_
```dart
<!-- iOS: Info.plist -->
<key>NSCameraUsageDescription</key>
<string>Camera access is required for AI-powered workout tracking</string>
<key>NSMotionUsageDescription</key>
<string>Motion sensors help position your device correctly for workouts</string>

<!-- Android: AndroidManifest.xml -->
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" android:required="false" />
<uses-feature android:name="android.hardware.sensor.accelerometer" android:required="false" />
<uses-feature android:name="android.hardware.sensor.gyroscope" android:required="false" />
```

_HTML / JavaScript_
```html
<!-- Permissions are set via iframe attributes -->
<iframe
  allow="camera; autoplay; accelerometer; gyroscope; magnetometer"
  sandbox="allow-same-origin allow-scripts"
  allowfullscreen="true"
  ...
></iframe>

<!-- Browser will prompt users for camera access automatically -->
```

_React (TypeScript)_
```tsx
Browser will prompt users for camera access automatically. No additional permissions are needed.
```

## Step 3: Import the SDK

Import the KinesteX SDK in your code to start using it.

**Import Statement**

_Swift (iOS)_
```swift
import KinesteXAIKit
```

_Kotlin (Android)_
```kotlin
import com.kinestex.kinestexsdkkotlin.KinesteXSDK
```

_React Native_
```jsx
import KinestexSDK from 'kinestex-sdk-react-native';
// Types and enums live in the /src/types subpath (the package root has only the default export)
import { IntegrationOption, IPostData, PlanCategory } from 'kinestex-sdk-react-native/src/types';
```

_Flutter_
```dart
import 'package:kinestex_sdk_flutter/kinestex_sdk.dart';
```

_HTML / JavaScript_
```html
// Define the iframe element and create a URL to be later used to load the iframe
const webView = document.getElementById('webView');
const srcURL = 'https://ai.kinestex.com';
```

_React (TypeScript)_
```tsx
import {
  IntegrationOption,
  KinesteXSDK,
  type IPostData,
  type KinesteXSDKCamera,
} from "kinestex-sdk-react-ts";
```

**Step 4: iOS 15+ Device Orientation Fix (Required)** — React Native

react-native-webview doesn't support iOS 15+ motion permissions by default. Apply this patch to enable device orientation tracking:

_4.1: Install patch-package_
```bash
npm install patch-package postinstall-postinstall --save-dev
```

_4.2: Add postinstall script to package.json_
```json
{
  "scripts": {
    "postinstall": "patch-package"
  }
}
```

_4.3: Patch RNCWebViewImpl.m_
```objectivec
// Edit: node_modules/react-native-webview/apple/RNCWebViewImpl.m
// Find requestMediaCapturePermissionForOrigin (line ~1312)
// Add this method after it:

- (void)webView:(WKWebView *)webView
  requestDeviceOrientationAndMotionPermissionForOrigin:(WKSecurityOrigin *)origin
  initiatedByFrame:(WKFrameInfo *)frame
  decisionHandler:(void (^)(WKPermissionDecision))decisionHandler {
  (void)webView;
  (void)origin;
  (void)frame;
  decisionHandler(WKPermissionDecisionGrant);
}
```

_4.4: Save the patch_
```bash
npx patch-package react-native-webview
```

**Step 5: Expo Android Camera Fix** — React Native

For Expo on Android, request app-level camera permission before displaying KinesteX:

_5.1: Install expo-camera_
```bash
npx expo install expo-camera
```

_5.2: Configure app.json_
```json
{
  "expo": {
    "android": {
      "permissions": ["android.permission.CAMERA"]
    },
    "ios": {
      "infoPlist": {
        "NSCameraUsageDescription": "For AI Motion Tracking"
      }
    }
  }
}
```

_5.3: Request permission before showing KinesteX_
```typescript
import { Camera } from 'expo-camera';
import { useState, useEffect } from 'react';

const [hasPermission, setHasPermission] = useState(false);

useEffect(() => {
  (async () => {
    const { status } = await Camera.requestCameraPermissionsAsync();
    setHasPermission(status === 'granted');
  })();
}, []);

// Only render KinesteX when hasPermission is true
```

---
Source: https://www.kinestex.com/docs/installation · Index: https://www.kinestex.com/llms.txt