Connecting OpenAI’s latest model to your Bubble app

Here we will show you how to use an instruct model from OpenAI as an API call instead of a completion model.

Step 1: Setting up API call for OpenAI’s ChatGPT

1. Navigate over to the plugins tab.

image

2. Expand your API call for Open AI.

image

3. Scroll down until you see the button “Add another call”

image

4. Click on the button “Add another call”

image

5. Give the new API call a name.

image

6. Click on the drop-down menu next to “Use as”, and select “Action.”

image

7. Click on the drop-down menu where it says “Name” and instead of POST select GET.

image

8. To the right of where it says “POST” copy the end point address of ChatGPT

https://api.openai.com/v1/chat/completions

Note: The end point address is different from the one used by Davinci and other completion models. Both addresses can be found here: https://platform.openai.com/docs/guides/gpt

image

Step 2: Specifying prompt and model parameters and importing them to Bubble

1. Log into your account on platform.openai.com

image

2. Write a prompt next to the slot where it says “User”.

image

3. Click on the button “View Code”.

image

4. In the window that appears, click on the side menu which says “curl”.

image

5. From the drop-down menu, select “json”.

image

6. Click on the button “copy”.

image

7. Paste the code into the window under “Body”.

image

8. Click on “Initialize call”

image

If all the steps were executed correctly, you should get this confirmation message.

image

Step 3: Modify the workflow which utilizes the new ChatGPT text generator

1. Switch over to the “Workflow” tab on the far left.

image

2. You will now replace the workflow involving the Davinci model with a workflow which involves ChatGPT. Click on the button responsible for the Davinci trigger.

image

3. Delete the steps of the Davinci workflow.

image
image

4. Click on the button “Click here to add an action…”

image

5. From the menu which appeared, select the option “Plugin” in the left column.

image

6. Select from the options the API call which you named in step 2.5. In our case, that name is “OpenAI - ChatGPT API Call”

image

7. In the menu that appeared, click on the menu next to “(body) input”.

image

8. A blue button will appear which says “Insert dynamic data.” Click on it.

image

9. In the drop-down menu which appears, select the option “Input <what you chose for the variable name in step 4.4 of the original app creation manual>”. In our case, that variable name is also “input” so our choice will be “Input input…”.

image

10. Click on the option “ ‘s values”.

image

11. Close that menu.

image

12. Click on the next dotted rectangle titled “Click here to add an action…”

image

13. In the menu which appears, select the menu window next to the title “Element.”

image

14. In the gray window that will appear, select “Text A”.

image

15. Click on the menu to the right of the title “Custom state”. Then select the “response_gpt” state option which you specified in Step 7.15. (Or whatever name you gave in the that step)

image

16. Click on the drop-down menu next to the title “Value.”

image

17. Next select the option “Result of Step 1 (Open AI - API Call).

image

18. In the drop-down menu which appears afterwards, select “‘s choices”.

image

19. Next, select the menu item “ :each item’s message content”

image

20. Next, select the item “ :first item”

image

21. Close that window.

image

Congratulations! You have created an AI app with OpenAI’s ChatGPT!

Preview the experience

To see how the viewer will experience the app, click on the “Preview” button in the top-right corner.

image

Click on the “Generate” button you have created earlier and see if a text following the prompt you specified will appear.

image