Open AI Assistant/Chatbot

This tutorial will guide you to build an Open AI chatbot app.

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.

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.

Once installed to your Xano instance, click manage.

Add your openai_api_key and openai_assistant_id:

Go to API's and select your /assistant/get_url endpoint.

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

On the configuration panel, select your external_user table.

Copy your /assistant/get_url endpoint url.

In Bravo Studio, open your app project Data collection:

Create a new GET request and paste your /assistant/get_url endpoint url and hit Send.

Make sure to select the received data:

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

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

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