Creating a Chatbot experience using Bubble & ChatGPT API
In this Bubble tutorial we demonstrate how to use the ChatGPT API to create an AI chatbot like experience in your Bubble app. We dive right the deep end of the Bubble API Connector, we have getting started videos for the OpenAI API on our channel already. This video shows one way to approach the challenge of formating the message history correctly in JSON so that your chatbot is aware of the message history and respond accordingly.
Unlock ChatGPT's power: Learn to build a conversational AI app in Bubble without coding!
Master API integration: Create a ChatGPT clone with history-aware responses in just 30 minutes!
Elevate your Bubble skills: Discover how to format JSON correctly for seamless OpenAI integration in your no-code projects.
Introduction to ChatGPT API and Bubble Integration
ChatGPT have just released their API and here is a tour of my Bubble app which I've set up to make use of the conversational nature and abilities of ChatGPT. What I mean by that is the ability if we look at the documentation here that once you ask a question and you get an answer back you can ask a follow-up question and ChatGPT is aware of the previous points and previous text of the conversation that's come before your current prompt.
Understanding ChatGPT API Request Format
So we can see this is how ChatGPT want you to send your request and it's basically saying that every time you send the message you have to provide the full history of the conversation up until that point and this is we're jumping right into the deep end of the Bubble API connector here. Do check out our earlier videos to show more basic setups of what you'll need but this is taking about half an hour to get working and I'm going to show you how I've done it.
Setting Up the Bubble API Connector
So if I look go into the Bubble API connector I've got an OpenAI connection setup and this is my the body of my JSON object and I've part of the challenge of this is that we need to provide this format like roll with system or user assistant every time we send a request and we have to keep a history of it and we have to do that in a way of ensuring that our JSON syntax is correct that's not going to cause any errors.
Creating the User Interface
So I've simply set up that I can enter in my API called everything in the messages section I just have a value set up there. Let's have a look at my page. So I've got a multiline input, a button and a repeating group. I've created a content type called message and let's have a look what happens when you click the button.
Implementing the Workflow
So I create a new message and the message has got two fields for storing text. One is the plain text that says the user enters it into the multiline input and then I have a second field here which is my way of generating the necessary syntax and parameters to create a line just like this as detailed in the documentation. So you can see here that I've also got an option set called GPT roll and I've got the different rolls the user system and assistant.
Formatting the Message for API Request
I'm simply printing user in that space there and then goes in my multiline input that's what my user has entered and then so that I can display it in you have a bit of control over how I display in my repeating group. I'm also saving the what do they call it the roll there we go is it system is it user or is it the assistant I'm saving that as a option set field with my message.
Sending the API Request to OpenAI
I then send the API request to OpenAI and I do this by searching through messages and you might want to group these in conversations but I've just kept it simple for this demo and then I say each items JSON and so that is where I've generated this line here and then I say join with a comma and a space if we look at the JSON syntax here we can see that it needs to join every statement with a comma and a space.
Handling JSON Formatting
One of the errors I see people making all the time with JSON is that you want to put a comment in the after the final bit and now you don't you have a comma between every statement. So that's got the format right and that prints it and by doing a search for I get the history of all the messages sent previously.
Creating and Formatting the Reply
I then create a new message this is my reply so I've set the GPT roll as assistant I then have to go through the same process of formatting it so I say roll is assistant and the content is the response of the OpenAI choices first item message content and trimmed and I've added trimmed in there because sometimes the response you get back can have a space or a line break at the start of it that just clears out anything that isn't text from the start and finish of the text that's returned. I then also do the same thing I store this as plain text.
Resetting Inputs and Testing the App
Lastly I reset my inputs ready to take another input into the app. So let's check it let's see if this is history aware conversational AI so I can ask it how tall is the shard in London and I get a factual statement back from the assistant and then let's say is it the tallest building in London so I'm saying is it because I'm checking to see whether my response sorry whether my API request to OpenAI is aware of the previous history of the conversation that I'm talking about the shard.
Verifying Conversation History Awareness
Let's see if this works yes the shard is currently the tallest building in London. So there we go we've got it working.
Displaying Messages in the Repeating Group
The last bit I'm going to show in case anyone feels that I've missed anything is I've got my repeating group of search for messages and all I'm doing is printing the current cell's message GPT role so that's showing the user or the assistant and then I'm printing the plain message beneath it.
Conclusion
So there you have it that is one way that I've been thinking of over the last 48 hours of how to format the JSON correctly so that you have that conversational that history aware approach and methodology for using the OpenAI ChatGPT API.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.