Connect ChatGPT's API to Bubble w/ Example - Bubble.io Tutorial
Вставка
- Опубліковано 29 чер 2024
- 🏆📚 FREE 7 DAY LEARN BUBBLE CHALLENGE 📚🏆 www.nocodeacademy.co/offers/r...
Learn how to setup ChatGPT's API in Bubble. This tutorial shows the step-by-step process for how you can power your Bubble.io app with Chat GPT's API by connecting the two tools by sending a prompt over and getting a response back.
API endpoint - api.openai.com/v1/completions
0:00 Intro
0:30 OpenAI account registration
1:05 Playground area
1:20 Play with prompts, length
3:10 ChatGPT API call in Bubble.io
7:25 UI setup
9:10 API workflows to call ChatGPT
11:00 Preview results
===========================
Limited Time One-on-One Consulting -
calendly.com/nocodeacademy/so...
===========================
✅ Subscribe to be notified when the more Bubble tutorial videos come out.
⏩ Follow along in a free Bubble.io account by signing up at bubble.io/?ref=io01awzc.
❓ Have questions? Want a consultation? Reach out at nocodeacademy.co.
➡️ Disclaimer - this page contains an affiliate link that gives a credit valid towards our monthly Bubble account fee but has no cash value beyond this. Should you decide a paid Bubble account is right for you, thank you in advance for your support.
Tags: openai's chatgpt setup in Bubble.io, how to connect chatgpt with bubble, open ai api connect bubble, openai api bubble.io, setup chat gpt in bubble.io
Thank you so much for the video! Please ignore those trolls and keep posting, your content is extremely helpful!!
Thanks Aymeric, that means a lot 👊
What an amazingly useful video! thanks!
Hey Raindrops thank you for the kind words!
Thank you for the video! Just built my first no-code app with that.
Hey Oleksandr, amazing. Best of luck on the app!
Great demo - thanks for the hard work and putting this content out into the world
You're very welcome
Amazing explanation.
Thanks for this
You're very welcome
awesome, thanks!
You're welcome
Thanks
great movie samples haha
what's chat GTP?
dont you worrie about that he does that all the time 🙈 but is good content anyway ✌😁 give him some slack mate
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?
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 ua-cam.com/video/_RTN8CWFUsc/v-deo.html or ua-cam.com/video/c07eWV6Pois/v-deo.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.
Excellent, do you have a tutorial about how to stream the response? Thanks for the content, super useful.
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.
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.
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?
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?
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.
wohoooo,this is amazing ..please am trying to do a prompt to re format a text in my app to separate speakers name ....
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
why can't I copy and paste the private key next to bearer on the value ? bug?
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?
Thanks, have been trying but it not working, did i need to pay before it works
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.
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
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.
How do I keep the session? So it remembers what was said before?
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.
Hello, my api keeps on giving me an error message - do I have to pay for it?
Hi, yes you need an account with an active credit card, but you do get some free credits to start.
Hey I need help With this step for bubble op
Hi, which specific step are you referring to?
It's cool. But why is it so freaking slow? Can it be used in production?
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.
Could you help me with my app? It is pretty similar to yours.
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
Minor thing but you kept saying ChatGTP instead of ChatGPT, distracted me a bit
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.
THIS IS NOT FOR THE CHATGPT API
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
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
Hi thanks for your comment. We are all inspirations to others in our own ways ;). Good luck.
Chat GTP lol
Chat-G-P-T, not G-T-P :)
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 ;)
GPT not GTP. Lost all credibility within seconds.
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.
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?
Man, thank you so much for this! Saved me a ton of time figuring it all out.
Hey Nathan, thanks for stopping through, glad it helped!