React Native SDK Integration

Mobile SDK Integration Guide

The Ask Clio SDK enables seamless chatbot capabilities within your React Native mobile application using a WebView. Follow the steps below to integrate Ask Clio’s AI assistant and securely pass runtime context into tool execution.

---

Step 1: Install WebView

Install the required WebView dependency:

npm install react-native-webview
# or
yarn add react-native-webview

On iOS, also run:

cd ios && pod install && cd ..

---

Base URL

Ask Clio is loaded from:

https://app.askclio.ai

---

Supported Parameters

• client_id (required) Your unique client identifier. The client_id can be found at the bottom of the Configuration tab in the Ask Clio dashboard.

• st (optional) A short-lived session token generated by your backend.

  The session token securely passes:

  • Dynamic Inputs (firm-defined secure fields)

  • Clearing identifiers (e.g. clearing account IDs)

  Security model

  • Values passed via st are not exposed to the LLM prompt

  • They are only accessible to tools that explicitly reference them

  • The token is scoped to a single session and must be regenerated per session

• is_wide (optional) When set to true, the interface will use a wider layout.

Session identity

When using st, generate the token from your backend and include a stable user.id for the authenticated end user.

Ask Clio separates authenticated SDK users from anonymous sessions and workspace/admin users. If the mobile user changes, logs in, logs out, or switches accounts, generate a fresh session token and reload or refresh the WebView with the new token.

---

Example Usage

import React from "react";
import { StyleSheet, View } from "react-native";
import { WebView } from "react-native-webview";

export default function AskClioScreen() {
  const clientId = "abc_123"; // replace with your actual client_id
  const sessionToken = "SESSION_TOKEN"; // optional session token

  const url = `https://app.askclio.ai?client_id=${encodeURIComponent(
    clientId
  )}&st=${encodeURIComponent(sessionToken)}&is_wide=true`;

  return (
    <View style={styles.container}>
      <WebView
        source={{ uri: url }}
        style={styles.webview}
        javaScriptEnabled
        domStorageEnabled
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  webview: {
    flex: 1,
  },
});

The st parameter is optional. Omit it if you do not need to pass Dynamic Inputs or clearing identifiers.

---

Notes

• Replace abc_123 with your actual client_id. The client_id can be found at the bottom of the Configuration tab in the Ask Clio dashboard.

• is_wide=true is optional — remove it if you prefer the default layout.

• The WebView takes up all available space (flex: 1), but you can adjust dimensions if you want a smaller embedded view.

• If provided, the session token (st) is consumed automatically by Ask Clio during session initialization and made available to tools during execution.

Important: User Identity vs Clearing Account IDs

When generating a session token (st), the user.id field must be a stable identifier from your own application (for example, your internal user UUID or database ID).

Do not use clearing or brokerage account identifiers (such as Alpaca account IDs) as user.id.

Clearing account identifiers should be passed only via Dynamic Inputs in tools_input (for example, alpaca_account_id).

Ask Clio intentionally separates who the user is (user.id) from which account is being queried (alpaca_account_id).

---

Step 2: Customization Options

The SDK provides several customization options to align the chatbot with your branding:

• Custom Logo Replace the default Clio logo with your own branding in the Ask Clio middle office.

• Custom Sizing The is_wide=true parameter is optional — remove it if you prefer the default layout.

• Custom Colors & Fonts Background colors, fonts, and other styling options can be configured in the Ask Clio middle office.

For help configuring these options, contact [e-mail].

---

Step 3: Final Verification

To verify your integration:

1. Launch the WebView in your app

2. Interact with the chatbot

3. Confirm that tools execute correctly (including any Dynamic Inputs or clearing integrations, if applicable)

---

Next Steps

After completing the integration, test the chatbot in your app to ensure it works seamlessly.

If you encounter any issues or have questions about session tokens, Dynamic Inputs, or clearing integrations, reach out to [e-mail] for additional help.