> For the complete documentation index, see [llms.txt](https://ask-clio.gitbook.io/ask-clio/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ask-clio.gitbook.io/ask-clio/basics/editor.md).
# React Native SDK Integration
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:
```bash
npm install react-native-webview
# or
yarn add react-native-webview
```
On iOS, also run:
```bash
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
```javascript
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 (
);
}
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 ****.
***
### 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 **** for additional help.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://ask-clio.gitbook.io/ask-clio/basics/editor.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.