Build a ChatGPT clone in 30 mins with Bubble.io

Building a ChatGPT Clone with Bubble.io

You can build a ChatGPT clone in just 30 minutes using Bubble.io, which is a fantastic no-code web application building platform. If you're new to this channel, my name is Matt, I'm a no-code educator and a Bubble coach, and we're going to be building together an app just like this, which, yes, the design is a little bit rough, but I built it very quickly. All of the essentials for how to build an app like this are included in this video.

Demonstrating the ChatGPT Clone

Let me give you a quick demonstration. So I'm going to click on new conversation and let's ask it, what is the capital of France? And I send off my prompt, my message to OpenAI. The OpenAI API is asking for a response, Bubble is waiting, and we'll see a response pop up just below there. The capital of France is Paris. And just like on the ChatGPT web interface, I've got all my previous conversations here.

Setting Up Your Bubble.io Account

First of all, you need to head over to Bubble.io and to create an account. Everything that I'm showing you in this video can be created using a free account. It's going to cost you absolutely nothing. Apart from the OpenAI API, you might need to put some card details in for that. So click get started, sign up for your account, create a new Bubble app, and we're going to pick up in a moment from that blank page.

Starting with a Blank Bubble App

I'm starting here with a blank Bubble app. I've skipped all of the application onboarding. I've just arrived at this blank page and here is where our journey starts to building a chatgpt clone without using any code.

Connecting to the OpenAI API

I'm going to begin by going into plugins because before I design any UI, I'm going to make sure that I have a connection through to the OpenAI API and that's how we send requests to their service and we receive data back. To do that, I'm going to go onto plugins, install plugins and add new plugins, and I'm going to add the API connector.

Setting Up the API Call

I'm going to start by looking at the reference here, which is we have this endpoint and I'm going to copy and add in a call and it's post. I'm going to paste the endpoint in there. I'm going to change this to action. This is all going to be explained in this tutorial. I'm going to show you everything that's required, but an action means that it's going to form part of a workflow, meaning that when a user clicks a button, we perform this action and we get data back from it.

Building the User Interface

So in my Bubble app here, in the design tab, I'm going to change this to column. Check out some of our other videos if you're unsure about the difference between fixed row and column. We go into detail there, but it's just easier to get a more reliable design if you use rows and columns.

Creating the Chat Interface

I'm then going to set up a repeating group. And a repeating group is a way of showing a list of data because what we're going to end up with in building our ChatGPT clone is a list of messages. So I'll start by centering this, giving it a bit of padding from the top, and we need to connect it to a data type.

Setting Up Workflows

Now we need to work on workflows so that we can set actions in motion in order to send a request to the OpenAI API and to get a response back. So to begin with, we'll say when this button is clicked, we will plugins, OpenAI send message.

Adding Historical Context

One of the beautiful things about and the amazing pieces of technology that ChatGPT provides is that it is aware of the historical context of the conversation. Now, what I've created here won't actually do that, and we can test it. We can say, for example, "tell me somewhere to visit there". So I'm using there because I think, well, it should know London. It should know that the conversation is about the UK and London.

Grouping Conversations

Now the last thing I'm going to show you is how to group them by conversation. And so we're going to have a left-hand sidebar similar to what you'll find in OpenAI. So I'm going to clear out the messages again, and we'll add in a data type called conversation. And we'll leave that blank for now.

Conclusion

There you have it. That is basically a start to finish tour of how you can create a chatgpt clone using Bubble, how you can do it in 30 minutes, and you can basically end up with a setup like this. Now, do check out our other videos. Subscribe to our channel. We release new videos on Bubble. We love Bubble. We believe that you can make incredible web apps with Bubble. You can start businesses with Bubble.

If you need any one-to-one help, you can head to our website planetnocode.com. You can sign up for a coaching session with me, and I will help you one-to-one troubleshoot, discuss, build your app. If you want access to even more videos than you can find on our YouTube channel, you can head to our website where we have some member-only videos. You can find out all about our membership there. If you have any requests for video topics, you can do so by leaving a comment or by getting in contact with us through our website.