Building a Personal Chatbot: A Journey Through The Exciting World of Generative AI with LangChain, Next.js, Vercel, and Supabase

Introduction

As we teeter on the brink of an artificial intelligence renaissance, there’s never been a better time for builders and developers to harness the transformative potential of generative AI and usher in a new era of groundbreaking applications. The monumental work happening in the generative AI space offers an exciting playground for creative minds and tech enthusiasts alike, fueling ambitions to build, learn, and innovate.

One of my recent ambitious undertakings was to build a personal chatbot. This task was driven by a dual motivation: to gain a better understanding of the mighty LangChain framework and to become comfortable with front-end technologies such as React and Next.js. A chatbot app, as a Retrieval Question Answering (QA) system, is an excellent use case for exploring all of these technologies. A retrieval QA system requires a vector database, opening up opportunities for nuanced conversations with the bot, and paving the way for an interactive and engaging user experience.

Laying the Foundations: LangChain, Next.js, Supabase, and Vercel

At the heart of this app lies LangChain, a powerful and highly extensible framework designed to simplify the creation of applications using large language models. For more details, visit?https://www.pinecone.io/learn/langchain-intro/.

Next on the list is Next.js, a React-based framework used to craft the front-end of the application. Renowned for its scalability, Next.js is a reliable choice for developers looking to build robust, feature-rich applications. Vercel was used to deploy the app into production, which is becoming the de-facto platform of choice for app builders.

On the backend, Supabase was employed to store the embeddings into a vector database. There are many options available, such as Pinecone, Chroma DB, and FAISS, but for this use-case, I used Supabase as I found the free tier to be more flexible.

Application

The application is deployed on Vercel and can be accessed using the below link.

Architecture and Solution

I won’t be going into the details of the underlying technologies as the official documents already do a great job of that.

Given below is the overall architecture of the chatbot along with a brief description.

The input document is broken into multiple chunks and then stored in a vector database as embeddings using the OpenAI embeddings model. When any question is asked, it also gets converted into an embedding and used in the vector search. Retrieval of top-k relevant chunks is done by doing a similarity search between the question embedding and embeddings already present in the DB.

The top-K most relevant chunks are then passed to the OpenAI GPT 3.5 model along with the input question and prompt template to let the model do its magic and give us back a well-formatted response that is shown back to the user.

Thanks to LangChain for making it all sound so simple and easy to use.

The complete code can be found here:?https://github.com/nikhilno1/NikBot.

Shoutout to?Maxime Thoonsen?for making the base code available.

Learning Through Building

The journey wasn’t without its share of learnings and revelations. Keeping relevant passages together was a key strategy in enhancing the efficiency of the Retrieval QA system, and including related keywords within the source document significantly boosted the quality and relevance of responses.

An interesting side-effect I came across during the development was the phenomenon known as “hallucination,” where the Language Model (LLM) concocts believable yet non-existent information. While this might sound concerning, it did lend an extra layer of realism to the chatbot’s responses, albeit at the risk of occasional inaccuracies.

Remarkably, the chatbot was able to handle abusive questions with decorum, responding in a respectable and dignified manner — a testimony to the potential of generative AI in fostering healthy digital interactions.

The Universal Linguist: Beyond Language Barriers

Perhaps the most surprising revelation of this endeavor was the chatbot’s multilingual capabilities. The system performed admirably when handling queries in languages other than English. This truly global functionality opens up immense potential for use-cases in international customer support, language learning, and more, enhancing the accessibility and reach of the application.

Few Examples

Conclusion: The Dawn of Generative AI

The exhilaration of seeing the personal chatbot come to life, answering questions and interacting smoothly, is beyond words. This successful project serves as a reminder of the infinite possibilities that lie in the realm of Generative AI. The space is ripe for further exploration, and with the ever-growing stack of technologies like LangChain, Next.js, and vector databases such as Supabase at our disposal, the potential for creating revolutionary applications is boundless.

So, if you’re a builder at heart, now is the time to dive into the generative AI space. Let’s continue to create, innovate, and shape the future of technology, one application at a time.