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

แชร์
ฝัง
  • เผยแพร่เมื่อ 11 ม.ค. 2025

ความคิดเห็น • 82

  • @a_pellan_en
    @a_pellan_en ปีที่แล้ว +8

    Thank you so much for the video! Please ignore those trolls and keep posting, your content is extremely helpful!!

    • @NoCodeAcademy
      @NoCodeAcademy  ปีที่แล้ว +1

      Thanks Aymeric, that means a lot 👊

  • @Supercharged_Mindset
    @Supercharged_Mindset ปีที่แล้ว +18

    what's chat GTP?

  • @matrixnavigator6669
    @matrixnavigator6669 6 หลายเดือนก่อน

    Great video, thank you! After watching this, I believe I'll be able to figure out how to do what I want to do, which is have a labeled button trigger the subject that the button is labeled with to bring back a response to the user. It's similar to what you've shown here, but instead of the user typing in the subject, they just choose from a group of buttons with different subject layers. Fingers crossed!!!

    • @NoCodeAcademy
      @NoCodeAcademy  5 หลายเดือนก่อน

      Awesome, so glad it helped!

  • @raindrops20008
    @raindrops20008 ปีที่แล้ว +2

    What an amazingly useful video! thanks!

    • @NoCodeAcademy
      @NoCodeAcademy  ปีที่แล้ว

      Hey Raindrops thank you for the kind words!

  • @theaccountantguy
    @theaccountantguy 10 หลายเดือนก่อน

    Amazing explanation.

  • @SashkoValyus
    @SashkoValyus ปีที่แล้ว

    Thank you for the video! Just built my first no-code app with that.

    • @NoCodeAcademy
      @NoCodeAcademy  ปีที่แล้ว

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

  • @DrewGiovannoli
    @DrewGiovannoli ปีที่แล้ว

    Great demo - thanks for the hard work and putting this content out into the world

  • @MisCopilotos
    @MisCopilotos ปีที่แล้ว

    Excellent, do you have a tutorial about how to stream the response? Thanks for the content, super useful.

    • @NoCodeAcademy
      @NoCodeAcademy  ปีที่แล้ว +2

      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.

    • @MisCopilotos
      @MisCopilotos ปีที่แล้ว +1

      @@NoCodeAcademy thanks, will try these ideas.

  • @ajpicard913
    @ajpicard913 ปีที่แล้ว

    Do you have a video on how to fine tune it or how to call a fine tune model already created on your OpenAi account?

    • @NoCodeAcademy
      @NoCodeAcademy  ปีที่แล้ว

      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 th-cam.com/video/_RTN8CWFUsc/w-d-xo.html or th-cam.com/video/c07eWV6Pois/w-d-xo.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.

  • @jackcole3474
    @jackcole3474 ปีที่แล้ว

    Thanks for the video! Do you know any way of having access to an ongoing conversation/thread whilst using bubble. Because as I understand it each call is a “fresh one” to the api.

    • @NoCodeAcademy
      @NoCodeAcademy  ปีที่แล้ว

      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?

  • @F_in_the_chat
    @F_in_the_chat ปีที่แล้ว

    thank you! I followed a guide and made a Python script with gpt that I can put my data into and then I can ask questions and get responses, but I don't know how to export it to something like bubble. any advice?

    • @NoCodeAcademy
      @NoCodeAcademy  ปีที่แล้ว

      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.

  • @KaiSeidel-w6e
    @KaiSeidel-w6e ปีที่แล้ว

    awesome, thanks!

  • @StephenJohnson-r8x
    @StephenJohnson-r8x ปีที่แล้ว

    wohoooo,this is amazing ..please am trying to do a prompt to re format a text in my app to separate speakers name ....

    • @NoCodeAcademy
      @NoCodeAcademy  ปีที่แล้ว

      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?

    • @StephenJohnson-r8x
      @StephenJohnson-r8x ปีที่แล้ว

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

    • @NoCodeAcademy
      @NoCodeAcademy  ปีที่แล้ว

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

  • @traderB.618
    @traderB.618 10 หลายเดือนก่อน

    why can't I copy and paste the private key next to bearer on the value ? bug?

    • @NoCodeAcademy
      @NoCodeAcademy  10 หลายเดือนก่อน

      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?

  • @GlobalSuccessNarratives
    @GlobalSuccessNarratives ปีที่แล้ว

    Thanks for this

  • @murtadhaolanrewaju5204
    @murtadhaolanrewaju5204 ปีที่แล้ว

    Thanks, have been trying but it not working, did i need to pay before it works

    • @NoCodeAcademy
      @NoCodeAcademy  ปีที่แล้ว

      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.

  • @motionfreerunning9288
    @motionfreerunning9288 ปีที่แล้ว

    Hello, my api keeps on giving me an error message - do I have to pay for it?

    • @NoCodeAcademy
      @NoCodeAcademy  ปีที่แล้ว

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

  • @traemikal
    @traemikal ปีที่แล้ว

    great movie samples haha

  • @christophedecrouy3822
    @christophedecrouy3822 ปีที่แล้ว

    Thanks for this interesting video, I have an issue with the response of chatgpt, the result comes in 3 lines (text is in the last line). How can I have the result in 1 line only? Thanks a lot! Christophe

    • @NoCodeAcademy
      @NoCodeAcademy  ปีที่แล้ว

      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.

    • @christophedecrouy3822
      @christophedecrouy3822 ปีที่แล้ว

      @@NoCodeAcademy thanks a lot!

    • @christophedecrouy3822
      @christophedecrouy3822 ปีที่แล้ว

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

    • @NoCodeAcademy
      @NoCodeAcademy  ปีที่แล้ว

      @@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.

  • @adrianneantoinette9588
    @adrianneantoinette9588 ปีที่แล้ว

    Hey I need help With this step for bubble op

    • @NoCodeAcademy
      @NoCodeAcademy  ปีที่แล้ว

      Hi, which specific step are you referring to?

  • @davidmoosmann
    @davidmoosmann ปีที่แล้ว

    How do I keep the session? So it remembers what was said before?

    • @NoCodeAcademy
      @NoCodeAcademy  ปีที่แล้ว +1

      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.

  • @bobluyinda
    @bobluyinda ปีที่แล้ว

    Thanks

  • @Molls-fm6un
    @Molls-fm6un ปีที่แล้ว

    I keep getting this error
    There was an issue setting up your call.
    Raw error for the API
    write EPROTO 140152576108416:error:14094438:SSL routines:ssl3_read_bytes:tlsv1 alert internal error:../deps/openssl/openssl/ssl/record/rec_layer_s3.c:1544:SSL alert number 80
    any thoughts on why?

  • @matteobarberis-p1i
    @matteobarberis-p1i ปีที่แล้ว

    It's cool. But why is it so freaking slow? Can it be used in production?

    • @NoCodeAcademy
      @NoCodeAcademy  ปีที่แล้ว

      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.

  • @nategell
    @nategell ปีที่แล้ว

    Man, thank you so much for this! Saved me a ton of time figuring it all out.

    • @NoCodeAcademy
      @NoCodeAcademy  ปีที่แล้ว

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

  • @Brosforlife7037
    @Brosforlife7037 8 หลายเดือนก่อน

    Could you help me with my app? It is pretty similar to yours.

    • @NoCodeAcademy
      @NoCodeAcademy  8 หลายเดือนก่อน

      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.

    • @NoCodeAcademy
      @NoCodeAcademy  8 หลายเดือนก่อน

      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

    • @Brosforlife7037
      @Brosforlife7037 5 หลายเดือนก่อน

      @@NoCodeAcademy Hello I am making an app and it requires chatgpt and it has a question and 3 answers so how would I code it on bubble so that when the question generates a question and 3 answer and when you click on the 3 answers it displays only one as correct,

    • @NoCodeAcademy
      @NoCodeAcademy  5 หลายเดือนก่อน

      @@Brosforlife7037 Hi thanks for your comment, you mentioned "when you click on the 3 answers it displays only one as correct" do you mean that when the correct answer is clicked out of the 3 possible ones to click, that upon clicking on it, it would reveal itself as the correct one?
      Is this what you mean? If so, then create a data type for every answer with two fields, one field for the text of the answer and one field of yes/no for if it is the correct answer. When someone clicks on the one out of three options that has a "yes" on it, then change the UI to reveal they guessed correctly.
      This is an assumption based on how something could work but the desired end result is unclear from what was stated in the comment, so a next step you might also take is to get clarity about your desired end result. Hope that helps.

  • @billwu2294
    @billwu2294 ปีที่แล้ว +2

    Minor thing but you kept saying ChatGTP instead of ChatGPT, distracted me a bit

    • @NoCodeAcademy
      @NoCodeAcademy  ปีที่แล้ว +2

      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.

  • @cjenkinsiv
    @cjenkinsiv ปีที่แล้ว +1

    THIS IS NOT FOR THE CHATGPT API

    • @NoCodeAcademy
      @NoCodeAcademy  ปีที่แล้ว

      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.

    • @cjenkinsiv
      @cjenkinsiv ปีที่แล้ว +2

      @@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.

    • @NoCodeAcademy
      @NoCodeAcademy  ปีที่แล้ว +2

      ​@@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.

    • @NyloC2
      @NyloC2 ปีที่แล้ว

      @@cjenkinsiv holy shit, are you on period

    • @sergioruiz-mier9163
      @sergioruiz-mier9163 ปีที่แล้ว

      Lord I love these On Doce Adacemy TouYubs

  • @realadco
    @realadco ปีที่แล้ว

    Chat GTP lol

  • @marc1013
    @marc1013 ปีที่แล้ว

    no seriously I'm like extremely beginner and I wouldn't mix chatGPT with (GDP ?) I'm french.... And content violation is because you are using trademark character. OMG, good thing that if you can make it, I also can obviously

    • @NoCodeAcademy
      @NoCodeAcademy  ปีที่แล้ว

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

  • @MrTibast75
    @MrTibast75 ปีที่แล้ว

    Chat-G-P-T, not G-T-P :)

    • @NoCodeAcademy
      @NoCodeAcademy  ปีที่แล้ว +1

      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

    • @MrTibast75
      @MrTibast75 ปีที่แล้ว

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

  • @sergioruiz-mier9163
    @sergioruiz-mier9163 ปีที่แล้ว +6

    GPT not GTP. Lost all credibility within seconds.

    • @NoCodeAcademy
      @NoCodeAcademy  ปีที่แล้ว +13

      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 🙂.

    • @srikarr7263
      @srikarr7263 ปีที่แล้ว +4

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

    • @phil.d6449
      @phil.d6449 ปีที่แล้ว

      🚩

    • @sergioruiz-mier9163
      @sergioruiz-mier9163 ปีที่แล้ว

      @@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?

    • @sergioruiz-mier9163
      @sergioruiz-mier9163 ปีที่แล้ว

      @@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.