# Open AI Assistant/Chatbot

What you will need:

* Kinde Free account
* Open AI account and AI Assistant created
* Xano free account

### 1. Prepare your Figma design and set up Kinde authentication

Refer to our Authentication with Kinde and Xano docs [here](https://docs.bravostudio.app/integrations/user-authentication/authentication-with-kinde-and-xano).

### 2. Install and set up our Bravo Studio Open AI snippet

Once you have completed your authentication set up, [install our Bravo Studio Openai Assistant chat](https://www.xano.com/snippet/sTv2yKGW).

Once installed to your Xano instance, click **manage.**

<figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2Fz9ps4a5unJiOwm4NZeMN%2FScreenshot%202025-06-05%20at%203.29.18%E2%80%AFPM.png?alt=media&#x26;token=eaf78d3d-9cf8-4e3f-8dff-ebfa459a3628" alt=""><figcaption></figcaption></figure>

Add your **openai\_api\_key** and **openai\_assistant\_id:**

<figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2Ff3kndQrVzaVA1cFjGEi9%2FScreenshot%202025-06-05%20at%203.30.55%E2%80%AFPM.png?alt=media&#x26;token=65d96455-37a4-4142-b3f4-4bf46b5faf3a" alt=""><figcaption></figcaption></figure>

Go to API's and select your /assistant/get\_url endpoint.&#x20;

From you rfunction stack list, select "Create Authentication Token".

On the configuration panel, select your external\_user table.

<figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FMfziO0e0HQ5FITRXipx1%2FScreenshot%202025-06-05%20at%203.32.47%E2%80%AFPM.png?alt=media&#x26;token=fdd123b9-6a7e-44c2-820a-d24a04da1baa" alt=""><figcaption></figcaption></figure>

Copy your /assistant/get\_url endpoint url.

In Bravo Studio, open your app project Data collection:

<figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FbA35cAPWwWSIBrC3vOyB%2FScreenshot%202025-06-05%20at%203.37.09%E2%80%AFPM.png?alt=media&#x26;token=082090e7-d6b1-40e9-a6d3-2d4e7ff252c7" alt=""><figcaption></figcaption></figure>

Create a new GET request and paste your /assistant/get\_url endpoint url and hit Send.

Make sure to **select the received data**:

<figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FgQrnyDiWSb5pbvcXPKRf%2FScreenshot%202025-06-05%20at%203.40.08%E2%80%AFPM.png?alt=media&#x26;token=0bf50d77-37c6-489d-be5d-757876a37e00" alt=""><figcaption></figcaption></figure>

Click Debug to open response details. Here you will find your AI assistant URL which you can test in your browser:

<figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FueV7E0KWLhz0FeGM3vJz%2FScreenshot%202025-06-05%20at%203.43.16%E2%80%AFPM.png?alt=media&#x26;token=214734fa-c8e3-491d-bb65-b0875f12d3fe" alt=""><figcaption></figcaption></figure>

Back in your app project, select the web-view design element and bind it with your selected data:

<figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FcZuUu32A406LUUe05Pdf%2FScreenshot%202025-06-05%20at%203.45.15%E2%80%AFPM.png?alt=media&#x26;token=394c5b9d-7d6c-45cf-9816-07aa41ed953c" alt=""><figcaption></figcaption></figure>

Go to Bravo Vision and test your app authentication flow and AI chatbot!