1Task {
2    let result = await kinestex.fetchExercises(limit: 10)
3    if case .success(let response) = result,
4       let exercise = response.exercises.first {
5        // exercise.modelId is what the Camera Component expects
6        currentExercise = exercise.modelId
7    }
8}

lifecycleScope.launch {
    val result = withContext(Dispatchers.IO) {
        KinesteXSDK.api.fetchAPIContentData(
            contentType = ContentType.EXERCISE,
            limit = 10
        )
    }
    if (result is APIContentResult.Exercises) {
        // exercise.modelId is what the Camera Component expects
        currentExercise = result.exercises.firstOrNull()?.modelId ?: ""
    }
}

const res = await fetch(
  'https://admin.kinestex.com/api/v1/exercises?limit=10',
  { headers: { 'x-api-key': API_KEY, 'x-company-name': COMPANY_NAME } },
);
const { exercises } = await res.json();
// exercise.model_id is what the Camera Component expects.
// Pass it as initial value, or switch later via ref.current?.changeExercise(...).
const modelId = exercises[0].model_id;

final result = await KinesteXAIFramework.apiService.fetchContent(
  contentType: ContentType.exercise,
  limit: 10,
);
// exercise.modelId is what the Camera Component expects
if (result is ExercisesResult) {
  final modelId = result.response.exercises.first.modelId;
}

const res = await fetch(
  'https://admin.kinestex.com/api/v1/exercises?limit=10',
  { headers: { 'x-api-key': API_KEY, 'x-company-name': COMPANY_NAME } },
);
const { exercises } = await res.json();
// exercise.model_id is what the Camera Component expects
const modelId = exercises[0].model_id;

const res = await fetch(
  'https://admin.kinestex.com/api/v1/exercises?limit=10',
  { headers: { 'x-api-key': API_KEY, 'x-company-name': COMPANY_NAME } },
);
const { exercises } = await res.json() as { exercises: ExerciseModel[] };
// exercise.model_id is what the Camera Component expects
const modelId = exercises[0].model_id;

1// exerciseFetchType goes inside customParams
2kinestex.createCameraView(
3    exercises: ["Squats", "Jumping Jack"],
4    currentExercise: $currentExercise, // e.g. "Squats"
5    customParams: [
6        "exerciseFetchType": "exercise_title" // "model_id" (default) | "exercise_id" | "exercise_title"
7    ]
8)

// exerciseFetchType goes inside customParams
KinesteXSDK.createCameraComponent(
    context = this,
    currentExercise = "Squats",
    exercises = listOf("Squats", "Jumping Jack"),
    customParams = mutableMapOf(
        "exerciseFetchType" to "exercise_title" // "model_id" (default) | "exercise_id" | "exercise_title"
    ),
    permissionHandler = this
)

// React Native v1.3.1+: exerciseFetchType is direct in postData
const postData: IPostData = {
  key: 'YOUR_API_KEY',
  userId: 'YOUR_USER_ID',
  company: 'YOUR_COMPANY_NAME',
  currentExercise: 'Squats',
  exercises: ['Squats', 'Jumping Jack'],
  exerciseFetchType: 'exercise_title', // "model_id" (default) | "exercise_id" | "exercise_title"
};

// exerciseFetchType goes inside customParams
KinesteXAIFramework.createCameraComponent(
  isShowKinestex: showKinesteX,
  exercises: ["Squats", "Jumping Jack"],
  currentExercise: "Squats",
  customParams: {
    "exerciseFetchType": "exercise_title", // "model_id" (default) | "exercise_id" | "exercise_title"
  },
  isLoading: ValueNotifier<bool>(false),
  onMessageReceived: handleWebViewMessage,
)

// exerciseFetchType goes inside customParams
const postData = {
  // ... your initial fields (key, userId, company, etc.)
  currentExercise: "Squats",
  exercises: ["Squats", "Jumping Jack"],
  customParams: {
    exerciseFetchType: "exercise_title", // "model_id" (default) | "exercise_id" | "exercise_title"
  },
};

// exerciseFetchType goes inside customParameters
const postData: IPostData = {
  key: 'YOUR_API_KEY',
  userId: 'YOUR_USER_ID',
  company: 'YOUR_COMPANY_NAME',
  currentExercise: 'Squats',
  exercises: ['Squats', 'Jumping Jack'],
  customParameters: {
    exerciseFetchType: 'exercise_title', // "model_id" (default) | "exercise_id" | "exercise_title"
  },
};

1// Step 1 — fetch additional models at runtime
2sdkRef.current?.sendAction(
3  "workout_activity_action",
4  "load_models",
5  {
6    exercises: ["Jumping Jack", "Lunges"],
7    exerciseFetchType: "exercise_title", // match the form you used initially
8  }
9);
10
11// Step 2 — wait for models_loaded, then switch
12const handleMessage = (type: string, data: { [key: string]: any }) => {
13  if (type === "models_loaded" && data.modelIds?.includes("Jumping Jack")) {
14    // Step 3 — switch the active exercise. Do NOT repeat exerciseFetchType here.
15    sdkRef.current?.changeExercise("Jumping Jack");
16  }
17  if (type === "error_occurred") {
18    console.warn("KinesteX error:", data.message);
19  }
20};

1@State private var modelWarmedUp = false
2@State private var modelsLoaded = false
3var isReady: Bool { modelWarmedUp && modelsLoaded }
4
5kinestex.createCameraView(
6    exercises: ["3"],
7    currentExercise: $currentExercise,
8    user: nil,
9    isLoading: $isLoading,
10    onMessageReceived: { message in
11        if case .custom_type(let value) = message,
12           let type = value["type"] as? String {
13            if type == "model_warmedup" { modelWarmedUp = true }
14            if type == "models_loaded"  { modelsLoaded  = true }
15        }
16    }
17)
18.opacity(isReady ? 1 : 0)

var modelWarmedUp = false
var modelsLoaded = false

val cameraView = KinesteXSDK.createCameraComponent(
    context = this,
    currentExercise = "3",
    exercises = listOf("3"),
    user = null,
    isLoading = viewModel.isLoading,
    onMessageReceived = { message ->
        if (message is WebViewMessage.CustomType) {
            when (message.data["type"] as? String) {
                "model_warmedup" -> modelWarmedUp = true
                "models_loaded"  -> modelsLoaded  = true
            }
            cameraView.alpha = if (modelWarmedUp && modelsLoaded) 1f else 0f
        }
    },
    permissionHandler = this
)

const [modelWarmedUp, setModelWarmedUp] = useState(false);
const [modelsLoaded, setModelsLoaded] = useState(false);
const isReady = modelWarmedUp && modelsLoaded;

<View style={{ opacity: isReady ? 1 : 0 }}>
  <KinestexSDK
    data={postData}
    integrationOption={IntegrationOption.CAMERA}
    handleMessage={(type) => {
      if (type === 'model_warmedup') setModelWarmedUp(true);
      if (type === 'models_loaded')  setModelsLoaded(true);
    }}
  />
</View>

bool modelWarmedUp = false;
bool modelsLoaded  = false;

KinesteXAIFramework.createCameraComponent(
  isShowKinestex: showKinesteX,
  exercises: ["3"],
  currentExercise: "3",
  isLoading: ValueNotifier<bool>(false),
  onMessageReceived: (message) {
    // Model-readiness events arrive as CustomType; the name is in data['type']
    if (message is CustomType) {
      if (message.data['type'] == 'model_warmedup') {
        setState(() => modelWarmedUp = true);
      }
      if (message.data['type'] == 'models_loaded') {
        setState(() => modelsLoaded = true);
      }
    }
  },
)

let modelWarmedUp = false, modelsLoaded = false;
const reveal = () => {
  if (modelWarmedUp && modelsLoaded) iframe.style.opacity = '1';
};

iframe.style.opacity = '0';
window.addEventListener("message", (event) => {
  if (event.origin !== "https://ai.kinestex.com") return;
  const msg = JSON.parse(event.data);
  if (msg.type === 'model_warmedup') { modelWarmedUp = true; reveal(); }
  if (msg.type === 'models_loaded')  { modelsLoaded  = true; reveal(); }
});

const [modelWarmedUp, setModelWarmedUp] = useState(false);
const [modelsLoaded, setModelsLoaded] = useState(false);
const isReady = modelWarmedUp && modelsLoaded;

<div style={{ opacity: isReady ? 1 : 0 }}>
  <KinesteXSDK
    data={postData}
    integrationOption={IntegrationOption.CAMERA}
    handleMessage={(type) => {
      if (type === 'model_warmedup') setModelWarmedUp(true);
      if (type === 'models_loaded')  setModelsLoaded(true);
    }}
  />
</div>

1// Switch exercise (Swift uses two-way binding via @State)
2currentExercise = "394"
3
4// Pause / resume tracking
5currentExercise = "Pause Exercise"
6currentExercise = "3"

// Switch exercise
KinesteXSDK.updateCurrentExercise("394")

// Pause / resume tracking
KinesteXSDK.updateCurrentExercise("Pause Exercise")
KinesteXSDK.updateCurrentExercise("3")

// Switch exercise
kinestexSDKRef.current?.changeExercise("394");

// Pause / resume tracking
kinestexSDKRef.current?.changeExercise("Pause Exercise");
kinestexSDKRef.current?.changeExercise("3");

// All controls go through your updateExercise ValueNotifier
updateExercise.value = "394";
updateExercise.value = "Pause Exercise";
updateExercise.value = "3";

// Switch exercise
webView.contentWindow.postMessage(
  { currentExercise: "394" },
  srcURL
);

// Pause / resume tracking
webView.contentWindow.postMessage({ currentExercise: "Pause Exercise" }, srcURL);
webView.contentWindow.postMessage({ currentExercise: "3" }, srcURL);

// Switch exercise
ref.current?.changeExercise("394");

// Pause / resume tracking
ref.current?.changeExercise("Pause Exercise");
ref.current?.changeExercise("3");

1import SwiftUI
2import KinesteXAIKit
3
4struct CameraScreen: View {
5    let kinestex = KinesteXAIKit(
6        apiKey: "YOUR_API_KEY",
7        companyName: "YOUR_COMPANY_NAME",
8        userId: "YOUR_USER_ID"
9    )
10
11    // 3 = Squats, 394 = Jumping Jack
12    let exerciseIds = ["3", "394"]
13
14    @State private var index = 0
15    @State private var currentExercise = "3"
16    @State private var reps = 0
17    @State private var isLoading = false
18
19    var body: some View {
20        VStack(spacing: 16) {
21            Text("Reps: \(reps)")
22                .font(.title)
23                .padding(.top)
24
25            kinestex.createCameraView(
26                exercises: exerciseIds,
27                currentExercise: $currentExercise,
28                user: nil,
29                isLoading: $isLoading,
30                onMessageReceived: { message in
31                    if case .reps(let value) = message {
32                        reps = value["value"] as? Int ?? 0
33                    }
34                }
35            )
36
37            HStack(spacing: 24) {
38                Button("Previous") { switchTo(index - 1) }
39                Button("Next")     { switchTo(index + 1) }
40            }
41            .padding(.bottom)
42        }
43    }
44
45    private func switchTo(_ newIndex: Int) {
46        index = (newIndex + exerciseIds.count) % exerciseIds.count
47        currentExercise = exerciseIds[index]
48        reps = 0
49    }
50}

import android.Manifest
import android.os.Bundle
import android.widget.Button
import android.widget.LinearLayout
import android.widget.TextView
import androidx.activity.result.contract.ActivityResultContracts
import androidx.appcompat.app.AppCompatActivity
import com.kinestex.kinestexsdkkotlin.GenericWebView
import com.kinestex.kinestexsdkkotlin.KinesteXSDK
import com.kinestex.kinestexsdkkotlin.PermissionHandler
import com.kinestex.kinestexsdkkotlin.WebViewMessage
import kotlinx.coroutines.flow.MutableStateFlow

class CameraActivity : AppCompatActivity(), PermissionHandler {
    // 3 = Squats, 394 = Jumping Jack
    private val exerciseIds = listOf("3", "394")
    private var index = 0
    private val isLoading = MutableStateFlow(false)
    private lateinit var camera: GenericWebView
    private lateinit var tvReps: TextView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_camera)

        tvReps = findViewById(R.id.tvReps)

        camera = KinesteXSDK.createCameraComponent(
            context = this,
            currentExercise = exerciseIds[0],
            exercises = exerciseIds,
            user = null,
            isLoading = isLoading,
            onMessageReceived = { msg ->
                if (msg is WebViewMessage.Reps) {
                    val v = msg.data["value"] as? Int ?: 0
                    runOnUiThread { tvReps.text = "Reps: $v" }
                }
            },
            permissionHandler = this
        ) as GenericWebView
        findViewById<LinearLayout>(R.id.cameraContainer).addView(camera)

        findViewById<Button>(R.id.btnPrev).setOnClickListener { switchTo(index - 1) }
        findViewById<Button>(R.id.btnNext).setOnClickListener { switchTo(index + 1) }
    }

    private fun switchTo(newIndex: Int) {
        index = (newIndex + exerciseIds.size) % exerciseIds.size
        KinesteXSDK.updateCurrentExercise(exerciseIds[index])
        runOnUiThread { tvReps.text = "Reps: 0" }
    }

    override fun requestCameraPermission() {
        registerForActivityResult(
            ActivityResultContracts.RequestPermission()
        ) { granted -> camera.handlePermissionResult(granted) }
            .launch(Manifest.permission.CAMERA)
    }
}

import { useRef, useState } from 'react';
import { View, Text, Button } from 'react-native';
import KinestexSDK from 'kinestex-sdk-react-native';
import {
  IntegrationOption,
  KinesteXSDKCamera,
  IPostData,
} from 'kinestex-sdk-react-native/src/types';

// 3 = Squats, 394 = Jumping Jack
const exerciseIds = ['3', '394'];

export default function CameraScreen() {
  const ref = useRef<KinesteXSDKCamera>(null);
  const [index, setIndex] = useState(0);
  const [reps, setReps] = useState(0);

  const postData: IPostData = {
    key: 'YOUR_API_KEY',
    userId: 'YOUR_USER_ID',
    company: 'YOUR_COMPANY_NAME',
    currentExercise: exerciseIds[0],
    exercises: exerciseIds,
    style: { style: 'dark' },
  };

  const switchTo = (newIndex: number) => {
    const wrapped = (newIndex + exerciseIds.length) % exerciseIds.length;
    setIndex(wrapped);
    setReps(0);
    ref.current?.changeExercise(exerciseIds[wrapped]);
  };

  return (
    <View style={{ flex: 1 }}>
      <Text style={{ fontSize: 24, padding: 16 }}>Reps: {reps}</Text>
      <View style={{ flex: 1 }}>
        <KinestexSDK
          ref={ref}
          data={postData}
          integrationOption={IntegrationOption.CAMERA}
          handleMessage={(type, data) => {
            if (type === 'successful_repeat') setReps(data.value);
          }}
        />
      </View>
      <View style={{ flexDirection: 'row', justifyContent: 'space-around', padding: 16 }}>
        <Button title="Previous" onPress={() => switchTo(index - 1)} />
        <Button title="Next"     onPress={() => switchTo(index + 1)} />
      </View>
    </View>
  );
}

import 'package:flutter/material.dart';
import 'package:kinestex_sdk_flutter/kinestex_sdk.dart';

class CameraScreen extends StatefulWidget {
  const CameraScreen({super.key});
  @override
  State<CameraScreen> createState() => _CameraScreenState();
}

class _CameraScreenState extends State<CameraScreen> {
  // 3 = Squats, 394 = Jumping Jack
  final exerciseIds = const ['3', '394'];

  int index = 0;
  int reps = 0;
  final showKinesteX = ValueNotifier<bool>(true);
  final updateExercise = ValueNotifier<String?>('3');

  void switchTo(int newIndex) {
    final wrapped = (newIndex + exerciseIds.length) % exerciseIds.length;
    setState(() {
      index = wrapped;
      reps = 0;
    });
    updateExercise.value = exerciseIds[wrapped];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(16),
            child: Text('Reps: $reps', style: const TextStyle(fontSize: 24)),
          ),
          Expanded(
            child: ValueListenableBuilder<String?>(
              valueListenable: updateExercise,
              builder: (context, value, _) {
                return KinesteXAIFramework.createCameraComponent(
                  isShowKinestex: showKinesteX,
                  exercises: exerciseIds,
                  currentExercise: value ?? exerciseIds[0],
                  updatedExercise: value,
                  isLoading: ValueNotifier<bool>(false),
                  onMessageReceived: (m) {
                    if (m is Reps) {
                      setState(() => reps = m.data['value'] ?? 0);
                    }
                  },
                );
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(16),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                ElevatedButton(
                  onPressed: () => switchTo(index - 1),
                  child: const Text('Previous'),
                ),
                ElevatedButton(
                  onPressed: () => switchTo(index + 1),
                  child: const Text('Next'),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

<!doctype html>
<html>
  <body style="margin:0;display:flex;flex-direction:column;height:100vh;">
    <h2 id="reps" style="padding:16px;margin:0;">Reps: 0</h2>
    <iframe
      id="camera"
      src="https://ai.kinestex.com/camera"
      style="flex:1;border:0;"
      allow="camera"
    ></iframe>
    <div style="display:flex;justify-content:space-around;padding:16px;">
      <button id="prev">Previous</button>
      <button id="next">Next</button>
    </div>

    <script>
      // 3 = Squats, 394 = Jumping Jack
      const exerciseIds = ["3", "394"];
      let index = 0;

      const camera = document.getElementById("camera");
      const repsEl = document.getElementById("reps");
      const srcURL = "https://ai.kinestex.com/camera";

      const postData = {
        key: "YOUR_API_KEY",
        userId: "YOUR_USER_ID",
        company: "YOUR_COMPANY_NAME",
        currentExercise: exerciseIds[0],
        exercises: exerciseIds,
      };

      camera.onload = () => camera.contentWindow.postMessage(postData, srcURL);

      window.addEventListener("message", (event) => {
        if (event.origin !== "https://ai.kinestex.com") return;
        const msg = JSON.parse(event.data);
        if (msg.type === "successful_repeat") {
          repsEl.textContent = "Reps: " + msg.value;
        }
      });

      function switchTo(newIndex) {
        index = (newIndex + exerciseIds.length) % exerciseIds.length;
        repsEl.textContent = "Reps: 0";
        camera.contentWindow.postMessage(
          { currentExercise: exerciseIds[index] },
          srcURL
        );
      }

      document.getElementById("prev").onclick = () => switchTo(index - 1);
      document.getElementById("next").onclick = () => switchTo(index + 1);
    </script>
  </body>
</html>

import { useRef, useState } from 'react';
import {
  IntegrationOption,
  KinesteXSDK,
  type IPostData,
  type KinesteXSDKCamera,
} from 'kinestex-sdk-react-ts';

// 3 = Squats, 394 = Jumping Jack
const exerciseIds = ['3', '394'];

export default function CameraScreen() {
  const ref = useRef<KinesteXSDKCamera>(null);
  const [index, setIndex] = useState(0);
  const [reps, setReps] = useState(0);

  const postData: IPostData = {
    key: 'YOUR_API_KEY',
    userId: 'YOUR_USER_ID',
    company: 'YOUR_COMPANY_NAME',
    currentExercise: exerciseIds[0],
    exercises: exerciseIds,
    style: { style: 'dark' },
  };

  const switchTo = (newIndex: number) => {
    const wrapped = (newIndex + exerciseIds.length) % exerciseIds.length;
    setIndex(wrapped);
    setReps(0);
    ref.current?.changeExercise(exerciseIds[wrapped]);
  };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
      <h2 style={{ padding: 16, margin: 0 }}>Reps: {reps}</h2>
      <div style={{ flex: 1 }}>
        <KinesteXSDK
          ref={ref}
          data={postData}
          integrationOption={IntegrationOption.CAMERA}
          handleMessage={(type, data) => {
            if (type === 'successful_repeat') setReps(data.value as number);
          }}
        />
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-around', padding: 16 }}>
        <button onClick={() => switchTo(index - 1)}>Previous</button>
        <button onClick={() => switchTo(index + 1)}>Next</button>
      </div>
    </div>
  );
}