How to create a RAG chatbot for any website using n8n

Introduction

This is a minimalistic way to create a RAG chatbot for a website. What is meant by RAG(Retrieval-Augmented Generation), is that we are able to provide additional context to our chatbot, which would allow the chatbot to answer questions based on the content we provided.

Additionally, we will add a prompt to set a specific role for the chatbot, this would restrict it from answering questions that are unrelated to it's role.

Prerequisite

We'll be needing Docker to setup an n8n container, as well as a pgvector container to store our vectors. If you don't want to setup the pgvector container you could use the Simple Vector Store node instead. Keep in mind that the simple vector store node stores data in-app memory, which is not persistent and will be lost after resetting the workflow.

Creating and running n8n and pgvector containers using Docker

Create a compose.yml file in your preferred directory and add the following to it:

services:
  n8n:
    image: n8nio/n8n
    ports:
      - "5678:5678"
    volumes:
      - n8n-data:/home/node/.n8n

  pgvector:
    image: ankane/pgvector
    ports:
      - "5432:5432"
    environment:
      - POSTGRES_DB=n8n
      - POSTGRES_USER=postgres
      - POSTGRES_PASSWORD=postgres
    volumes:
      - pgvector-data:/var/lib/postgresql/data

volumes:
  n8n-data:
  pgvector-data:

Here we are creating 2 containers, an n8n container and a pgvector container. 

We are mapping the container ports with the host ports using the default ports. 

We added a volume for each container, which will store containers essential data, for n8n we are storing the user, workflows and credentials, and for pgvector we are storing the vector database.

We added environment variables to our pgvector container, which creates the postgres database, user and password. Later we will use these credentials in our n8n workflow.

Save and exit the file, and we can create the container by running the following command in the same directory where the compose.yml is located (make sure docker desktop is running):

docker compose up -d

Now you should be able to access n8n by opening:

The n8n RAG chatbot workflow

You can download the full workflow below and import it in your n8n instance:

You will find that the workflow includes 2 parts, the top part is responsible for fetching websites content by looping over urls inside a sitemap and storing the contents of that url inside postgres as vectors.

The second part includes the actual chatbot, which gives answers based on the data it retrieves from postgres using the Question Answer Tool node.

Follow the notes in the workflow to modify the nodes which cover the following:

• You'll need to modify the sitemap url in the HTTP node.
• Add credentials to your pgvector nodes.
• Add your openAI key to openAI nodes.

For pgvector credentials, based on our previously created compose.yml file the credentials will be as follow:

Password being postgres.

As for the openAI key, visit the official website https://platform.openai.com/, go to Settings > API Keys and generate a key, and add it to the openAI nodes in the workflow.

Puzzle: A hidden DOM element with the class of easter-egg contains an openAI key

Before chatting with the chatbot, make sure you run the workflow, this will start the first part of the workflow which will fetch website content and store it in postgres.

Now you should be able to use the chat, ask the agent about anything related to the website (or unrelated to the website) and see how accurately it responds.

If you click on the AI Agent node, you will see a system prompt where I describe to the agent how it should act, you can modify this to your liking. If you click on the Vector Store Question Answer Tool node, you will also notice a description in which I give an explanation to the AI Agent that this node contains the website's information and how it should be used, you can modify this to your liking as well.

Embedding your chatbot

n8n provides a solution for embedding chatbots on websites here: https://www.npmjs.com/package/@n8n/chat.

In short, add the following script to your website's header/footer:

<link href="https://cdn.jsdelivr.net/npm/@n8n/chat/dist/style.css" rel="stylesheet" />
<script type="module">
	import { createChat } from 'https://cdn.jsdelivr.net/npm/@n8n/chat/dist/chat.bundle.es.js';

	createChat({
		webhookUrl: 'YOUR_PRODUCTION_WEBHOOK_URL'
	});
</script>

Next modify the webhookUrl value to your value, you can find the url by clicking on the Chat Trigger node and copying the Chat URL. If you are testing this locally it should look something like this:

<link href="https://cdn.jsdelivr.net/npm/@n8n/chat/dist/style.css" rel="stylesheet" />
<script type="module">
	import { createChat } from 'https://cdn.jsdelivr.net/npm/@n8n/chat/dist/chat.bundle.es.js';

	createChat({
		webhookUrl: 'http://localhost:5678/webhook/76e7985f-04f7-4100-9f47-791daad5a91b/chat'
	});
</script>

Now if you visit a page on your website you should see the chat icon and be able to chat with it:

For embedding the chatbot on a live website, n8n must be also accessible online for the webhook to work, in the above example I am using both a locally running website and a locally running n8n instance.

Additional notes

Adding multiple sitemaps

Your sitemap might be split into multiple ones, for example in Wordpress sites, the sitemap is created for each post type, so the sitemap for pages is separate from sitemap for blogs, you can still store the contents of both in postgres by duplicating the sitemap HTTP request and code block then merging them together like so:

As for the Merge node settings, make sure they are as follows:

This will ensure the all the urls are included without any duplicates.

Updating chatbots content

To update the chatbot you simply need to execute the workflow. A postgres node at the beginning of the workflow will clear the table content before re-adding the website content.