The Anam AI JavaScript SDK is primarily a web SDK, but it can be used in a React Native app by combining it with the react-native-webrtc library.
This example demonstrates how to use the Anam AI JavaScript SDK in a React Native app.
This example is an Expo project that was initially created with create-expo-app.
In addition to the starting expo template the project includes:
- react-native-webrtc for handling the WebRTC connection
- Anam AI JavaScript SDK for the AI interaction
Normally when developing with an Expo application on device you would run the Expo Go application on the device and connect to the local development server. However, as the react-native-webrtc library includes native code it is not supported on Expo Go by default. You can get things working by using the expo-dev-client to create a development build, which is essentially your own custom Expo Go application with native code ability.
If you're starting from your own Expo project you can follow the instructions in the Expo section of the React Native WebRTC documentation.
-
Install dependencies
npm install
-
For testing purposes, update the API key in the
app/(tabs)/index.tsxfile. -
Build a dev client and install it on your device or simulator by following the instructions in the Expo documentation.
-
Start development server
npx expo start
-
Open your dev client on your device or simulator and connect to the development server.
To learn more about developing your project with Expo, look at the following resources:
- Expo documentation: Learn fundamentals, or go into advanced topics with our guides.
- Learn Expo tutorial: Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
To learn more about the react-native-webrtc library, look at the following resources:
To learn more about the Anam AI JavaScript SDK, look at the following resources:
Expo isn't a requirement for using the Anam AI JavaScript SDK. You can use the SDK in any React Native project as long as you provide a WebRTC implementation. In this example we're using the react-native-webrtc library, and the important part is that you call registerGlobals() before initializing the Anam SDK so that the browser API for WebRTC is available.