ChatGPT, OpenAI API & Web Search API Combined

Headshot of Matt the Planet No Code Bubble Coach

Need 1 to 1 help?

Your no-code consultant & Bubble tutor.

Learn how to combine the power of Bubble.io and the OpenAI API to create a ChatGPT client with web search capabilities using the Brave Search API.

Introduction

In this Bubble tutorial video, I'm going to demonstrate to you how you can combine the power of the OpenAI API, which is basically Chat GPT, with a web search API.

Why Web Search is Helpful

But before I do that, let me demonstrate why this might be helpful. So I've got. Let me refresh it here. I've got a very simple app.

How OpenAI Chat GPT Works

I'm going to go through the basics in a moment of how this works, which is basically like a Chat GPT client, so I can ask it a question. So such as what is the capital of France? And click send. And now this is sending that as a message to OpenAI and I get a reply back.

Limitations of OpenAI API

And this is where I think web search comes in, because there is still a gap between what you can do through the chat GBC web interface and what you can do with the OpenAI API. Now, they may well bridge that gap, but one of those things is the ability to check the web, and part of that is to do with the age of the training data in the AI model. So OpenAI's API, GPT 3.5 turbo, is it going to know what to do in Paris in February 2024?

Example of Using OpenAI API and Web Search API

So we can ask, we can say, what are the best activities or events in Paris in February 2024? I'm going to click send and we're going to get back a reply, and it's going to be a good attempt from OpenAI. But of course, okay, it gives some examples, but there's nothing really specific here.

Benefits of Using Search Results with AI

It's more kind of a generic generalization of what will go on in Paris in February rather than necessarily February 2024. So this is where it would be helpful to bring in search results and then feed that into the AI and then get a response to our user.

Learning Bubble at planetnocode.com

But before I dive into that, if you're learning bubble, there's no better place to do it than planetnoco.com, where we've got hundreds of bubble tutorial videos just like this one, ranging from Chat GPT clones all the way through to social media content generation tools to building a CRM. All of that can be found on our website, planetnocode.com.

Understanding OpenAI Chat GPT

But yeah, let me just dive into here, and first thing I'm going to do is delete all my previous messages so that we're starting from scratch. And then I'm going to give you a quick refresher of how I've got to this point with OpenAI. Now, we've got plenty of OpenAI Chat GPT clone videos already on the channel, so I'm not going to go into huge amount of detail, but effectively what we do is when we click send, we create a new message and we set the role as user and we set the message content as the content of our input field.

Sending Messages to OpenAI API

We then send a list of these messages in this order and format as text. And this is how we get the JSON expression for each message. We say this message roles display role in this case is an option set. So this would fill that field with user or assistant. And then we also say this message is content formatted as JSON safe. Check out our previous videos and what JSON safe does. But basically this works, this works really well.

API Call to OpenAI

Then we create a message based on the response from OpenAI and we reset the inputs. I'm going to dip into our OpenAI call here in case you want to follow along. So we've got OpenAI chat, we've got our API key and here's what our call looks like. So we're inserting a list of messages into the chat at this point.

Using the Brave Search API

So let me show you how we can add in the search API. So I'm going to be using Brave search API. I believe that Bing offers one. I think Google's is a little bit more difficult to use, but I like to support a business like Brave. Brave is basically built around a privacy focused browser, in case you don't know. But it gives us a really simple API.

Setting Up the Brave Search API

So here's our endpoint and then this is the data we need to send along and we put our search query here. This translated into bubble looks like this here is our API key in the header. We add the shared headers here except encoding Gzip. If you're unsure where I've got that from, it's because this is saying header accept encoding Gzip. I've not included application JSON because bubble includes that by default now. And we've got the also in the header, we've got our label for our API key and then our API key in there and so that filters down and becomes a get search action Json and then our search term in here.

Retrieving Search Results

And this is really cool. I can just click initialize and it's very quick. I get the search results back. So we can see, we get a list of web search results. So this is a list of websites and I may well do a future video on basically how we could scrape the content of the first few websites and feed that in.

Extracting Information from Search Results

That would make our Chat GPT even more wise and knowledgeable about immediate events going on. So we get back all of this data about websites and we also get things like faqs, like is Paris worth visiting in February? We even get back a list of products. So this one is the best of France tour, including a price. These are all things that you can feed into your chat conversation and I'm going to show you how to do just one of those.

Filtering Search Results

I think I am going to take the description field on the description field for each of the web results because that's going to give me basically a summary of the top ranking results for things to do in Paris in February 2024. So I'm going to click save on that and go back into my workflow.

Adding Custom Events

Now I'm going to try using a custom event here. In past custom events haven't worked that well with OpenAI, but let's see if they work well with the brave search API because effectively what I want to do is add in a conditional statement to say that if my message is the first message, then I want to look to the brave search API. If it is any other messages, then I want to engage with OpenAI.

Combining OpenAI API with Search Results

That just means that my first part of my conversation draws in the up to date data from the search API and then the rest of my conversation is that beautiful experience you get with the OpenAI API. So let's add in a custom event and this is going to be. So we go for our brave search search. The reason it's labeled like that is because I have the API name here, brave search and then search here and I'm going to put in my inputs value there. I then get back a list of results and so what do I want to do with.

# Returning Search Descriptions

Yeah, so this is going to be the search API. I'm going to make use of the new values system with custom events. So I will say list of search descriptions, I'm going to make this text and then I can now go return data and I'm going to go for the search. I think it's going to be web and then each item's description and that's just going to comma separate all of the descriptions from the web results so that data ends up back here.

Integrating OpenAI and Brave Search APIs

And I think then what I'm going to do is artificially create the user's first message because as soon as using the chat completion endpoint with OpenAI, as soon as I send a message as a user, it's going to generate an assistant reply. So I think, or could I hide it? Could I hide it? I'm just going to put it in here. You could approach this a number of different ways, but effectively I'm going to look at the repeating group and say list of messages.

Handling Custom Events

And if the count is zero then I'm going to run this one because rather than the input I'm going to say the do I need to return? I need to trigger the custom event and put that up here. And so I also am only going to run the search if there are no messages.

Building the User's First Message

And so then if there are no messages, my content is simply going to be basically a prompt. I'm going to say write a summary of these search results, search result descriptions, and then I'm going to insert in the results of step one descriptions. Okay. And it automatically fills it in. So that means that I am dictating what the first message is going to be for my user.

Continuing the Conversation

I then basically want to, I'm going to copy and paste this because I'm going to say that actually if the count is greater than or equal to two, this will determine whether this is follow up steps in the conversation. Remove this. It's just going to be my multi line input because I want to be able to engage in what's replied by OpenAI in combination with the search results.

Finalizing the Workflow

So this will be my multiline input. Okay, I think that's worth a try. Let's go into preview. So I'm going to say things to do in Paris in February 2024. And let's click send. So we're getting the search result data and if all this works that is then sent off to OpenAI.

Displaying Search Results and AI Response

So we have a situation here where we get back, this is what we get back from the search results and it's got all of this HTML content in it. That's fine, OpenAI can understand that. But then this is the response we get back from OpenAI.

Enhancing the User Experience

So I'm going to do one final thing in this video because we don't really want our user to know this looks a bit messy. So I'm going to add into my message data type simply field that says visible to user. Yes. No, we'll default it to yes.

Making Messages More Visually Appealing

So now let's have a little bit of a rework here. This one is going to be. Visible to user is no. And this one will be, in fact, we want this to run anyway.

Filtering Messages in the User Interface

Yeah, and we'll just say visible to user is yes. And then we go back into our design and we say only show messages where visible to user equals yes. So this should insert the user's original message at the top. And let's give that a go.

Sending and Receiving Combined Results

So, data, delete everything, clear it out, and let's try that again. Things to do in Paris in February 2024. Okay, so once more, we're waiting for the brave search API to respond into our bubble app, and it's going to send off all that data. There we go.

Evaluating the Results

Okay. Yeah, it's giving us a response. This is a bit of a flimsy. It's not a great example of how to use it. I'm sure you can think of something better. In fact, you can always leave a comment if you've got any suggestions.

Exploring Web Scraping for More Data

I think right now I'm going to record a follow up video and demonstrate how we can basically dig deeper into this by web scraping the first few search results and then including that data in our reply.