ChatGPT, OpenAI API & Web Search API Combined

Combining ChatGPT and Web Search in Bubble

In this Bubble tutorial video, I'm going to demonstrate how you can combine the power of the OpenAI API (which is basically ChatGPT) with a web search API. But before I do that, let me demonstrate why this might be helpful.

Demonstrating the Need for Web Search Integration

I've got a very simple app which is basically like a ChatGPT client. I can ask it a question such as "What is the capital of France?" and it sends that as a message to OpenAI and I get a reply back. This is where I think web search comes in because there is still a gap between what you can do through the ChatGPT web interface and what you can do with the OpenAI API.

Limitations of OpenAI's API

They may well bridge that gap, but one of those things is the ability to check the web. Part of that is due to the age of the training data in the AI model. OpenAI's API GPT-3.5 turbo might not know what to do in Paris in February 2024.

Testing the API's Knowledge

We can ask, "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. It's going to be a good attempt from OpenAI, but of course, it gives some examples, but there's nothing really specific here. It's more of a generic generalization of what will go on in Paris in February rather than necessarily February 2024.

The Value of Web Search Integration

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

Introducing Planet No Code

But before I dive into that, if you're learning Bubble, there's no better place to do it than planet no code.com where we've got hundreds of Bubble tutorial videos just like this one, ranging from ChatGPT plans all the way through to social media content generation tools to building a CRM.

Setting Up the OpenAI Integration

First, I'm going to delete all my previous messages so that we start from scratch. Then I'm going to give you a quick refresher of how I've got to this point with OpenAI. We've got plenty of OpenAI ChatGPT code videos already on the channel, so I'm not going to go into huge detail.

Creating Messages in Bubble

Effectively, 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 fields. We then send a list of these messages in this order. Our format is text and this is how we get the JSON expression for each message.

Formatting Messages for OpenAI

We say this message role's display role (in this case is an option set) so this would fill that field with user or system. Then we also say this message's content formatted as JSON safe. Check out our previous videos on what JSON safe does, but basically, this works really well.

Handling OpenAI Responses

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. We're inserting a list of messages into the chat at this point.

Introducing the Brave Search API

Let me show you how we can add in the search API. 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 you know, I like to support a business like Brave. They do it, but it's 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 in Bubble

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 API key in the header. We add the shared headers here, accept encoding G zip. If you're unsure where I've got that from, it's because this is saying header Accept encoding G zip. I've not included Application JSON because Bubble includes that by default now.

Configuring the API Call

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.

Testing the Brave Search API

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. 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. That would make our ChatGPT even more wise and knowledgeable about immediate events going on.

Analyzing the Search Results

We get back all of this data about websites and we also get things like FAQs. We even get back a list of products. 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.

Selecting Data from Search Results

I think I am going to take 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.

Implementing Custom Events in Bubble

I'm gonna try using a custom event. In the past, custom events haven't worked that well with OpenAI but let's see if they work well with the Brave search API.

Conditional Logic for API Calls

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

Setting Up the Custom Event

Let's add in a custom event. This is going to be our Brave search. The reason it's labeled like that is because I have the API name here Brave search and then search here. I'm gonna put in my input's value there.

Handling Search Results

I then get back a list of results. I'm gonna make use of the new Value system with custom events. So I will say List of search descriptions. I'm gonna make this text and then I can now go return data and I'm gonna go for the search. I think it's gonna be web and then each item's description and that's just going to comma separate all of the descriptions from the web results.

Creating the Initial Message

So that data ends up back here and I think then what I'm gonna 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 the message as a user, it's going to generate an assistant reply.

Conditional Logic for Message Creation

I'm only going to run the search if there are no messages. So then if there are no messages my content is simply going to be a prompt. I'm gonna say "Write a summary of these search results descriptions" and then I'm going to insert the results of step one descriptions again.

Handling Follow-up Messages

If the count is greater than or equal to two, this will determine whether these are follow-up steps in the conversation. 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.

Testing the Implementation

Let's try that. I'm gonna 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.

Refining the User Interface

We have a situation here where we get back 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. I'm gonna do one final thing in this video because we don't really want our user to see this. It looks a bit messy.

Adding Visibility Controls

So I'm gonna add in to my message data type a simple field that says visible to user: Yes/No. We'll default it to yes.

Configuring Message Visibility

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 visible to user is yes. Then we go back into our design and we say only show messages where visible to user equals Yes.

Final Test and Conclusion

This should insert the user's original message at the top. Let's give that a go. So once more waiting for the Brave search API to respond into our Bubble app and it's gonna send off all that data. Okay, yeah, it's giving us a response. This is a bit of a flimsy example, you know, 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.

Future Improvements

I think right now I'm gonna 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.