Step-by-Step Tutorial: Create a RAG Chatbot with n8n AI Agents in MINUTES
n8nAging📅 2024-09-26
Build Process
┌─────────────────────────────────────────────────────────────────────┐
│ BUILD CHATBOT WORKFLOW │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ PLANNING │
│ ──────── │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ Define │───►│ Choose │───►│ Setup │ │
│ │ Scope │ │ Stack │ │ Project │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ │
│ │ │
│ ▼ │
│ DEVELOPMENT │
│ ─────────── │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ Build │───►│ Add AI │───►│ Test & │ │
│ │ Features │ │ Logic │ │ Debug │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ │
│ │ │
│ ▼ │
│ DEPLOYMENT │
│ ────────── │
│ ┌─────────────┐ ┌─────────────┐ │
│ │ Deploy │───►│ Chatbot │ ◄── LIVE! │
│ │ to Cloud │ │ Running │ │
│ └─────────────┘ └─────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────┘Key Components
- Agent configuration
- Tool integration
- Memory management
Transcript
[00:00] Imagine having an AI assistant that can answer questions using the documents in your Google Drive folder. Today, I'll show you how to build exactly that using N8N's AI Agent node. With the rapid development of AI, learning to create your own AI agents is becoming an essential skill for developers and businesses alike. So in this video, we'll focus on one of the most popular applications of AI agents in N8N, creating RAG chatbots. These intelligent chatbots can answer questions from various data sources like
[00:31] databases or documents. They're perfect for automating email responses, powering website FAQs, or creating custom knowledge assistants. Of course, there are many more things that you can do with these AI agent nodes, but I believe that this tutorial will give you a strong foundation for building your very own agent-driven applications. Now let's have a look at what we'll be building. We will create this intelligent AI chatbot that can answer questions from our very own knowledge base. For instance, what are the current specials?
[01:02] And the agent was able to answer this question using the files in this Google Drive folder. And if I wanted to add more information to this knowledge base, all I have to do is add another file to this folder. For instance, this list of menu items with their prices. So if I go back to the chatbot, I'll now be able to ask it questions from the menu, like how much are the land chops, and we do get the correct response back. So you could use that folder to upload lecture notes or whatever you want. You can also share this chatbot with your
[01:33] friends or clients by copying this chat URL and then opening it in the browser. And of course, we can continue chatting to our chatbot. Or we could take this a step further and embed this chatbot into a website. And now we have an assistant that's available 24-7 that can assist users with their queries. And in this video, I will show you how to embed this into a website and customize the look and feel of this chat window. So let's get started. This video will be on the longer side, but I really wanted to give
[02:04] you as much value as possible. So make a cup of coffee and get comfortable. Let's get started. There are basically two phases involved in building out this application. The first phase involves loading data from a data source like a PDF file, a database, etc. And then loading the data into a vector store. You can simply see the vector store as the knowledge base that the AI model will use to answer questions. The second phase is building the AI assistant itself.
[02:36] But enough talk. Let's actually build this. Let's click on Add Workflow and let's call this workflow Update Knowledge Base. So what this workflow will do is grab the data from a data source and then up-serve that data into a vector store. In this example, we will use a Google Drive containing files as our data source. So go ahead and create a new folder in your Google Drive account. I simply called mine Oak and Barrel. Just to keep with the restaurant example from earlier. Here, I'll upload this Q&A document that
[03:08] contains some simple information about our Oak and Barrel restaurant. Now what we want to do is the moment the user uploads a file to this folder, we want our workflow to be triggered. So as the first step, let's search for Drive. Let's add Google Drive. And for the trigger, let's select on changes involving a specific folder. Under credentials, let's select Create New Credential. Now we need to provide a client ID and a client secret. To get those, go to
[03:39] Google Cloud Platform. So I'll simply click on Console and let's first create a new project. So under this dropdown, let's click on New Project and let's call the project N8N Tutorial. Let's create this project and let's also go ahead and select this project. Either by clicking on it here or in the dropdown, simply select the project that you just created. Now on the left hand side, let's go to APIs and services. Let's go to Library. Let's search for Google Drive.
[04:10] Let's then select the Google Drive API and let's click on Enable. After that, go to the OAuth consent screen, select External, click on Create. Let's call the app N8N Tutorial. Select your email address and scrolling down, enter your developer contact information. Then click on Save and Continue. We don't have to do anything on the scopes page. So scroll down and click on Save and Continue. We don't have to do anything under Test Users. So click on Save and Continue and then
[04:42] click on Back to Dashboard. And then lastly, click on Publish App and confirm this. We can finally go ahead and create our OAuth credentials. Click on Create Credentials, OAuth Client ID. Under the Application Type, select Web Application. Let's give our web app a name. And under Authorized Redirect URIs, click on Add URI and then back in N8N, copy this redirect URL and paste it into this field. And finally, we can click on Create.
[05:13] We can now copy our client ID and paste it into N8N and let's do the same for the client secret. After doing that, you should see the sign in with Google popup. So let's click on that, select your email address, click on Select All and click on Continue. If you've done everything correctly, you should see this account connected message over here. We can now close this popup and we're now able to connect to our Google Drive account. So under Pulled Times, we can tell N8N how often to check for new files in our Google
[05:45] Drive folder. So I'll just leave it as Every Minute. Then on Trigger On, select Changes Involving a Specific Folder. Then under the folder list, go ahead and search for the folder that you just created. I called mine Oak and Barrel. Under Watch 4, I'll select File Created. So whenever a file is created on that folder, we will execute this workflow. I'm going to go ahead and test this. And indeed, I get a response back and looking at the schema, I can see under the original
[06:15] file name that this is indeed the file that I just uploaded. So whenever we upload a file, this workflow will be triggered, giving us all this information related to the file that was just added. The next thing we want to do is to actually download that file so that we can pull its contents. Let's click on Add Node and let's add Google Drive again. But this time, select Download File. We've already set up the credentials for Google Drive, so simply select your connection. Under Resource, leave it as File.
[06:47] The operation should be download. And now for File, what we'll do is change it to Buy ID and we'll then grab the ID from this Google Drive trigger. So scrolling down, we're looking for this ID field, which we can just drag and drop into this input over here. I'll go ahead and test this step as well. And this message means that the file was indeed downloaded to N8N. Great. Now finally, we need to grab the content from the file and insert it into a vector store.
[07:18] For the vector store, we will be using Pinecone, so go over to pinecone.io and log in or sign up for your account. Pinecone offers a generous free tier, so this one cost you anything. After signing in, click on Create Index and give your index a name like N8N. Then under Dimensions, I'll click on Set Up by Model and also select the text embedding 3 small model. And let's click on Set Configuration. Then simply click on Create Index. Great.
[07:48] Now that we have our database set up, we can go to API Keys, then click on Create API Key. I'll call mine N8N Tutorial and let's click on Create API Key. We can then copy the key value and back in N8N, let's search for Pinecone Vector Store. Under Credentials, let's select Create New Credential. Let's paste in that API key and let's click on Save. Let's close this popup. Then let's change the operation mode to Insert Documents.
[08:18] From the Pinecone Index, let's select N8N. And what I like to do is to add a Pinecone namespace for each of my projects. I'll call this Oak Ant Barrel. It's closed as popup and it's simply connect our Google Drive node to Pinecone. The Pinecone Vector Store accepts two inputs, the embedding function and a document loader. Let's start with the embedding function. For this tutorial, I will be using the OpenAI models for both the embedding functions as well as the chat models for our agent.
[08:51] OpenAI is not free to use, but it is extremely cheap. Honestly speaking, from my professional experience, it's one of those providers that you need to learn if you do want to pursue this as a career or build your own SaaS apps. You can also download and run free models using Olama, but for simplicity's sake, I'm simply going to stick with OpenAI. Under Credentials, let's click on Create New Credentials and all we have to do now is generate an OpenAI API key. And I promise, that's the last API key
[09:22] that we need to generate for this tutorial. Go to platform.openai.com slash API keys and then click on Create New Secret Key. I'll call mine N8N Tutorial. Let's click on Create Secret Key. Let's copy this key and add it to N8N. The connection was successful, so I'll simply close this popup. Let's change the model to Text in Beddings 3 Small. This needs to be the same model that we used when creating our pinecone index.
[09:53] Now all we have to do is add this document loader, or simply use the default data loader. Let's change the data type from JSON to binary, and we can actually go ahead and close this popup. Then the data loader expects a text splitter, so let's click on that. Let's select a recursive character text splitter. Also the chunk size to 500, with an overlap of 20. For larger documents, I do recommend changing the chunk size to something like 1000 to 2000 characters, with a chunk overlap of perhaps 200.
[10:24] We can now test this workflow by clicking on Test Workflow, and we can see that 10 documents were added to the vector store, and if we go back to pinecone, we can indeed see that 10 documents were added. And if we have a look at the document, we can see the text contained in this document, and this text was indeed extracted from the file in our Google Drive. However there is one announcement that I do want to make to this. At the moment I can't see which file this information was extracted from. It's quite simple at the moment because
[10:54] we only have this one file, but we could have as many files as we want. It would be ideal in these documents if we could see which file this relates to. This is really easy to set up. In our document loader, let's simply go to Options, let's go to Metadata, Add Property, and now we can call this whatever we want. I'll simply call this property file, and for the value, I want to add the file name. So on the left hand side, I'll change to Mapping, I'll select Schema, and from Google Drive,
[11:26] I'll scroll down a bit, and what I want is this file name over here. Great. So let's run this, let's go back to Pinecone, and let's remove the documents that we currently have. Now it could be quite tedious to delete these documents one by one, but because we specified a namespace, we can now see the namespace over here, and we can delete style data simply by deleting this namespace, like so. Now our database should be clean. Let's execute N8N again, we can see those 10 documents over
[11:57] here, but this time if we look at the documents, we can see this file property with the name of the file that this information was retrieved from. So this seems to be working, so let's go ahead and save this workflow, and let's activate it as well. Great. This workflow will now listen for changes to my Google Drive folder. So let's go ahead and add another file to this drive. This time I've uploaded this menu.csv file, which contains items and the prices. Because this is a CSV file, the document
[12:30] loader in N8N will actually add a unique document for each of these rows. So we should see an additional 20 documents being added to Pinecone. And within a few seconds, we can see that the record count now increased from 10 to 30. And if we look at the documents, we can see that items were added from the menu file, like the item sirloin and this price. Awesome. Now that we have a solid solution for updating our knowledge base, let's move on. Move on to the more exciting part, and that's building our AI assistant.
[13:01] Let's add a new workflow. Let's call it Oak and Barrel Assistant. For the first step, let's actually choose the On Chat Message node. After adding this node, you will actually notice that you now have this chat button that you can use to chat to your chatbot. Let's also go ahead and add an AI Agent node. So let's go to Add Nodes. Let's go to Advanced AI. And now we're going to add this AI Agent node. Alternatively, you could simply use this question and answer chain, but I find that this node is way too limiting, as you
[13:32] can't set system messages and provide tools to the agent. So I'll go with the AI Agent node instead. For the Agent type, I'll select the Tool Agent, but you can see that there are other types of agents available as well, like the SQL Agent that can interact with SQL databases to extract information. For the prompt, we'll simply grab the message from the previous node, which is the chat node. And under Options, we can now set additional attributes like a System Message. For the System Message, I'm going to
[14:03] enter "You are a customer support agent for a restaurant called Oak and Barrel. Your name is Max. Your tone should be friendly and helpful. When asked questions about the restaurant, use the provided context. If you don't know the answer, then simply respond with "I don't know." This part about using the provided context will ensure that our agent will answer the questions from our Vector Store or our Knowledge Base, instead of hallucinating and making up its own answers. Let's close this popup, and for the AI
[14:35] Agent node, we need to provide a chat model, a memory, as well as a tool. For the chat model, I'll continue using the OpenAI chat model. So we'll select our OpenAI credentials, which we created earlier. And for the model, let's select the GPT-4-O Mini model, which is a super fast and affordable model. Let's go back to the canvas, and let's add a Memory node. The Memory node will allow the agent to recall information from our previous messages.
[15:05] I'm simply going to select the Window Buffer Memory node. I'll leave the defaults. We want our agent to have access to that point code Vector Store. So what we'll do is add a new tool, and more specifically, the Vector Store tool. Let's give our tool a name, like Oak and Barrel Information, and a description of returns documents related to the restaurant and its menu. This description is extremely important, as it will be used by the LLM to determine when to call this tool. Let's go back to the canvas, and let's
[15:36] continue working on this tool. We need to provide a model and a Vector Store. For the Vector Store, let's add the Pinecane Vector Store, of course. Let's select our Pinecane credentials. We'll leave the Operation mode as retrieve documents. And from the Pinecane Index, let's select N8N, and under Options, let's specify that Pinecane namespace, which we called Oak and Barrel. And hopefully you can also see the benefits of using namespaces. In theory, if we had different namespaces within Pinecane, we could simply grab the
[16:08] name of the specific namespace, and then swap it out over here to retrieve a different set of information. Now lastly, let's add our model. And again, we'll use the OpenAI chat model. From here, we'll select the GPT40 Mini model again. Let's close this. And the Pinecane database needs an embeddings function. So let's click on that, and let's select the OpenAI embeddings node. And again, let's change this to Text embeddings3 small. Believe it or not, that's actually all we
[16:39] need to build this AI agent. And we can go ahead and test it by clicking on Chat. And let's say, hello. We are getting a response back from the LLM, which means that everything is set up correctly. And what I really like about NNN's interface is the section on the right over here, where we can see all the steps that were taken by our agent. So first, the agent tried to go to the VectorStore tool, but obviously we didn't ask a question related to the VectorStore, so nothing was executed here. Then it pulled information from the
[17:11] conversation history, or from the memory node, and then paused that along with our current question and the system message to the LLM, which finally returned this response. I really like this transparency. Let's also ask a question from the VectorStore then, like, what are your current specials? We can see the response coming back, and this time this information came from the Knowledge Base. And this time, if we look at this Pinecane VectorStore node, and we expand the Output node, we can see the documents that were
[17:41] returned from our VectorStore. And finally, our question, including the context from the VectorStore, were injected into the prompt, and that allowed our LLM to provide this accurate response. Now that we have this workflow working, how do we actually share this agent with the world? So next I am going to show you how to share this agent as a standalone app to your friends and family, or embed it into a website. But first, if you found this video useful, then please hit the like button, and subscribe
[18:11] to my channel. The first way is to share this agent using a public-facing URL. If you are running N8N in a cloud instance, like I'm doing here, you can open up the chat message node, and in this node, you will see this toggle to make this chat public. When you enable this, you will be provided with this URL. We can then copy this URL, and open it in the browser. Of course, we first need to save this chat flow, and if I refresh this, I can actually see my chatbot over here, and everything
[18:42] is working as expected. What's also cool about this is you can password protect this application as well. So under authentication, we can select basic auth, and then set a username and password, and that way you can control access to your application. What we can also do is embed this chatbot into a website. So let's change the mode from hosted to embedded chat. Let's go back to the canvas. I'm going to save this workflow, and if we now click on chat, and if we click on this more info link over here, we can see this
[19:14] pop-up with instructions on embedding this chatbot into websites using the CDN or frameworks like Vue or React. To demonstrate this, I created this simple landing page for the Oak and Battle restaurant, and what I want is a little chat bubble to show up on the bottom right of our webpage so that people can chat to our customer support agent. So all we have to do is copy this code and paste it anywhere in the body tag of our webpage. So back in our code, I'm simply going to
[19:44] paste this towards the end of the script just before this closing body tag, and if I go back to our website, I can see that pop-up over here, and if we click on this, we can start interacting with our chatbot. This is working, but it doesn't look very good. I want the theme to match the style of my webpage. For instance, this button shouldn't be pink, but perhaps a brownish color, and I want the same thing for the background in the chat, and I also want to customize these messages over here, and perhaps this intro message as well.
[20:16] Thankfully, NNN makes it very easy to customize this chat bubble by going to their documentation. When you scroll down, you will find this options section that shows you a whole bunch of attributes that you can use to customize this chat window. For example, if you wanted to change the initial messages, we could simply grab this section over here, and then in the code where we create this chatbot after this webhook URL, we can simply paste in this initial messages property, and let's change it from "My name is Nathan" to "My name is Max", and maybe
[20:49] something like "Welcome to Oak and Barrel", like so. Now, if I go back to our website, let's open the chat window, we can see that the welcome message was indeed changed, and of course, we can do the same thing to change the title and the subtitle, or add a footer, but let's have a look at changing the styling. Under this customization section, we can see the CSS variables that are used to control the look and feel of this application, and these are all the standard values. So to customize this, I'm actually going
[21:20] to cut this link URL, and this is the link to the default styles, and I'm going to move it up just above my own style sheet import over here. Now, so far, everything still looks the same, but what I can do now is change the styling within my own style sheet. So I'll actually start this off with this root property, just like I have it in the documentation, and now I'm going to grab all the variables pertaining to the colors, and I'll simply paste that into this root tag over here.
[21:50] Now we can visually see the colors that are being used in our chatbot. I actually want to make it this brownish color that I'm using in my header, so I'll just copy this value and replace these pink values with my brown color. I'm actually also going to replace this green color with this brown color as well, and after saving this, I can see that my chat bubble is now this brown color, and it's saying the message like, "What is your name?" And we can see that the background message is also this brownish color as well. Of course, we can change other attributes
[22:22] as well, like the width and height of this bubble by simply copying the rest of these properties and adding it to our style sheet. I hope you found this video useful. If you would like to learn more about N8N, then please subscribe to my channel, and also check out these other videos over here. I'll see you in the next one. Bye bye.