Introduction

This is a simple yet effective way to create a RAG chatbot for a website. The chatbot will be able to answer user inquiries based on the available website data, and provide links to the related content. The chatbot used on this website contains a similar setup, so feel free to try it.

Additionally, we will prompt the chatbot to answer questions only related to the website.

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.

To create an n8n instance with your custom domain you can follow my article bellow:
https://opensourcehustle.com/blog/n8n-5/self-host-n8n-with-custom-domain-ssl-on-ubuntu-24-04-14

Including pgvector store in your compose setup

In your compose setup, include the pgvector store container like so:

services:
  # your other containers

  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:
  # your other volumes
  pgvector-data:

Now start the pgvector container by running:

docker compose up -d pgvector

Vector store workflow

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

This workflow will fetch the contents of all the pages on a website based on its sitemap.xml, then it will store the data as vectors inside our pgvector container.

Inside the workflow you'll need to modify/add the following:

• Add credentials to your pgvector nodes.
• The sitemap url in the HTTP node.
• 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.

Now run the workflow, this will store all the website content in our pgvector store that we can use within our chatbot workflow next

Chatbot workflow setup

Download the full chatbot workflow bellow:

You will notice that the vector store is being used before the chatbot, you might wonder why we are not using the chatbots tool function to fetch the vectors, that is because the tool method has been unreliable, because the decision to fetch from the vector store is made by the agent, there is no guarantee that it will actually do so, but having the vector store fetching being done before hand guarantees fetching the data which can be later used by the agent.

Embedding your chatbot

You can embed the chatbot using the CDN method in the following npm package:
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 with your value, you can find the url by clicking on the Chat Trigger node and copying the Chat URL (make sure your workflow is active).

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

You can modify the embedded chatbot content by adding all the values of the createChat function like so:

createChat({
	webhookUrl: 'your url',
	webhookConfig: {
		method: 'POST',
		headers: {}
	},
	target: '#n8n-chat',
	mode: 'window',
	chatInputKey: 'chatInput',
	chatSessionKey: 'sessionId',
	loadPreviousSession: true,
	metadata: {},
	showWelcomeScreen: false,
	defaultLanguage: 'en',
	initialMessages: [
		'Hi there! 👋',
		'My name is Nathan. How can I assist you today?'
	],
	i18n: {
		en: {
			title: 'Hi there! 👋',
			subtitle: "Start a chat. We're here to help you 24/7.",
			footer: '',
			getStarted: 'New Conversation',
			inputPlaceholder: 'Type your question..',
		},
	},
	enableStreaming: false,
});

Here you can modify the title, subtitle, initial message and more.

Additional notes

Adding multiple sitemaps

Your sitemap might be split into multiple ones, for example in Wordpress websites, 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 the vector store content

To update the vector store after adding or modify content on the website then simply re-run the vector store workflow which will update the vectore store by clearing previous data and adding new ones.