DEV Community: Samir Tiwari

Create an AI Chatbot for Your Website: A Step-by-Step Guide to RAG Implementation

Samir Tiwari — Wed, 23 Apr 2025 15:15:09 +0000

In today's digital landscape, there's a lot of excitement surrounding AI, AI agents, and AI chatbots. In this blog, we'll explore how to create your own AI chatbot for your website. We'll also delve into the fundamentals of RAG (Retrieval-Augmented Generation), showing you how to gather information from your site and leverage AI to build a chatbot that truly understands your content.

Understanding the Flow: How RAG Works

Before jumping into code, let's understand what we're going to do and what tools we'll need. We'll use Node.js, Express.js, and TypeScript for our backend, Qdrant as our vector database, and Gemini from Google for our AI (why Gemini? Because it has a super generous free plan!)

But hey, don't worry too much about the specific technologies, there are plenty of options out there. What's most important is understanding how the system works, since this forms the foundation for all RAG applications. This knowledge will be super helpful for building AI agents or chat bots in the future, so don't skip this part!

The flow is actually pretty simple:

First, we scrape our website to gather context about it for our AI. You could also use other formats like PDFs to provide context.
We need a pool of information from which we can search for content related to what users ask our chatbot.
But how do we retrieve only the relevant information? That's where our hero Qdrant comes in! Qdrant is an open-source vector database and similarity search engine designed to handle high-dimensional vectors. There are other vector databases available too, so feel free to use whatever works for you.
Once we have both the user's question and the related information, we can use AI to create a good response using the information from our vector database and send it back to the user.

Let's summarize the flow:

Retrieve information from our website
Save that information in our vector database
User asks a question to our AI chat bot
Based on the question, retrieve relevant information from our vector database
Use AI (Gemini AI) to create a great response using the retrieved information

You might wonder, how does the vector database fetch information based on the user's question? This is where vector embeddings come in. In simple terms, vector embeddings are just bunches of floating-point numbers that represent text in a way AI can understand and compare.

Let's Start Coding!

Now that you understand the theory, let's dive into the code.

First, let's set up our backend. Feeling bored about setting up a basic backend? No worries! You can directly run this command in your terminal:

npm create basic-express-server

This is my own npm package 😎 that sets up a basic Express server in JavaScript or TypeScript.

Next, let's install all our dependencies. Run the following command:

npm i @google/genai @qdrant/js-client-rest axios uuid

Setting Up Our Vector Database

As outlined in our flow, we first need to collect information from our website. But before that, let's create two functions: one to create vector embeddings from text, and another to save these to our vector database.

Let's start with the vector database. You can use Docker or create a cluster in the cloud. I'm using a cluster that I created in Qdrant cloud. Make sure you have Qdrant's URL and key:

import { QDRANT_KEY, QDRANT_URL } from "./config.js";const qdrantClient = new QdrantClient({ url: QDRANT_URL, apiKey: QDRANT_KEY, checkCompatibility: false,});

Now we can use this function to insert information into the database:

const WEB_COLLECTION_NAME = "my_portfolio_web";const VECTOR_SIZE = 3072;export const insertInDB = async ( embedding: number[], url: string, body: string = "", head: string = ""): Promise<void> => { try { const { exists } = await qdrantClient.collectionExists(WEB_COLLECTION_NAME); if (!exists) { await qdrantClient.createCollection(WEB_COLLECTION_NAME, { vectors: { size: VECTOR_SIZE, distance: "Cosine", }, }); } await qdrantClient.upsert(WEB_COLLECTION_NAME, { wait: true, points: [{ id: uuidv4(), vector: embedding, payload: { url, head, body }, },], }); } catch (error) { throw new ErrorHandler("Failed to insert data into database", 500); }};

Note: I'm using a custom error handler here:

throw new ErrorHandler("Failed to insert data into database", 500);

The size parameter represents the dimensions of the vector embedding. Gemini's gemini-embedding-exp-03-07 model has 3072 dimensions. This might differ for different models.

Creating Vector Embeddings

Now that we have a function to insert information into our database, let's create a function that generates vector embeddings. For this, we need the API key for our AI to use the embedding model. Make sure you have your API key ready.

To create embeddings using Gemini's gemini-embedding-exp-03-07 model, first initialize Gemini like this:

import { GoogleGenAI} from "@google/genai";export const ai = new GoogleGenAI({ apiKey: AI_API_KEY!,});

And now let's create a function that generates vector embeddings:

import { GenerateContentResponse } from "@google/genai";export const generateVectorEmbedding = async ( text: string): Promise<number[]> => { try { const response = await ai.models.embedContent({ model: "gemini-embedding-exp-03-07", contents: text, }); const embeddings = response.embeddings ?? []; if (!embeddings || embeddings.length === 0 || !embeddings[0]?.values) { throw new ErrorHandler("Failed to generate embedding", 500); } const res = embeddings ? embeddings[0]?.values : []; return res; } catch (error) { throw new ErrorHandler("Failed to generate vector embedding", 500); }};

Collecting Website Information

Now let's get the information we'll save in our vector database. I'm scraping my portfolio website to get this information, you can scrape your own website. Here's a function to scrape a website:

export async function scrape(url: string): Promise<ScrapeResult> { try { const response: AxiosResponse<string> = await axios.get<string>(url); const $ = cheerio.load(response.data); const head = $("head").html() ?? ""; const sections: string[] = []; $("section").each((_, el) => { const html = $(el).html(); if (html) sections.push(html); }); return { head, sections }; } catch (error) { throw new ErrorHandler("Failed to scrape the URL", 500); }}

Here we're using axios to get the website content and cheerio to help us extract specific tags.

Note: You'll need to adapt two things according to your needs:

I'm specifically targeting section tags because that's how my website is structured. I'm getting an array of sections as a way to chunk the information. You'll need to find your own way to chunk information that works for your site.
You could write this as a recursive function to extract all a tags and get information from those URLs recursively. Just make sure there's a stopping condition so it doesn't run infinitely!

Ingesting Information to the Database

Now that we have the information, let's create a function that ingests it into the database using the three functions we've created:

export const ingest = async (url: string): Promise<void> => { try { const { head, sections } = await scrape(url); if (!sections || !head) { throw new ErrorHandler("Failed to ingest the url", 400); } for (const section of sections) { const embedding = await generateVectorEmbedding(section); await insertInDB(embedding, url, section, head); } } catch (error) { throw new ErrorHandler("Failed to ingest URL", 500); }};

If you want to save information from PDFs instead, you can use this function. Just make sure you install unpdf:

import { extractText, getDocumentProxy } from "unpdf";export const pdfToPageChunks = async (pdfBuffer: Buffer): Promise<string[]> => { try { const pdf = await getDocumentProxy(new Uint8Array(pdfBuffer)); const { text } = await extractText(pdf, { mergePages: false }); // using mergePages:false won't merge the pages so that we get text as array if (Array.isArray(text)) { return text; } else { return [text]; } } catch (error) { throw new ErrorHandler("Failed to parse PDF", 500); }};

Retrieving Relevant Information

Now that we've saved the information, we can retrieve it based on user questions. Let's create a function that searches the database based on embeddings of users' questions:

export const retrieveByEmbedding = async ( queryEmbedding: number[], k: number = 3): Promise<string[]> => { try { const searchResult = await qdrantClient.search(WEB_COLLECTION_NAME, { vector: queryEmbedding, limit: k, }); return searchResult.map((hit) => (hit.payload?.body as string) ?? ""); } catch (error) { throw new ErrorHandler("Failed to retrieve data from database", 500); }};

We can generate embeddings for the user's question using the function we created earlier.

Creating the Chat Function

Now that we have everything set up, let's create a function that returns a good response:

export const chat = async (question: string = ""): Promise<string> => { try { const questionEmbedding = await generateVectorEmbedding(question); const contextBodies: string[] = await retrieveByEmbedding( questionEmbedding ); const prompt = ` Context: ${contextBodies.join("\n\n")} User Question: ${question} Answer: `;const response: GenerateContentResponse = await ai.models.generateContent({ model: "gemini-2.0-flash", contents: prompt, config: { systemInstruction: ` You are a helpful assistant for a website that answers user questions based on provided context. `, }, }); return response.text ?? ""; } catch (error) { throw new ErrorHandler("Failed to generate response", 500); }};

Note: Make sure to provide more detailed system instructions for better results!

Handling Conversation History

If you want the AI to remember previous conversations, you can use Gemini's multi-turn conversation feature like this:

const chat = ai.chats.create({ model: "gemini-2.0-flash", history: history: [{ role: "user", parts: [{ text: "Hello" }], }, { role: "model", parts: [{ text: "Great to meet you. What would you like to know?" }], }, ],});const response1 = await chat.sendMessage({ message: "Can you telle me about new features?.", });

Conclusion

Hooray! You now have a chat bot that can answer questions about your business or website. The bot uses information directly from your site to provide relevant, accurate responses to users.

If you want to see the complete code, you can check out my GitHub repository

While you could use frameworks like Langchain if you prefer, the basic flow of RAG applications will be very similar to what we've covered here. Understanding these fundamentals will help you build more sophisticated AI solutions in the future!

Enhance Your React App with Firebase Push Notifications in TypeScript

Samir Tiwari — Wed, 07 Aug 2024 18:41:22 +0000

Push notifications are a must-have feature for your website when you want to keep users in the loop about important events. You can show these notifications either when your website is open (foreground) or even when it's not the active tab in your browser (background). Firebase provides an awesome tool called Cloud Messaging to make this happen. In this blog, well walk through how to add push notifications to a React app.

Getting Started

First, head over to the Firebase Console and create a new project. Once that's done, add a new app to your project by selecting the web option since well be adding notifications to a website. After registering your app, you'll see some code under "Add Firebase SDK" go ahead and copy all that.

Setting Up Firebase in Your React App

Assuming you already have a React app set up, install the Firebase package with:

npm install firebase

Now, create a file called firebase.ts and paste the code you copied from Firebase. You'll also need to import getMessaging from firebase/messaging and pass app to getMessaging. Here's how your firebase.ts file should look:

// firebase.ts
import { initializeApp } from "firebase/app";
import { getMessaging } from "firebase/messaging";

const firebaseConfig = { 
apiKey: "YOUR_VITE_FIREBASE_API_KEY", 
authDomain: "YOUR_VITE_FIREBASE_AUTH_DOMAIN", 
projectId: "YOUR_VITE_FIREBASE_PROJECT_ID", 
storageBucket: "YOUR_VITE_FIREBASE_STORAGE_BUCKET", 
messagingSenderId: "YOUR_VITE_FIREBASE_MESSAGING_SENDER_ID", 
appId: "YOUR_VITE_FIREBASE_APP_ID",
};

export const app = initializeApp(firebaseConfig);
export const messaging = getMessaging(app);

Generating a FCM Token

To send notifications, you need a fcm token. Import getToken from firebase/messaging and create a function, say GenerateToken, in your firebase.ts file. Alternatively, you could make it in a separate file, just remember to export it. You can call this function in App.tsx so the token is generated when the website loads. Inside this function, request notification permission from the browser. If granted, call getToken, which takes messaging and vapidKey as arguments.

To get the vapidKey:

Go to your project in Firebase Console.
Click the settings gear next to "Project Overview" and choose "Project Settings."
Click on "Cloud Messaging."
Under "Web configuration," click "Generate key pair" to get your vapidKey.

Now use that key in getToken inside GenerateToken. Here's how it should look:

// firebase.ts
import { initializeApp } from "firebase/app";
import { getMessaging, getToken } from "firebase/messaging";

const firebaseConfig = { 
apiKey: "YOUR_VITE_FIREBASE_API_KEY", 
authDomain: "YOUR_VITE_FIREBASE_AUTH_DOMAIN", 
projectId: "YOUR_VITE_FIREBASE_PROJECT_ID", 
storageBucket: "YOUR_VITE_FIREBASE_STORAGE_BUCKET", 
messagingSenderId: "YOUR_VITE_FIREBASE_MESSAGING_SENDER_ID", 
appId: "YOUR_VITE_FIREBASE_APP_ID",};

export const app = initializeApp(firebaseConfig);

export const messaging = getMessaging(app);

export const GenerateToken = async () => { 
const permission = await Notification.requestPermission(); 

if (permission === "granted") {
 const token = await getToken(messaging, { 
vapidKey: "YOUR_VITE_FIREBASE_VAPID_KEY", }); 

console.log("Token generated", token); 

 } else if (permission === "denied") { 
   alert("User denied notification permission."); 

   return; 
 }

};

Setting Up the Service Worker

Create a file named firebase-messaging-sw.js inside your public folder. This file handles push notifications when your app is closed or minimized. Since you cant import keys from .env files here, you'll need to provide your keys directly or configure your build process to inject these keys. Here's what firebase-messaging-sw.js should look like:

// Import Firebase scriptsimportScripts("https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js");
importScripts("https://www.gstatic.com/firebasejs/8.10.0/firebase-messaging.js");
// Initialize Firebase with your configuration 

const firebaseConfig = { 
apiKey: "YOUR_VITE_FIREBASE_API_KEY", 
authDomain: "YOUR_VITE_FIREBASE_AUTH_DOMAIN", 
projectId: "YOUR_VITE_FIREBASE_PROJECT_ID", 
storageBucket: "YOUR_VITE_FIREBASE_STORAGE_BUCKET", 
messagingSenderId: "YOUR_VITE_FIREBASE_MESSAGING_SENDER_ID", 
appId: "YOUR_VITE_FIREBASE_APP_ID", 
vapidKey: "YOUR_VITE_FIREBASE_VAPID_KEY",

};

firebase.initializeApp(firebaseConfig);

// Retrieve an instance of Firebase Messaging

const messaging = firebase.messaging();

// Handle background messages

messaging.onBackgroundMessage((payload) => { 
const notificationTitle = payload.notification.title; 
const notificationOptions = { 
body: payload.notification.body, 
}; 
self.registration.showNotification(notificationTitle, notificationOptions);

});

Using the Token in Your App

Import GenerateToken in App.tsx and call it inside useEffect so the token is generated when your website loads. For showing notifications when the website is open (foreground notifications), import onMessage and messaging from firebase/messaging and firebase.ts, respectively. onMessage takes two arguments: messaging and a callback function.

Here's a simple example using react-hot-toast for notifications:

// App.tsx
import { onMessage } from "firebase/messaging";
import { useEffect } from "react";
import toast, { Toaster } from "react-hot-toast";
import "./App.css";
import { GenerateToken, messaging } from "./firebase";
function App() { 

// other codes 

useEffect(() => { 
GenerateToken(); 
onMessage(messaging, (payload) => { 
toast(payload.notification?.body!); 

}); 

}, []); 
return ( <> {/* other code */} <Toaster /> </> );
}

Testing Notifications

To test, console log the token and copy it. Then, follow these steps:

In the Firebase Console, scroll down and click "See all Firebase features."
Find and click on "Cloud Messaging."
Click "Create your first campaign" > "Firebase Notification messages," then create.
Fill out the form and click "Send test message."
Paste the token where it says "Add an FCM registration token" and click the "+" sign.
Click the "Test" button.

If your website is in the active tab, you'll see a toast notification; otherwise, you'll get a push notification. Make sure notifications are enabled in your system settings.

Adding push notifications to your React app using Firebase Cloud Messaging is a powerful way to keep your users engaged and informed. By following the steps outlined in this guide, you can seamlessly integrate this feature into your application, ensuring that users receive timely updates whether they are actively using your app or not. With Firebase's robust and easy-to-use tools, setting up push notifications becomes a straightforward process, enhancing the overall user experience and keeping your audience connected. Happy coding!

5 Basic VS Code Extensions You Must Use

Samir Tiwari — Mon, 05 Aug 2024 07:53:16 +0000

VS Code is one of the most popular IDEs that coders use these days. With VS Code, you can add various extensions to make your coding journey simpler and faster. There are tons of extensions available, but today, I'll discuss five basic VS Code extensions that can greatly enhance your coding experience.

1. Code Spell Checker

When coding, there are many things to keep in mind, and spelling is one of them. While spelling might not seem like a big deal in coding (since you'll get errors if you misspell reserved words), it's important when pushing code to production. Misspelled text can raise red flags, so the Code Spell Checker extension is a great choice to help you catch those errors before they become problems.

2. Auto Rename Tag

If you're a web developer, you'll often work with HTML tags. Sometimes, you might want to change tags for semantic reasons - for example, switching a <div> to a <footer>. Manually changing both the opening and closing tags can be a hassle, especially if you have to do it multiple times. Auto Rename Tag automatically updates the corresponding opening or closing tag when you rename one, saving you time and effort.

3. ES7 React/Redux/GraphQL/React-Native Snippets

For React developers, this extension is a must-have. It helps you write React code faster by providing snippets of commonly used code. For instance, typing rafce in a .jsx or .tsx file will generate a basic React component. This can significantly speed up your development process.

4. Prettier

While Prettier doesn't directly help with coding, it formats your code, making it more readable and visually appealing. Writing code can get messy, and Prettier helps you keep it tidy. I personally recommend configuring Prettier to format your code automatically when you save it, so everything stays neat without extra effort.

5. Material Icon Theme

Material Icon Theme doesn't directly assist with coding either, but it makes your project look more organized in VS Code by assigning icons to folders. It gives each folder an icon based on its name, helping you quickly identify folder contents and making your workspace visually appealing.