LangChain & Supabase Tutorial: How to Build a ChatGPT Chatbot For Your Website

A practical blueprint for turning a website into a ChatGPT-style chatbot hinges on one move: retrieve the most relevant chunks of your site’s text using vector similarity, then feed that retrieved context—along with the ongoing chat history—into a language model to generate answers grounded in your content. Instead of a one-off Q&A, the system keeps a running conversation state so follow-up questions can reference earlier exchanges, mirroring how ChatGPT maintains context.

At a high level, the workflow starts by scraping selected pages from a site (the tutorial intentionally avoids deep crawling). Each page is converted from HTML into raw text, then split into smaller chunks. Those chunks are embedded into vectors—numerical representations in high-dimensional space—so a computer can match questions to semantically similar passages. The resulting vectors and their associated metadata are stored in a vector database.

When a user asks something like “How do I become more productive?”, the system doesn’t immediately send the question to the model. It first uses the chat history to create a “standalone question.” That step matters because follow-ups often rely on earlier context; by rewriting the user’s latest message into an independent query, the retrieval step can search the vector store accurately. The standalone question is embedded, compared against stored vectors using similarity search, and the top matching chunks are pulled back as context. The language model then receives both the standalone question and the retrieved text, producing an answer that can be tailored to the website’s content.

For the demo, the chatbot is built around Thomas Frank’s productivity guides (notably a large Notion-focused set). Rather than crawling everything automatically, the tutorial manually selects URLs and inspects the page structure using browser developer tools. It looks for consistent HTML elements—such as a title tag (e.g., an H1 with a stable class) and a content container (e.g., a div holding the article body)—and avoids pages where content loads via JavaScript. For static pages, it uses Cheerio to parse HTML after a GET request, extract the relevant sections, clean them, and package them into LangChain “Document” objects containing page content plus metadata.

The vector storage layer uses Supabase with the PG Vector extension. The setup includes enabling the vector extension, creating a table for documents, and defining a similarity function that compares query vectors to stored vectors using cosine similarity (with indexing for speed). After scraping and embedding, the system can be tested with a simplified “demo query” that retrieves similar documents and returns a model response.

Finally, the tutorial demonstrates the end-to-end chatbot experience in a small website UI: users ask questions about Notion topics, request clarifications (“What do you mean by…?”), and get answers that reflect the underlying guide content. The result is a basic but complete pattern for building a website-specific assistant: scrape → chunk → embed → store in PG Vector → retrieve with chat-history-aware standalone questions → generate responses with grounded context.