Connect ChatGPT's API to Bubble w/ Example - Bubble.io Tutorial 

Thanks Aymeric, that means a lot 👊

Hey Raindrops thank you for the kind words!

Hey Oleksandr, amazing. Best of luck on the app!

You're very welcome

Awesome, so glad it helped!

You're welcome

You're very welcome

Hey AJ, great question I don't have a video yet but here's the steps you can follow. (1) find a video on how to fine tune like ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-_RTN8CWFUsc.html or ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-c07eWV6Pois.html (2) once you've gotten a fine tuned model setup, select that model in the right sidebar and you'll be set... to see this exactly, go to 5:08 of this video and look at where it says model in the JSON and you can see it's using text-davinci-003. This comes from the right hand side dropdown for Model where it says text-davinci-003, but once you've added a fine tuned model to ChatGPT, your model will show up there so you can select that there to put it in your JSON and begin using your fine tune model in Bubble. Good luck.

dont you worrie about that he does that all the time 🙈 but is good content anyway ✌😁 give him some slack mate

You're welcome. I see your point and for starters I'd recommend storing the inputs/outputs in the database so you could recall those as necessary. The limitation that might come in thou is if you're referencing 6 pieces of a conversation that are all really long, you may hit a size limit on what you can send in your next "fresh" prompt. But if you're creative about how you reference that stored conversation pieces, hopefully that'd at least be a step in the right direction. Hard to say anything else without knowing the exact use case you're planning. Could you share more of that or is the "get creative" about referencing data somewhat helpful hopefully?

There are a couple ways to do that. One would be to receive the whole response and use something in Bubble to stream the text, this kind of fakes the streaming and would be the slowest. The next is that there is an option to get the response from the API streamed to you by setting the parameter for stream as true -- platform.openai.com/docs/api-reference/completions/create#completions/create-stream. I haven't personally done this, but if you achieve receiving the response bit by bit, you could then show those bit by bit. Lastly, this plugin which I don't have experience with looks like it offers that feature as well bubble.io/plugin/chatgpt-with-real-time-streaming-1670531100735x105135745568079870. Good luck.

@@NoCodeAcademy thanks, will try these ideas.

Hey could you export it into something like google sheets from wherever you're collecting it with your Python script? You could then use Zapier to push over into Bubble. You may find that Zapier could do this without Google Sheets but I'm unsure. Hope that helps as a route to explore.

Hi Stephen, glad you found it helpful. If you were to phrase that last part as a question, what might that be? Is the issue w the prompt or the format of text?

@@NoCodeAcademy the issue is setting the prompt on to reformat the text

Hi @@user-nu7lv8gc5i you're welcome to get in touch at calendly.com/nocodeacademy/solve-your-bubble-challenges and we could work through it

Hi thanks for the comment. In Bubble you mean? Hmm don't know. Maybe put Bearer APIKEYHERE into notepad.js.org/ and then paste over?

Hi yes you need an account with a credit card added, but you will get a certain amount of free tokens to start. Hope that helps.

Hi Christophe, without knowing the specific issue, hopefully this suggestion helps -- pay close attention to 6:40 and 10:43 for what is going on with the data. At 6:40, it gives an overview of the data it is returning and 10:43 you can see the trail we take getting to the specific result we want for the case of our example. If you are attempting to do something different than this tutorial with the data coming back from the API, you'll likely want to perform some split, extract, find & replace, append or regex functions on the data once it's returned. How might you do that? Play around with it by taking whatever data is it returning and put it into two identical side-by-side pieces of text to be displayed on the page. Then play around in one of those texts elements using those functions per the documentation here manual.bubble.io/core-resources/data/operations-and-comparisons#split-by.... good luck.

@@NoCodeAcademy thanks a lot!

Is it possible with Bubble to create a chatbot with chat gpt AND using an internal data base as well? Thanks Christophe

@@christophedecrouy3822 yes it's possible I'll re-share the response to another comment here but it's a different API of OpenAI's that you'd be interacting with. This tutorial overviews the api version of GPT that is Completions and no tutorial yet for the version of the api that is Chat. But here's a rough list of steps to setup a new api call in Bubble to interact with the Chat version of api.. (1) you'll want to read and study the docs platform.openai.com/docs/api-reference/chat/create (2) setup a new API call (with same authentication as shown in this video, the only difference is you doing a new api call) that is a POST to api.openai.com/v1/chat/completions and run it as an action (3) note the parameters box on right side platform.openai.com/docs/api-reference/chat/create as that's what goes in your json body when you build out the API call in Bubble (4) the trick to all of this is getting your bubble data structure to format each part of the chat as shown in the first black code block on platform.openai.com/docs/guides/chat under “An example API call looks as follows:”.. I’d suggest a data type that includes a field for Role (could be an option set of system/user/assistant, and a field for Text (to hold the sent messages and responses) … essentially whatever parts of the json you make dynamic over in the API call that you setup, like to 5:25 (this part it helps to have a working knowledge of Bubble APIs more so than knowing this particular example .. again, the trick to all of this is getting the data you’re submitting when you run the workflow action in Bubble to post data over to the chatgpt Chat api is getting into that example format mentioned at the start of this point (5) if you’ve got the action setup to send the data in the correct format and you’re getting responses and saving the data in a structured way, you can display this data in a repeating group so it appears as a chat and play with the UI so it feels more like a chat (6) because OpenAI has a token limit, for the time being, you will run into the issue of having too many characters/tokens at some point and will want to shave off the oldest chat messages but that is a discussion for another day, Hope that helps.

Hi, which specific step are you referring to?

Hi David, this tutorial overviews the api version of GPT that is Completions and no tutorial yet for the version of the api that is Chat. But here's a rough list of steps to setup a new api call in Bubble to interact with the Chat version of api.. (1) you'll want to read and study the docs platform.openai.com/docs/api-reference/chat/create (2) setup a new API call (with same authentication as shown in this video, the only difference is you doing a new api call) that is a POST to api.openai.com/v1/chat/completions and run it as an action (3) note the parameters box on right side platform.openai.com/docs/api-reference/chat/create as that's what goes in your json body when you build out the API call in Bubble (4) the trick to all of this is getting your bubble data structure to format each part of the chat as shown in the first black code block on platform.openai.com/docs/guides/chat under “An example API call looks as follows:”.. I’d suggest a data type that includes a field for Role (could be an option set of system/user/assistant, and a field for Text (to hold the sent messages and responses) … essentially whatever parts of the json you make dynamic over in the API call that you setup, like to 5:25 (this part it helps to have a working knowledge of Bubble APIs more so than knowing this particular example .. again, the trick to all of this is getting the data you’re submitting when you run the workflow action in Bubble to post data over to the chatgpt Chat api is getting into that example format mentioned at the start of this point (5) if you’ve got the action setup to send the data in the correct format and you’re getting responses and saving the data in a structured way, you can display this data in a repeating group so it appears as a chat and play with the UI so it feels more like a chat (6) because OpenAI has a token limit, for the time being, you will run into the issue of having too many characters/tokens at some point and will want to shave off the oldest chat messages but that is a discussion for another day, Hope that helps.

Hi, yes you need an account with an active credit card, but you do get some free credits to start.

Hey appreciate you reaching out about your app! As much as I'd like to help everyone individually, due to the volume of requests I receive, I'm unfortunately not able to provide direct one-on-one assistance. However, I strive to cover a wide range of topics and common challenges in my videos, with the goal of helping as many people as possible. I'd encourage you to browse through my existing content to see if any of the tutorials or explanations are relevant to your app and the specific issues you're facing. If you can't find what you're looking for, you're welcome to suggest video topics that would be helpful for you and likely others in a similar situation.Hope that helps.

If you're looking for something that's more organized than just channel videos, you also might also try this free course to cover the basics on building a UI and feeling the confidence that no stone is unturned in terms of the pieces you need to make your app happen www.nocodeacademy.co/offers/jJn2zLwW

Hi Matteo, good point. Try (a) at 4:40 instead of a workflow action to utilize it as a data call or (b) add a spinner loading icon in the UI ease end user pain points.

Hehe yea realized that afterwards, part of me having this channel is cleaning up my speaking skills after being homeschooled as a kid and lacking opportunities to grow my foundational communication skills. Plenty of opportunity for improvement at the moment. Hope you found value still thou.

Hi Cambridge, thanks for the comment. Could you give some context to what you mean? In this video, ChatGPT is connected to a custom user interface via the OpenAI API.

@@NoCodeAcademy Okay, so I see you may be confused. The CHATGPT API and the GPT-3 API are 2 DIFFERENT THINGS. They are not the same lol. A and B. Apples and Oranges. Birds and Bees. DIFFERENT. You are seriously confusing people. The CHATGPT API literally just came out a couple days ago, so there is NO WAY this old video is covering the CHATGPT API. Your video covers the GPT-3 API, which is NOT THE SAME. #2, The way you implement the CHATGPT API and the GPT-3 API are completely different. And you have not taught that in your video. So yeah, your video title is very misleading. And it's just wrong. Hope that helps.

​@@cjenkinsiv thank you for that distinction, it's helpful and I'm sure it will be helpful to others who visit the video as well.

@@cjenkinsiv holy shit, are you on period

Lord I love these On Doce Adacemy TouYubs

Hi thanks for your comment. We are all inspirations to others in our own ways ;). Good luck.

Haha yes good point, the excitement of it all got to me and being used to GTA (Grand Theft Auto) as the only other 3 letter acronym starting with G that I knew caused the mixup

@@NoCodeAcademy no worriesw doesn't affect the quality of this very helpful video ! I just wanted to let you know ;)

Hi Sergio, I'd hope it inspires others who are too afraid to start because they don't want to make a mistake -- because it's possible to still provide value to world without being perfect. Even so, I see your point and in a way the mistake is kinda funny no? 😂 Good luck on your project for whatever idea brought you here and I hope in the kindest way possible you make a ton of mistakes along the way the providing value to those who'd be your customers 🙂.

The world can't be as perfect as you. The content is what matters

🚩

@@srikarr7263 You are right. About the content. Not chatGPT either, but that was already pointed out. But who cares, the effort is what matters. Correct?

@@NoCodeAcademy Thanks. Take criticism with courage and keep improving. That matters. Don't listen to the apologists. Everyone can improve but only the ones that fall, stand up and walk, do. In some countries you get a gold star for participating. In my view, that breeds mediocrity. By the way, I only give feedback if I care enough. If I see content that merits failure, I say nothing.

Hey Nathan, thanks for stopping through, glad it helped!