GPT-4 Chatbot with Bubble - OpenAI chat and text generation | Bubble.io Tutorials | Planetnocode.com
Рет қаралды 14,136
Watch all our Bubble tutorials at www.planetnocode.com/tutorials
In this Bubble tutorial video, you will learn how to create a no-code AI chatbot powered by OpenAI using GPT-4 in Bubble. We start with a blank slate and cover every step you need to take to build it. We learn how to use the Bubble API connector to authenticate with a private key in the header, how to use the OpenAI API to send messages and get responses back, how to display the messages in a repeating group, and how to make the conversation history aware of the conversation. At the end, we have a fully functioning AI chatbot that is capable of intelligent conversation.
Video Chapters:
00:00:05 - Creating a No-Code AI Chatbot
00:00:22 - Setting Up the Blank Slate
00:00:47 - Adding a Button
00:01:17 - Using the OpenAI API
00:02:11 - Authenticating with a Private Key
00:02:42 - Constructing the API Call
00:03:11 - Choosing a Model
00:04:26 - Testing the Bot
00:04:47 - Connecting the API to the UI
00:05:31 - Making the Conversation History Aware
00:06:07 - Creating a Message
00:07:09 - Displaying the Message
00:08:47 - Testing the Conversation
00:09:27 - Debugging the API
00:10:46 - Building the JSON Syntax
00:11:25 - Creating a New Message
00:13:02 - Making the JSON Safe
00:14:28 - Sending the Messages
00:15:50 - Testing the Bot Again
00:16:42 - Creating the JSON Expression
00:17:27 - Testing the Conversation History
00:18:27 - OpenAI Returns a Response
00:19:03 - Conclusion
For more tutorials, 1 to 1 coaching, and more, visit Planet No Code: www.planetnocode.com/bubble-coaching/
@alanpontes2855 Жыл бұрын
I have followed this to the letter. Every time I change the call to a dynamic value , the API returns a 400 error message.
@maksimzinovev4325 9 ай бұрын
Thank you for the detailed tutorial. Worked for me!
@the-leap. Жыл бұрын
Amazing! thank you!
@ryanstead3148 11 ай бұрын
Thank you heaps!!! :)
@james_gets_it Жыл бұрын
This is great! Would love to see if you could build one of these with Pinecone (with OpenAI Embeddings) which would allow developers to use their own information to build their own informational chatbot - all for A LOT less $$ than using the regular GPT 3.5 completions.
@iSeeChrisD Жыл бұрын
Agreed! Did you end up finding a way to do this?
@signkit7636 Жыл бұрын
Also interested on this 🙏🏼💪🏼
@DavidMartinez-pq8ib Жыл бұрын
@@signkit7636 I found this: kzfaq.info/get/bejne/ac-Elspn0r61cqc.html. Maybe it helps for OpenAI embeddings + Bubble: Chat with a dataset.
@signkit7636 Жыл бұрын
@@DavidMartinez-pq8ib Thanks bro, will take a look at it but it seem promising
@joseph1581 Жыл бұрын
Awesome instructions for a newbie like myself. I was able to get everything working. However, one thing that I would like to do is use the role for "system". Where in the workflow would I add the following: {“role”: “system”, “content”: “You are a car repair expert. Answer the following question accordingly.“}
@joseph1581 Жыл бұрын
I figured it out. Added to the JSON of the first create a message in the workflow
@planetnocode Жыл бұрын
That's what we'd suggest.
@jm3279z3 Жыл бұрын
What a fantastic tutorial! I’d love to see how to do the same but add a pdf upload or many uploads that are ingested and then questions answered based on the results. Additionally so by adding some form of parameters to view the information through. Let’s say an arbitrary use case of employee unfair dismissal. 1. Upload various employee/employer documents as source 2. Upload state or national laws. Legislation, regulations, and website data (even better via the open api in beta pulling live goggle data) 3. Provide context of the problem or the disagreement 4. Set the token parameters 5. Set the assistant to legal Output legal perspective based on the data provided
@planetnocode Жыл бұрын
Right now the OpenAI API demonstrated only takes plain text as an input. You'll need to find a way to extract plain text from a PDF first.
@JoaquinTorroba10 Жыл бұрын
@@planetnocode Please show us how to it at least with plain-text 💪🏼🙏🏼. Thanks!!!
@user-wz9ny2yd9f Жыл бұрын
Any video with Palm2 or Claude API? Thanks for this!!
@planetnocode Жыл бұрын
We have a video on Claude! kzfaq.info/get/bejne/qKuSdsWUr964nXk.html
@JoaquinTorroba Жыл бұрын
Amazing tutorial! Question: is it possible to create the same but to chat with a specific dataset (csv, text, pdf, etc) in bubble?
@JoaquinTorroba10 Жыл бұрын
☝🏼🙏🏼
@planetnocode Жыл бұрын
The OpenAI Chat API will only accept plain text. However, in our experience copying text from a document or spreadsheet into the OpenAI Playground and using the first message to explain "this is a CSV file" or "this text copied from a poster" may still give good results.
@planetnocode Жыл бұрын
We've given an answer to the top level comment.
@madfutx Жыл бұрын
Incredible Turtorial! Quick question, how would you go about deleting the data when the page is refreshed? (making the text dissapear from the boxes) Thank you!
@planetnocode Жыл бұрын
Add an On page loaded workflow, Delete a list of things, Search for all your messages.
@clubhub3608 Жыл бұрын
Thank you so much! Why did you sort by date created descending? Wouldn't we want to newest submission at the bottom?
@planetnocode Жыл бұрын
Great point, this was simply so didn't have to scroll down during the demo.
@nicks7tm Жыл бұрын
Nice video. What about for keeping track of token usage so that you don't exceed the max tokens for the model? Earlier messages will need to be removed after hitting a certain token threshold. I know that token usage data is returned in the API response, so maybe there's a relatively easy way to dynamically control that?
@planetnocode Жыл бұрын
Yes you can save the token usage when it is returned as a number in the API response. Once a certain threshold is hit you could start to limit the number of historical messages sent, sending only the most recent for example.
@tanmaysharma6610 Жыл бұрын
Will it be taking extra tokens to use the chat functionality, as we are sending the previous conversations back to the api? So, this will just keep on piling up along the with previous responses?
@planetnocode Жыл бұрын
Yes, currently this is the only way for the API to run conversations that are aware of previous content.
@magnomaciel7309 Жыл бұрын
Great tutorial! Many thanks! Besides the message, role and temperature, what other parameters I can dynamically input?
@planetnocode Жыл бұрын
You can make any of message content dynamic using triangle brackets in the Bubble API Connector. Is that would you mean?
@user-uo9ty8jt7c Жыл бұрын
like, everytime the video gets to the part where you add the functionality for the chat to remember its chat history, something goes wrong on my end. Its very frustrating
@aiturbine Жыл бұрын
Great video, thank you! Is there a way to point the ChatGPT API at a specific knowledge base? For example, I want to ask questions on a certain topic and have the answers sourced from a specific knowledge base. Ie. I only want ChatGPT to search the specific articles/documents I give it, I don't want it to search beyond that.
@planetnocode Жыл бұрын
You should check out Fine Tuning platform.openai.com/docs/guides/fine-tuning
@The_Unlearner Жыл бұрын
Great content. How would you add a paid membership portal, where you can control data usage of members as well as store answer/question history of each member while still using your own API? Have you already made a video that covers this concept?
@planetnocode Жыл бұрын
We've covered how to track user actions in an app and how to allocate an allowance here: www.planetnocode.com/tutorial/plugins/openai/limiting-actions-chatgpt-openai/ We have videos on how to create registration flows here: www.planetnocode.com/bubble/sign-the-user-up/
@luminrabbit9488 9 ай бұрын
Great Video! How would you handle long responses so timing out is not an issue? would you use backend workflows kind of like a web hook? Is there any chance you could do a video on this so that when a response is ready bubble can get it without timing out. Keep up the great work Im a fan for sure!
@planetnocode 8 ай бұрын
The OpenAI API doesn't support webhooks so sadly this isn't an option. One work around we've seen demoed is to use an automation service like Make.com or Zapier as the 'bot in the middle'. Send your request to a workflow in either of these services, they make the OpenAI request and do the waiting, then (yes) you can send the results to a Bubble Backend Workflow.
@luminrabbit9488 8 ай бұрын
@@planetnocode ahh.. I got and seriously appreciate the response (I seen someone do it for replicate and initially thought it was the same, although I’m not the sharpest knife in the drawer). I love the content you put out it really does help a lot! keep up the great work we appreciate you!
@user-he3ud1vb5t 5 ай бұрын
so this video was great but I would be grateful if you could show how to add a login system so when people use this all the messages for everyone want show to everyone who visits the site only to the user who sent those messages.
@shanthemanent5200 5 ай бұрын
I would like something like this as well
@guillaume6761 Жыл бұрын
Thanks a lot for this! I have GPT4 Beta Access to API and when I connect via your process, and ask it what version it is, it tells me it is Verion 3.5 Turbo. While I do set up the API version to GPT4 and initialize it accordingly. Do you have the same? Is it not aware of its own version?
@planetnocode Жыл бұрын
As long as your model parameter is gpt-4 I would be confident you are using GPT-4. You could check your billing/usage logs in the OpenAI account to see if you are being billed the high rate for GPT-4 compared to GPT-3.5-turbo.
@guillaume6761 Жыл бұрын
@@planetnocode thanks and I think it is correct then! What's weird is that the API GPT 4 does not seem to be aware it is 4. While ChatGPT V4 is aware it is V4. That probably means the API and ChatGPT version 4 are not the same.
@Eblan85 Жыл бұрын
i keep gerrting error HTTP 400 at the end, didn't work for me. No issues with the first part but I spent quite a while trying to figure the error and I couldn't
@planetnocode Жыл бұрын
Hi @Eblan85 we provide 1 to 1 support for Bubble app builders over Zoom to help solve issues just like this. Find our more at www.planetnocode.com/bubble-coaching/
@andriykumanovskyy5975 9 ай бұрын
Great video! Is there a way to use (within the Bubble GPT4 API) some of those parameters one would find in playground such as temperature, repeat penalty, etc.? And if so, what's the best way to code this in?
@planetnocode 9 ай бұрын
Yes 💯 percent. You can add the extra parameters listed in the OpenAI documentation here (platform.openai.com/docs/api-reference/chat/create) to the JSON at the same level as your "model" parameter. Just watch our for JSON syntax errors. You can always use an online JSON syntax checker.
@andriykumanovskyy5975 Ай бұрын
@@planetnocode Thank you. Also, what is the best way to prevent the data from logging and showing up to all? Is there a quick setting that can just turn off it off, perhaps in "app data's database privacy" or "modifying an existing database view"
@LeonPetrou Жыл бұрын
Is it possible in Bubble to enable streaming of each character in the response (so it looks like the response is being typed out)? I tried adding API parameter "stream": true ... But it doesn't work.
@planetnocode Жыл бұрын
Sadly no, the Bubble API Connector does not have the ability to stream incoming content. However, we've have seen a plugin discussed that claims to enable streaming. We have not tested it ourselves but you can read more here: forum.bubble.io/t/updated-plugin-chatgpt-with-real-time-streaming-no-more-timeouts/257039
@planetnocode Жыл бұрын
If you're not subscribed already, you might like to subscribe as we have a video demoing the ChatGPT real time streaming plugin being released soon.
@LeonPetrou Жыл бұрын
@@planetnocode Subscribed. Looking forward to it, thanks!
@planetnocode Жыл бұрын
Here's our video showing ChatGPT / OpenAI live streaming of text. kzfaq.info/get/bejne/nJmSibCDppvYYI0.html We would suggest double checking with plugin developer about whether text goes via their own server to provide the live stream. Might be a privacy issue depending on your app.
@LeonPetrou Жыл бұрын
@@planetnocode So excited to watch it, thank you!
@kieranblair7524 Жыл бұрын
Hey everyone, this is a great tutorial, after about 5 big messages though mine seems to tap out. It says there is a json issue (there isn’t) and I’m thinking I’ve got too many characters. Anyone has this issue/know a fix?
@planetnocode Жыл бұрын
This is a known issue with Bubble that they've strongly indicated will be fixed soon. It occurs because Bubble's API connector will timeout at around 50 seconds but GPT-4 takes much longer to generate responses. We suggest either waiting for Bubble to add a feature that allows you to extend / manually set the timeout period. Or use a service like Make.com to sit in the middle of the API request.
@luminrabbit9488 9 ай бұрын
would back end workflows work as a web hook? I definitely wouldn't wait for bubble for a solution@@planetnocode
@jvanh8926 Жыл бұрын
Awesome video! Question though: Is it possible to get live generation? Its kinda odd to wait for the whole answer instead of see live generation as we are used to in ChatGPT. Thanks in advance!
@planetnocode Жыл бұрын
The OpenAI streaming protocol is currently not available within the Bubble API connector. You may find a plugin or third party service that sites in the middle is required. Another work around would be to wait for the full text to be returned to Bubble then use a typewriter style text animation plugin to give the look of streamed text.
@yoshieeee Жыл бұрын
@@planetnocode really appreciate youre answering. And thanks for the suggestion 👍
@jvanh8926 Жыл бұрын
@@planetnocode Thats a pity, thank you for your answer though!
@user-ti6bw6wo8k Жыл бұрын
@@planetnocode Keep us posted if this changes 🙏🏼
@jvanh8926 Жыл бұрын
@@user-ti6bw6wo8k Its possible now, saw a post on the forum this week!
@strachanwilson6550 11 ай бұрын
Lost me at 13:40, with the Step 2: Open AI - Send Message. When I click on that step, all I see is the bottom half of your view ("Only when: click"), I don't see "(body) messages". Could you please let me know what I did wrong? I was really liking your video until I got stuck and would like to continue!
@planetnocode 11 ай бұрын
In the API Connector is your messages field set to private? Dynamic fields need to NOT be private to insert data into them in a workflow.
@mardii-mar6134 Ай бұрын
@@planetnocode Thank you
@azdarosa8354 Жыл бұрын
What could be the reason I am not seeing the 'Join With' operator?
@planetnocode Жыл бұрын
Possibly the final part at the end of your expression isn't a list of text.
@saadahmadch9183 Жыл бұрын
I don’t know why but I keep getting error after a join with , ;No idea what I am doing wrong
@planetnocode Жыл бұрын
This may be a very quick fix. Please can you start a new live chat on our website (www.planetnocode.com) and attach some screenshots? Our team can take a look.
@waldooosthuizen4433 Жыл бұрын
I am also getting stuck here
@icashelper4038 Жыл бұрын
This is because @planetnocode has the area 'body' to type into which anyone facing this issue doesn't and is rather typing into the 'only when' field. I'm facing this issue too and yet to find a fix haha but will post here once I do
@icashelper4038 Жыл бұрын
Ok so I've noticed that when the body in the openai plugin page is changed from to just the input area '(body) messages' disappears for the step 'Open AI - send message'. Meaning when you have in your API and you reinitialise and it doesn't work, the rest can't be done and your app won't work
@aalh975 Жыл бұрын
@@icashelper4038 Hi, I am facing the same issue. Have you found any fix yet?
@user-uo9ty8jt7c Жыл бұрын
Oh man. This is very buggy. I wish things were explained more clearly. I have attempted to follow this tutorial like 5 times and came out with different results every time. The string where you have to put that the strings are joined together by a comma, worked twice and never works when i have everything else working the OpenAI- Send Message part of the workflow gives me an error and sasy tha only "yes/no" should be displayed there and not text. If i get the chat function going, i can never get it to remember the conversation and the only reason i was able to make more sense of putting the UI together where it looks liek a chat between two people and not just a random string of texts is because of the newer video you put out a week ago. This is really hobbyist level coding
@annakannak 4 ай бұрын
dude i tried it actually it worked but now its not responding / not giving answer
@planetnocode 4 ай бұрын
Do you get an error message?
@annakannak 4 ай бұрын
@@planetnocode no
@user-uo9ty8jt7c Жыл бұрын
my cycle s been > gets the chatbot functioning > tries to make it remember chat history to carry on a fluent conversation > does something wrong > chatbot doesn't work at all > gets chat function working again > fails at getting it recall chat history and messes it all up again > repeat cycle. Literally 3 hours into this cycle today. Please help someone!
@planetnocode Жыл бұрын
What sort of errors are you getting? Most likely a JSON syntax error. You can reach out to a Bubble coach through our website to arrange 1 to 1 help: www.planetnocode.com/bubble-coaching/
@user-uo9ty8jt7c Жыл бұрын
@@planetnocode That's exactly it. I've followed this tutorial and another very similar one to a tee and something im sending in the dynamic string of the "OpenAI- Send Message" step of the workflow is not working
@user-uo9ty8jt7c Жыл бұрын
@@planetnocode i ended up using "search for messages, each item's content, join with "',"" and it worked! I'm having a fluent conversation in an app thats not looking too shabby for my first try at building an app
@10points56 Жыл бұрын
Your videos are so powerful brother. I have just one questions How do I implement this (kzfaq.info/get/bejne/bdp-oJOqzqrNl4k.html) in bubble. If you have solution then one video will be very helpful
AnythingAlexia
Рет қаралды 25 МЛН
AnythingAlexia
Рет қаралды 25 МЛН