React Templates & Themes Logo React Templates & Themes
Langchain Supabase Website Chatbot screenshot

Langchain Supabase Website Chatbot

Author Avatar Theme by Mayooear
Updated: 10 Mar 2023
688 Stars

Build a chatgpt chatbot for your website using LangChain, Supabase, Typescript, Openai, and Next.js.

Github Live Preview

Categories

Nextjs Tailwind Notion Supabase Fullstack

Overview:

This tutorial showcases how to create a ChatGPT chatbot for a website using LangChain, Supabase, Typescript, Openai, and Next.js. LangChain is a framework designed to ease the development of scalable AI/LLM apps, while Supabase is an open-source Postgres database capable of storing embeddings via a pg vector extension.

Features:

  • LangChain Framework: Facilitates the creation of scalable AI/LLM apps.
  • Supabase Database: Enables storage of embeddings with pg vector extension.
  • Next.js Integration: Utilizes Next.js to build the chatbot interface.
  • OpenAI Integration: Incorporates OpenAI for text embeddings.
  • Typescript Support: Codebase is written in Typescript for enhanced type safety.
  • Web Scraping and Embedding: Includes scripts for extracting data from specified web pages and converting it into vectors.
  • Customizable Web Loader: Allows customization of elements to be extracted from web pages.
  • Interactive Chatbot: Enables interaction by running the app and typing questions for the chatbot.

Installation:

  1. Clone the repository.
  2. Install necessary packages.
  3. Set up your .env file by copying .env.local.example.
  4. Obtain API keys from OpenAI and Supabase, and insert them in the .env file.
  5. Update the URLs array in the config folder with your website URLs.
  6. Customize the elements in the utils/custom_web_loader.ts file.
  7. Run schema.sql in the Supabase SQL editor.
  8. Execute npm run scrape-embed to scrape data and convert it into vectors.
  9. Run the app using npm run dev and interact with the chatbot.

Summary:

The tutorial demonstrates the process of creating a ChatGPT chatbot for a website using LangChain, Supabase, Typescript, Openai, and Next.js. By leveraging these technologies and following the installation steps provided, users can set up a scalable AI chatbot with web scraping capabilities. The integration of OpenAI for text embeddings and Supabase for database storage enhances the functionality of the chatbot, offering a comprehensive solution for website interaction.