Build Website Q&A Chatbot with RAG, OpenAI GPT-4o-mini and Supabase Vector DB

✅ What problem does this workflow solve?

Many websites lack a smart, searchable interface. Visitors often leave due to unanswered questions. This workflow transforms any website into a Retrieval-Augmented Generation (RAG) chatbot—automatically extracting content, creating embeddings, and enabling real-time, context-aware chat on your own site.

⚙️ What does this workflow do?

Accepts a website URL through a form trigger. Fetches and cleans website content. Parses content into smaller sections. Generates vector embeddings using OpenAI (or your embedding model). Stores embeddings and metadata in Supabase’s vector database. When a user asks a question: Searches Supabase for relevant chunks via similarity search. Retrieves matching content as context. Sends context + question to OpenAI to generate an accurate answer. Returns the AI-generated response to the user in the chat interface.

🔧 Setup Instructions

🖥️ Website Form Trigger Use a Form / HTTP Trigger to submit website URLs for indexing.

📥 Content Extraction & Chunking Use HTTP nodes to fetch HTML. Clean and parse it (e.g., remove scripts, ads). Use a Function node to split into manageable text chunks.

🧠 Embedding Generation Call OpenAI (or Cohere) to generate embeddings for each chunk. Insert vectors and metadata into Supabase via its API or n8n Supabase node.

💬 User Query Handling Use a Chat Trigger (webhook/UI) to receive user questions. Convert the question into an embedding. Query Supabase with similarity search (e.g., match_documents RPC). Retrieve top-matching chunks and feed them into OpenAI with the user question. Return the reply to the user.

🛠 AI & Database Setup OpenAI API key** for embedding and chat. A Supabase project with: vector extension enabled Tables for document chunks and embeddings A similarity search function like match_documents

💬 How to Embed the Chat Widget on Your Website

You can add the chatbot interface to your website with a simple JavaScript snippet.

Steps:

Open the "When chat message received" node Copy Chat URL Make sure, "Make Chat Publicly Available "Toggle is enabled Make sure the mode is "Embedded Chat" Follow the instructions given on this package here.

🧠 How it Works

Submit URL → Form Trigger
Fetch Website Content → HTTP Request
Clean & Chunk Content → Function Node
Make Embeddings (OpenAI/Cohere)
Store in Supabase → embeddings + metadata
User Chat → Chat Trigger
Search for Similar Content → Supabase similarity match
Generate Answer → OpenAI completion w/ context
Send Reply → Chat interface returns answer

🗂 Why Supabase?

Supabase offers a scalable Postgres-based vector database with extensions like pgvector, making it easy to: Store vector data alongside metadata Run ANN (Approximate Nearest Neighbor) similarity searches Integrate seamlessly with n8n and your chatbot UI :contentReference[oaicite:1]{index=1}

👤 Who can use this?

📝 Documentation websites 👩‍💼 Support portals 🏢 Product/Landing pages 🛠 Internal knowledge bases

Perfect for anyone who wants a smart, website-specific chatbot without building an entire AI stack from scratch.

🚀 Ready to Deploy?

Plug in your: ✅ OpenAI API Key ✅ Supabase project credentials ✅ Chat UI or webhook endpoint

… and launch your AI-powered, website-specific RAG chatbot in minutes!