Bring your Avarole agent into the products you build.

React Native setup

Download the current package from Integrations → Mobile SDK in the Avarole app, or install it from the package URL. The current app build lists version 0.1.0 and a 15.0 KB package.

npm i https://app.avarole.com/sdk/avarole-react-native.tgz \
  @livekit/react-native \
  @livekit/react-native-webrtc \
  livekit-client \
  react-native-live-audio-stream

cd ios && pod install

The package ships TypeScript source with explicit extensions, so set allowImportingTsExtensions to true in tsconfig.json. Metro handles it.

Use the provided component or build your own call screen

Call setupAvarole() once in the app entry point before rendering. Then place <AvaroleAgent /> next to the rest of the app with the agent’s ID and embed key. This is the same kind of embed key the website widget uses.

// index.js — once, before anything renders
import { setupAvarole } from '@avarole/react-native';
setupAvarole();

// App.tsx
import { AvaroleAgent } from '@avarole/react-native';

export default function App() {
  return (
    <>
      <YourApp />
      <AvaroleAgent agentId="YOUR_AGENT_ID" apiKey="YOUR_AGENT_EMBED_KEY" name="Assistant" />
    </>
  );
}

The drop-in version includes a floating button, live avatar, captions, mute and end-call controls. For a custom screen, useAvarole() gives you connection status, captions, time left, errors and mute state, plus start, stop and mute controls. <AvatarView client={client} /> renders the avatar.

Give the agent a small, clear set of tools

The agent can only call actions your app registers. Check the arguments in every handler like any user input. Mark actions that change something with confirm: true and the SDK asks the user to Allow before running them.

const actions = useMemo(() => [{
  name: 'apply_coupon',
  description: 'Apply a coupon code to the cart',
  params: { type: 'object', properties: { code: { type: 'string' } }, required: ['code'] },
  handler: async ({ code }) => cart.applyCoupon(String(code)),
}, {
  name: 'cancel_order',
  description: 'Cancel the current order',
  confirm: true,
  handler: () => orders.cancelCurrent(),
}], []);

Pass screen context as labels and state only, like the screen name, a short summary and whether a field is filled. Never pass what the person typed. Handlers can return data, or { ok: false, status, reason } when something fails.

Measure app journeys without collecting what people type

Mobile insights are on by default and show on the dashboard under Where visitors drop off. The SDK records screen names, named funnel steps, touch friction and form start and submit state. It never reads or sends what the user types.

const { client } = useAvarole({ agentId, apiKey });

client.insights.screen('Checkout');
client.insights.step('kyc_started');
client.insights.touch(x, y); // call from the root view's onTouchStart

const form = client.insights.form('signup', 6);
form.started();
form.submitted();

• Pass AsyncStorage through the storage option to count returning users once.
• Turn insights off with insights={false} or in the agent’s Build settings.
• Web page tools like scrolling and clicking don’t work in a native app.
• A call follows the agent’s session limit and shows the user a countdown.
• If the connection drops, the SDK retries three times before ending the call.
• Test microphone access and calls on real iOS and Android phones before release.