GPT-4 Chatbot with Bubble - OpenAI chat and text generation | Bubble.io Tutorials | Planetnocode.com

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

[alanpontes]

I have followed this to the letter. Every time I change the call to a dynamic value <messages>, the API returns a 400 error message.

[MaritoSperanza]

Any video with Palm2 or Claude API? Thanks for this!!

[joseph]

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.“}

[MisCopilotos]

Amazing tutorial! Question: is it possible to create the same but to chat with a specific dataset (csv, text, pdf, etc) in bubble?

[maksimzinovev]

Thank you for the detailed tutorial. Worked for me!

[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!

[jd_turner_ai]

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.

[ShanWan-ci]

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.

[jmz]

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

[tanmaysharma]

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?

[luminrabbit]

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!

[magnomaciel]

Great tutorial! Many thanks!
Besides the message, role and temperature, what other parameters I can dynamically input?

[nickstm]

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?

[andriykumanovskyy]

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?

[jvanh]

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!

[clubhub]

Thank you so much! Why did you sort by date created descending? Wouldn't we want to newest submission at the bottom?

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

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

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

[kieranblair]

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?