Build Your Own Chatbot in Minutes using VectorShift & Bubble.io

Introduction to VectorShift and Knowledge Base Setup

Have you ever wanted to create a chatbot that engages with your own knowledge base, just like this one? So I'm asking a question and it's going to search knowledge base of Planet No Code data and even provide a link where users can go and find out more details about the source that has informed the data that's being shown in the answer, or integrate such a query directly into something you've designed in your Bubble app. Well, whether you want to just embed a chatbot or you want to add knowledge base querying to your Bubble app, I'm going to show you how to do both of those in this VectorShift demo. Remember, the platform I'm using is VectorShift and there is a link down in the description. I think that this is the best way to query a knowledge base in Bubble and knowledge base that in fact you can build with URLs, PDFs, CSVs, you name it, as your host of other integrations to inform the knowledge base, which the AI uses to inform its responses.

Setting Up the Knowledge Base

So let's get started. Before we set up our pipeline, the first thing we need to set up is our knowledge base or our data source. And VectorShift gives us a real good range, in fact, incredible range of data sources. So here's my setup earlier, but in fact, if I go in here and I click edit, I can show you the other sources. So I've just said basically do a recursive web scrape of the Planet No Code website, but I could add in files that I upload. I can connect to integrations such as Airtable or Google Calendar or even Notion and I, just as I've done here already, here's what I did earlier, I've said URL recursive, that just means that it will go through and scrape any sub pages it finds and I've added the Planet No Code website into that. And then we can even go and click on preview and this gives us an idea of chunking and chunking is kind of the AI process or at least preparing the data for the AI where it begins to break it down into manageable content. So cool, there we go.

Creating a Pipeline

Right, now let's move on and create our pipeline. So pipelines are the vector flow equivalent of workflows and here's some I've already been experimenting with, but let's go ahead and try a completely new one. So I'm going to go new and then they've got all of these presets and this is honestly the easiest way, or templates rather, this is the easiest way to dive right in. So we're going to say search a knowledge base template. I'm going to use that one. And cool, there we go. It's basically built out everything for us. It's got annotations. So I just need to select the knowledge base and I'm going to select the Planet No Code tutorials knowledge base. That's what I just did a moment ago.

Configuring the AI Prompt

And then I'm going to put into here, "you are helpful assistant answering questions based on context" and then I'll say reply with a JSON response and I'll say that this needs to be... and I'm doing this because I want to really show off the power of what you can do with vector flow. I want to get a response of both texts and I want to get a URL because maybe we'll actually launch this, but I can allow a user to ask a question. It queries all of the hundreds of Bulb tutorial videos that we've ever recorded and it replies an answer and it replies with a link to the video that would be most helpful in answering their questions. So I'm going to put an answer and then say right answer here. And there's no... apart from maintaining JSON syntax, there's nothing special about what I'm doing here. I basically just need to communicate to the AI, whether you're using vector flow or you're just using the OpenAI or the Anthropic API, you just need to speak to it as if it's human and lay down the ground rules of what you expect. So then I'm also going to say source and say source URL.

Testing the Pipeline

Part of making the prompt good is to make it consistent. Cool. Let's just tidy up a bit. Brilliant. So let's just break down what we've got here. We're saying take a single input, which is user question, and then it goes off into two branches. We query the knowledge base and that gets inserted in as basically this merge field, merge tag down here into context. And then we insert the user question into here. So what the knowledge base node on the pipeline is doing is responding with the right chunks, or at least what it thinks is the right chunks, based on our question. And then we move all the way along to an output. And I'm going to change this to JSON and then we're just going to test it, see how quick this is. So I'm going to say, "What are option sets?" And then what I need to do is click run.

Analyzing the Results

So we can see each step that it takes and then we can see our output written and we get an answer about option sets and we get the source. Now I can see that the source is not the specific page that I actually want option sets. I want it to recommend an option set tutorial. So I'll say, "respond with a clear but brief answer to the question and the URL of the website that most clearly answers the question." Cool, let's try this. I'm just going to click run again. Okay, look, there we go. So we get a URL in source. I'm going to copy this. Sometimes AI can hallucinate and make up a URL, in which case you would go back to your prompt, maybe just the temperature. But I'm fairly confident that this is... Here we go. This is our page where we show off all of our option set videos.

Potential Applications

So isn't that amazing? And you could think about this as all sorts of business applications. This is something that you can provide to your clients in your SaaS apps. You can have data in your Bubble app and you can use the VectorShift API to update knowledge bases on behalf of your clients. And then your clients can have chatbots, chat widgets, API integrations that enable them to query that data. Let's go back a step. So we have that working and I'm just going to say deploy changes.

Integrating with Bubble

Right, next thing we're going to do is how do we add this in to our Bubble app? Well, let me show you. If I go back to pipelines and then judging by the date, I think it was this one. I should rename things, but I'm just going to right click on it and I'm going to say generate API call. Okay, and now we've got a very familiar format if you've ever worked with the Bubble API connector. So let's go over into our Bubble app. I've got a blank page here and we will add in a multi-line input. Now I'm not focusing on design, I'm using fixed layout. If you're serious about building things in Bubble, you should get scripts with rows and columns, but I'm going to make this nice and quick.

Setting Up the Bubble Interface

So I'll say ask question. I'll say write your question here. And then I'm going to add in another text label down here. And I'll make this bold. And I'm going to add in another button. No, in fact, not a button. I'm going to add in a link. And I'll say read more and make this external. Right. We now need to create that bridge between the Bubble app and VectorShift. So we go into plugins and we go to the API connector. If you don't see it, head over to the add plugin, search your Bubble API connector. It's the most popular plugin made by Bubble, published by Bubble, available on the Bubble plugin directory by far.

Configuring the API Connector

So scroll down here and add in a new API. Now ignore all these, these are from previous demos, but we've just got a new API here and I'll say VectorShift. Now, if we go back, we can see what we need to plug in where. So we've got a post API request and an endpoint. So I'm going to copy this and we'll say query knowledge base. So it needs to be post. That's the end point. It needs to be an action because I want this to be a action within a workflow. We're going to come onto that in just a few moments. And then what do I need next? I need to go back here and copy this into the body. And lastly, we need to add in the API key. And we can see where we need to do that by going into the header section of the API call, labeling an API key.

Securing the API Key

So we want this to be private. We don't want to share API keys ever with our users. So we need to mark as a private key in header. I'm going to go ahead and paste my API key in there. And of course, remove it before I publish this video. And then lastly, let's initialize the call. And this is our way of teaching Bubble what to expect in response. And if this works well, what we should expect in response is some nice structured JSON, two parameters, the answer and the source. But we just need to put in some sensible dummy data here. So we'll say what are options sets? And then let's initialize our call.

Testing the API Connection

Cool, there we go. We get back our lovely, beautifully structured data, our explanation of option sets. And then once more, I'm glad this is reliably working. Like I say, AIs can have hallucinations. We get back the URL that we would want to say, "Hey, hey, hey, visitor, here's where to read more." Now, there was one minor mistake that maybe I made when I copied and pasted the JSON across, which is that there was a comma at the end of this line four. In order to maintain proper JSON syntax, you only have commas separating keys and values. So make sure you've not got a final comma there. But basically, that is now working. Let's dive back into the design tab and finish off this demo.

Creating the Workflow

Okay, let's connect all of this up to a workflow. So I'll click on the button and I'll say add workflow. So what do we want to happen? Well, we want to use one of the plugins. And that's basically the plugin we've just set up through the API connector. Now I can just search for that. And here it is, VectorShift query database. Now, this is not a mess, but this is not really how you want to format it in Bubble. So let me go back into plugins. We need to take this bit here and notice that it has all these backslashes. That means that it's escaped, which means that VectorShift is expecting this as text rather than as like pure JSON code. So I'm going to cut this and I'm going to remove the speech marks because I'm going to make the whole thing JSON safe.

Handling Dynamic Input

Then let's add in our dynamic value and we'll just say input here. And what that does, as long as I untick private, is it opens up a input here. Now remember, we need to make it JSON safe. We need to ensure that any text we send across follows that exact formatting and is made JSON safe. So we'll use arbitrary text to do that. Arbitrary text is a great way of grouping together, especially with actually with AI prompting. It's a great way of grouping together anything that you're sending and making the whole thing JSON safe. That's going to put those speech marks back on either end and it's going to reinsert any backslashes before any pesky punctuation. Now let's paste it back in and I'm going to remove the backslashes because it's going to be escaped by the JSON safe. But I want to replace this with the content of our multi-line input.

Using Custom States

Okay, now I think that will work. We are then going to get our responses back and I could save these to the database in Bubble, but just to make this nice and quick, I'm going to use a custom state. Custom states are like a temporary storage bucket on the current web page. If the user refreshes the page, then it's lost. So it's not saving to the database, but I just need a way of presenting this data back to my user. So I add in two custom states. One will be called answer, and this will be of type text. And I'm putting the custom states on the page element. You can put a custom state on any element on the page. I just like putting them on the page because then I know where they are and I don't lose them. And then we say source URL.

Finalizing the Workflow

And we now, going back to our workflow, can set the states. So we go set state, choose my page. If you're unsure, this is my page, which is called the VectorShift. That's why it's called VectorShift up here. And then we're going to set these two states. And if I go results from VectorShift, we have our answer and we have our source. And if you're unclear about why they're labeled exactly like that, that's because when I initialize the call, and then I go manually, we get back our answer and we get back our source. And that will be different if you set up your pipeline and you set a different prompt and you've asked for a different output back. Let's just check that this is all set up. One final thing is we just need to connect up our text labels to our custom states. So remember custom states act as temporary storage. So we go to where we stored them, answer, that's it. And destination URL, again, we go to where we stored it, source URL.

Testing the Final Product

Right. Let's click preview and give this a run. So let's test the question we've been using all the way through. We'll say, what are option sets? And I'll say, ask question. Now you can see the loading bar going across the top that is Bubble querying the VectorShift API. And of course the VectorShift API is running that whole pipeline. And there we go. We get back our description of what option sets are, and then I'm going to hover over and I can already see in my browser that I get a link and it gives me a link back to the page based on the answer that it's replied with.

Conclusion and Additional Features

So there you go. That is how you can connect to the VectorShift API, how you can set up a knowledge base based on a website, but you could use PDFs, CSV, et cetera, and how you can query that using AI and return the data back into your Bubble app. But before you go, a couple of bonus things I want to point out, even more features that you can do with VectorShift. So I've just demoed how you can use the Bubble API connector to query VectorShift and use VectorShift to manage your knowledge base. But what if you just wanted to launch a chat bot? Well, you can do that too.

Creating a Chatbot

I'm going to go ahead and click new and I'll say search PNC chat bot, and then I just connect it up to a pipeline. There's my input, or my output rather, and I'll say create chat bot. You can customize so many parts of the chat bot, and then you can export it. Let's ask our question, what are option sets? Because just remember, maybe OpenAI has crawled the Bubble documentation or other articles written about Bubble, so maybe it knows what option sets are. But the fact that we get back such a specific response, that it knows that when we talk about option sets, we're talking about Bubble, and that it knows a source URL to recommend as a read more link, that goes to demonstrate that it is using the training data, the knowledge base that we have uploaded into our VectorShift account.

Refining the Chatbot Response

So let's try it out here. Remember, we're getting back a response with JSON, an