How to integrate GPT 3.5 Turbo API into your Bubble.io app?

Thousand miles journey starts with a simple step. In today’s era where everyone in the no-code community talks about AI here there and everywhere, some not so experience Bubble.io developers face the fear of how to start work on Open AI Projects. This article is just for them to help them take the first step or to be specific first Open AI API Initialization and show the result on UI.

This is a highly basic application that takes a movie name input from users and Open AI will provide 10 similar kinds of movies as movie expert.

• Create Basic UI Infrastructure:

  1.1 Create an Input field that will take the user’s input of movies

  1.2 Create a Button based on which we will process the input

  1.3 Create a custom state which will store the output from Open AI

  1.4 Create a Repeating Group which will be filled with data from the custom state

• Open AI Setup for initialization of GPT 3.5 Turbo API in Bubble API Connector:

  2.1 Signup on https://platform.openai.com/account

  2.2 Generate secret API key on https://platform.openai.com/account/api-keys

  2.3 Read API Documentation on https://platform.openai.com/docs/api-reference

  2.4 Focus the making request API calls on https://platform.openai.com/docs/api-reference/making-requests

• Setup GPT 3.5 Turbo API call in Bubble API Connector:

  3.1 As you can see in the image above the endpoint is https://api.openai.com/v1/chat/completions

  3.2 There are 2 header parameters

  Key: Content-Type and its value: application/JSON

  Key: Authorization and its value: Bearer OpenAI_Key_Value

  Use these header parameters in the shared header presented in the image below so that this will be applicable to app API calls

  As the authorization key is a Bearer token, no need to add any authentication.

  Here is how it will look:

• API Call in Bubble API Connector:

  To make an API call you will need the followings:

  • Name: Let’s call it Movie Recommendation

  • Use As: Action (because we are going to use this API in workflow)

  • Data-type: JSON

  • API Call: It will be a ‘Post’ Call because we are sending a new input which is a movie name from the user and sending it to open AI to generate and receive a response

  • End Point: https://api.openai.com/v1/chat/completions (as you can see in making the request page screenshot mentioned in point 2 above)

  • Body: This is quite an interesting part as you can see in making the request page screenshot mentioned in point 2 above which I am writing here:

    { “model”: “gpt-3.5-turbo”, “messages”: [{“role”: “user”, “content”: “Say this is a test!”}], “temperature”: 0.7 }

    so here are 3 parameters

    Key: a model for which value: gpt-3.5-turbo

    Key: temperature for which value: 0.7

    Key: messages for which value: [{“role”: “user”, “content”: “Say this is a test!”}]

    Now the last one is that key-named messages have a nested array as a value. You can see here how to pass the nested array as a parameter in the body of Bubble API Connector.

  So here I will put this whole JSON in the body editor space but before I show you how, let’s talk about the prompt.

  ‘Prompt’ is an instruction or discussion topic a user provides for the GPT AI model to respond to. The prompt can be a question, statement, or any other stimulus intended to spark creativity, reflection, or engagement.

  As you can see, you can create your own prompt to ask open AI to provide movie suggestions.

  Here is my prompt: You are a movie expert who is going to recommend 10 movies of the same genre as <input_movie>. All these 10 movies are separated by bullet points and enter. Take time and think twice before you generate 10 names as You want to provide the most identical movies with the same genre.

  (Note: Because I am telling AI to take time and think twice, It will take time to load the response on the client side. So delay in the response to the movie recommendation is by design and not a bug here. If you want Open AI to generate fast results, don’t use ‘take time and think twice’ in the prompt)

Now I will put the whole body as JSON and the whole API call will look like this:

Now to ‘Initialize call’, put the movie name in the value for key ‘input_movie’ and click on ‘initialize call’ or ‘reinitialize call’. The successful call response will look like this:

As you can see the response of the model is gpt3.5 turbo for which the API was initialized and the choices are a list.

Now unmark the body parameter as private and let’s set up a workflow.

• Create a Workflow:

  When someone clicks to submit the movie name after writing it in the input field, workflow action will call the API and then save the response’s choices in the state on the page as a list which will be displayed in Repeating Group on the client side.

And here is the output:

Vola!

Connect with me on LinkedIn.