DEV Community: INDRANIL MAITI

Stack and Heap: Memory in Javascript

INDRANIL MAITI — Sat, 21 Jun 2025 13:08:11 +0000

The concept of memory is very important in Javascript and today we will deep dive into this. At the end this concept of memory allocation will be helpful to understand another important concept of serialization and deserialization.
There are two types of memory allocation one is Stack and another is Heap memory. In JavaScript, primitive values (such as numbers, strings, booleans, etc.) are stored in the stack, while objects (such as arrays, objects etc.) are stored in the heap.

Primitive values are immutable and have a fixed size, so they can be easily stored and accessed in the stack. Objects are mutable and have a variable size, so they need to be stored and accessed in the heap, which is more flexible but also slower.
The main difference between stack and heap memory is stack memory is fixed and can't grow over but on the other hand heap memory can grow. For example, if you write an array or object the length of the array can be of any value. It can be 5 or 50 i.e. it can grow.
Let's see some example to get e more in depth understanding.

let fname = "John"; // string literal, stored in stack memory
let lname = "Doe"; // string literal, stored in stack memory

let newfname = fname

console.log(`First Name: ${fname}, Last Name: ${lname}`); // Accessing string literals from stack memory
console.log(`New First Name: ${newfname}`); // Accessing new variable from stack memory

//output
First Name: John, Last Name: Doe
New First Name: John

Here, we have created a variable fname and assigned a value to it. Then we created another variable newfname and made it equal to fname.
Let's play with this.

let fname = "John"; // string literal, stored in stack memory
let lname = "Doe"; // string literal, stored in stack memory

let newfname = fname

console.log(`First Name: ${fname}, Last Name: ${lname}`); // Accessing string literals from stack memory
console.log(`New First Name: ${newfname}`); // Accessing new variable from stack memory

newfname = "Jane"; // Reassigning newfname, now it points to a new string literal in stack memory
console.log(`Updated First Name: ${fname}`); // Accessing original fname
console.log(`Updated New First Name: ${newfname}`); // Accessing updated newfname

//output
First Name: John, Last Name: Doe
New First Name: John
Updated First Name: John
Updated New First Name: Jane

Now we have made some changes to newfname and print the variables. As expected the newfname is different than fname
This is stack memory where a seperate memory has been allocated to variables and a change in one varible does not affect the other.

Let's go one step furthur and see another example

let person = {
    fname: "John",
    lname: "Doe"
};

let newPerson = person; // newPerson references the same object in heap memory
newPerson.fname = "Jane"; // Modifying the object through newPerson
newPerson.lname = "Smith"; // Modifying the object through newPerson

console.log(`Person First Name: ${person.fname}, Last Name: ${person.lname}`); // Accessing modified object
console.log(`New Person First Name: ${newPerson.fname}, Last Name: ${newPerson.lname}`); // Accessing modified object through newPerson

//output
Person First Name: Jane, Last Name: Smith
New Person First Name: Jane, Last Name: Smith

Like previous example, I we have created an object here person and assigned the same to newperson. But to the most surprise when we changed the newPerson the changes has been done to person variable too which is quite different than previous case!
The answer is heap memory. All the variables that can grow like arrays, objects are stored in heap memory and the address of the variable is stored in the stack memory. As a result person is actually the address from the memory. Actually for this case when you do let newPerson = person the address of the person have been assigned to newPerson and eventually both person and newperson points to same variable thorugh the same address in the heap memory. As a result when you make changes in one variable the other one changes.

I hope the difference of stack and heap memory is clear now. Now we will deep dive into another interesting topic.

Deep Copy and Shallow copy

In the previous example with person and newPerson, we saw that when you assign one object to another, any change in one reflects in the other. This is because both variables point to the same address in the heap memory, not separate ones.

That’s called a shallow copy — where only the reference (i.e., memory address) is copied, not the actual object.

Let’s make it more interesting with another example:

let person1 = {
    fname: "John",
    lname: "Doe",
    details: {
        age: 30,
        city: "New York"
    }
};

let person2 = person1; // shallow copy

person2.fname = "Jane";
person2.details.age = 25;

console.log(person1);
console.log(person2);

//output
{
  fname: 'Jane',
  lname: 'Doe',
  details: { age: 25, city: 'New York' }
}
{
  fname: 'Jane',
  lname: 'Doe',
  details: { age: 25, city: 'New York' }
}

As you can see, changing person2 also changes person1— even the nested property details.age. That’s because both person1and person2refer to the same object in heap memory.

A Better Way? Using Object Spread ...

let person2 = { ...person1 };

This is also a shallow copy. It only creates a new top-level object, but nested objects are still shared via reference.

So, modifying a nested property will still affect the original:

let person2 = { ...person1 };
person2.details.city = "Chicago";

console.log(person1.details.city); // Chicago

Again, same problem — nested values are not copied deeply.

Enter Deep Copy — the Reliable Way

To really copy the entire structure, including nested objects, we need a deep copy.

One simple way (especially for objects with no functions or special types) is to use JSON.stringify() and JSON.parse():

let person1String = JSON.stringify(person1);
let person2 = JSON.parse(person1String); // Deep copy

This method works because:

JSON.stringify() turns your object into a string (i.e., serializes it)

JSON.parse() creates a brand-new object from that string (i.e., deserializes it)

Now, person2 is completely separate from person1.

person2.details.city = "Los Angeles";

console.log(person1); 
// Original object remains unchanged

console.log(person2); 
// Shows updated city

//output
{
  fname: 'John',
  lname: 'Doe',
  details: { age: 30, city: 'New York' }
}
{
  fname: 'John',
  lname: 'Doe',
  details: { age: 30, city: 'Los Angeles' }
}

So, What’s Happening Here?
This is where serialization and deserialization comes in.

Serialization means converting your object into a string format (JSON.stringify()), which can be stored or sent over a network.

Deserialization means converting that string back into an object (JSON.parse()), often creating a new one in memory.

This concept is not only useful for making deep copies, but also essential when working with:

APIs and network requests
Local storage in the browser
Sending or saving data

Wrapping It Up
Let’s quickly summarize what we’ve learned:

Stack memory is used for primitive types (string, number, boolean), and every variable gets its own copy.

Heap memory is used for objects (arrays, objects, functions), and variables store references (addresses).

Shallow copy copies the reference, not the actual object.

Deep copy duplicates the entire object structure — including nested objects — often using JSON.stringify() and JSON.parse().

Serialization and deserialization are powerful tools not just for copying, but for transmitting and storing complex data.

Understanding how memory works in JavaScript can save you from confusing bugs and give you a solid foundation for working with real-world apps.

Thanks for reading! 🚀

🤖How My AI Agent Transformed Video Research from Hours to Minutes🤯

INDRANIL MAITI — Wed, 11 Jun 2025 09:29:45 +0000

I find it very hard to get proper tags, or descriptions when uploading my videos on YouTube. There is an option to use ChatGPT but I want to check it more exclusively in a particular niche.

I thought let's build an AI agent that will analyze 100s of videos in the AI niche and suggest metadata, tags, and description for me. Therefore I built an AI agent to do these tasks for me.
If you prefer to watch a video than reading a blog here it is

I will be using NebiusAI for LLM integration and CrewAI for agent handling. I have written a simpler version on how to build an AI agent using these in my previous article.
Here is the link : https://dev.to/indraphoton/how-to-build-a-simple-ai-agent-using-crewai-and-nebiusai-22mk

So let's get started

Installation

At the very first step, you need to install crewai tools for this. We will be using some custom tools built by CrewAI to scrap the youtube data and write an analysis.

pip install 'crewai[tools]'

LLM Integration

Next we have to bring the LLM for our work. We will be using Nebius AI studio for this purpose. You will also need to have NEBIUS_API_KEY from Nebius to use the LLM model. You need to signup first and create an API key there. Don't forget to put your API key in the environment variable (.env)

import os
from dotenv import load_dotenv
load_dotenv()

default_llm=LLM(
        model="openai/meta-llama/Meta-Llama-3.1-70B-Instruct",
        base_url="https://api.studio.nebius.com/v1/",
        api_key=os.getenv("NEBIUS_API_KEY")
)

Agent Building

After integrating the LLM model, we need to create the agent for data handling and its analysis. We will build two agent here one will bring the data and the other one will write the report for me. For this we will use YoutubeVideoSearchTool and YoutubeChannelSearchTool from crewAI tool here.

from crewai import Agent, Task, LLM
from crewai import Crew, Process
from crewai_tools import SerperDevTool, YoutubeVideoSearchTool, YoutubeChannelSearchTool
#agent 1
researcher = Agent(
    role="youtube video details e.g. tiltle, description, tags, channel analysis",
    goal="Uncover the hidden tags, title, description, and channel analysis of YouTube videos in a specific niche.",    
    backstory="You are an expert in YouTube video analysis, specializing in extracting detailed metadata and insights from videos.",
    tools=[YoutubeVideoSearchTool(), YoutubeChannelSearchTool()],
    llm=default_llm
)

#agent 2
writer = Agent(
    role="Report Writer",
    goal="Write a compelling report on the YouTube video analysis findings focusing on numbers views tags title, description, and channel " \
    "analysis. Try to find the most popular videos in the niche and its success factors. write in a professional tone, to the point, "
    "and with a focus on actionable insights. Use bullet points for clarity. focus on numbers.",
    verbose=True,
    llm=default_llm,
    backstory="You excel at translating complex data into readable content, focusing on actionable insights and clarity.",
    tools=[]
)

Assign the task for each agent

Once the agent is built we need to assign the task to each agent. Here is the step

research_task = Task(
    description="Research the successful YouTube videos in the niche of AI agents, focusing on their tags, titles, descriptions, and channel analysis.",
    expected_output="A report summarizing key insights from the YouTube videos, including tags, titles, descriptions, and channel analysis.",
    agent=researcher  # Assign the researcher agent
)

write_task = Task(
    description="Write a detailed report based on the YouTube video analysis findings, focusing on numbers views tags title, description, and channel analysis.",
    expected_output="An engaging report on the YouTube video analysis findings, highlighting key metrics and insights.",
    agent=writer,  # Assign the writer agent
    context=[research_task]  # Use research task output as context
)

Instantiate the agent crew

We have everything set up. This is time to create the agent instance so that it starts to give answer when asked. The process can be sequential or Hierarchical.

crew = Crew(
    agents=[researcher, writer],
    tasks=[research_task, write_task],
    process=Process.sequential  # The agents work in sequence
)
# Execute the crew and capture the result
result = crew.kickoff(inputs={"topic": "AI agents in YouTube videos"})

You are done. Here is the output.

You will get the full code here,
Today we have built the most simple AI agent using crewAI and NebiusAI. You can use this idea to build some other applications. Let me know what ideas you are building, share your experience here.

All About Functions in Javascript

INDRANIL MAITI — Mon, 09 Jun 2025 08:41:49 +0000

Functions are one of the main fundamental building blocks of Javascript. These are necessary for building web applications. Before going into details, let us have some motivation.

Motivation

In our daily life, certain tasks are handled by specific people who specialize in them. For example, when you need a piece of furniture, you go to a carpenter. In the same way, in web applications, functions are created to handle specific tasks.

Let’s say in your application you need to access user data—like their username or subscription status—at multiple places. You have two choices: either you write the same logic every single time, or you write it once as a function and simply call that function wherever it's needed.

Clearly, the second option is a game-changer, right?
It not only saves you from repeating code but also gives your application a neat and modular structure.

Don’t worry if this feels a bit new—we’ll make it clearer as we go deeper into the topic!

Structure of a Function

As we have understood from the previous section function is a set of instructions that performs a task. There is also a superpower to function that it can take some inputs which it processes through the set of instructions you have given and gives us the output.
Let us have an example, you are looking to build a function that calculates the total price of the customer's cart before checkout. So you want a simple addition of prices (this is the task of the function). But to perform this task, you need to provide the amount as input of the function. These are called parameters.
Let us see an example,

function calculateTotal(prices) {
  let total = 0;
  for (let i = 0; i < prices.length; i++) {
    total += prices[i];
  }
  return total;
}

A function definition consists of the function keyword followed by
- The name of the function. Here it is calculateTotal
- A list of parameters to the function, enclosed in parentheses and separated by commas. Here it is prices
- The JavaScript statements that define the function, enclosed in curly braces, { /* … */ }. Here it is let total = 0; for (let i = 0; i < prices.length; i++) { total += prices[i]; } return total;
An important note: Generally there should be an return statement at the end of the function which will be the function's output. Also, a function can return another function as well!

How to Use the function

This is pretty simple. Just Call the function by its name along with the parameters.

const cart = [29.99, 15.50, 9.99];
const totalPrice = calculateTotal(cart)
console.log(totalPrice)

Function Expression

The above way of representing the function is generally known as Function Declaration. There is another kind of representation of functions which is known as Function Expression. The representation in this case is

const calculateTotal = function (prices) {
  let total = 0;
  for (let i = 0; i < prices.length; i++) {
    total += prices[i];
  }
  return total;
}

The main difference here is you can omit the name of the function.

Why Use Function Expressions

1. Callbacks & Event Handlers
Use Case: Responding to user actions like clicking a button.You can define the logic inline without needing a separate named function.

document.getElementById("subscribeBtn").addEventListener("click", function () {
  alert("Thank you for subscribing!");
});

2. Defining Methods Inside Objects
Use Case: Creating an object with methods for business logic. Method is defined inline inside the object, making the structure clean and readable.

const cart = {
  items: [],
  addItem: function (item) {
    this.items.push(item);
    console.log(`${item} added to cart.`);
  },
};
cart.addItem("T-shirt"); // T-shirt added to cart.

3. Conditional or Dynamic Logic
Use Case: Define different functions based on user role or environment. Assign function dynamically based on condition.

const user = { isAdmin: true };

const accessControl = user.isAdmin
  ? function () {
      console.log("Access granted to admin panel.");
    }
  : function () {
      console.log("Access denied.");
    };

accessControl(); // Output depends on user role

Arrow Function

There is a compact alternative to Function Expressions in modern day web applications. This is known as Arrow Function. The most common syntax is

(params) => {
  statements
}
//Example
(a, b) => {
  return a + b + 100;
}

If the body has statements, the braces are required — and so is the return keyword. The braces can only be omitted if the function directly returns an expression.

(a,b) => a+b+100

Lexical Scope and Closure

There is one more important concept related to functions in Javascript i.e. Lexical Scope and Closure. Lexical scope is known as how the variables defined in the function can be accessed based on the placement of the variable. Let us see an example to understand this better

function outer() {
  const message = "Hello, ";

  function inner(name) {
    console.log(message + name);
  }

  return inner;
}

const greet = outer();
greet("Alice"); // Outputs: Hello, Alice

Here, message variable is defined in the outer function and outer function also has another function defined as inner. Look outer function is returning the function inner.
Here, inner function has access to the variable message though it has been defined outside inner function. This is because javascript uses lexical scoping means it looks for variables where the function was defined. Here inner function is inside the scope of outer function. On the other hand outer function does not have any access to any variable defined in inner function because any variable defined inner function is not inside the scope of outer fucntion.

On the other hand, a closure is closely related to lexical scope. It occurs when a function “remembers” the variables from its outer lexical scope, even after that outer function has finished executing. This behavior allows functions to maintain access to their parent’s variables, even if they would normally go out of scope.
Let's see an example

function init() {
  var name = "Indra";
  function displayName() {
    console.log(name); 
  }
  displayName();
}
let res = init();
res() // output: Indra

Look very carefully here, let res = init() in this line init function has been executed so you might think the variable name does not exist anymore and we might get an error while calling the function res() in the next line. Here comes the context of closure. In JS when you call the function init() in the res variable not only the displayName function comes but it comes along with the lexical scope of init function too.

I hope this helps you in understanding the concept of Function in Javascript.

How to Build a simple AI agent using crewAI and NebiusAI

INDRANIL MAITI — Thu, 05 Jun 2025 08:35:04 +0000

Today I will build a simple AI agent using CrewAI and NebiusAI. CrewAI is a growing platform for multiagent automation. With NebiusAI it is very simple to build an AI agent that will answer user's query. We will build an AI agent today that will answer. THe goal is to understand first how CrewAI works in a most simplest easy to understand way.
In case you prefer to watch youtube video than reading blog you can check here

Installations

You need to install crewai to utilize the ai agent by them.

pip install crewai python-dotenv

You will also need to have NEBIUS_API_KEY from Nebius to use the LLM model. You need to signup first and create an API key there. Don't forget to put your API key in the environment variable (.env)

LLM Model

We need to bring the LLM models first using nebius.

import os
from dotenv import load_dotenv
load_dotenv()

default_llm=LLM(
        model="openai/meta-llama/Meta-Llama-3.1-70B-Instruct",
        base_url="https://api.studio.nebius.com/v1/",
        api_key=os.getenv("NEBIUS_API_KEY")
)

Create an Agent

Once we have brought the LLM model now we can create the agent using crewAI. You have to set role, goal and backstory for the agent to get better output. Try playing with these and check how different are the results.

from crewai import Agent, Task,LLM
researcher = Agent(
  role='Senior Researcher',
  goal='Discover groundbreaking technologies in quantum computing',
  verbose=True,
  llm=default_llm,
  backstory='A curious mind fascinated by cutting-edge innovation and the potential to change the world, you know everything about quantum computing and its applications.',
)

Set the task for the agent

We have created our agent and now it's the time to setup tasks for the agent.

# Task for the researcher
research_task = Task(
  description='Identify the next big trend quantum computing will enable',
  expected_output='5 paragraphs on the future of quantum computing and its potential applications',
  agent=researcher  # Assigning the task to the researcher
)

Instantiate the agent crew

We have everything set up. This is time to create the agent instance so that it starts to give answer when asked. The process can be sequential or parallel. In this case we will use sequential but if your project cotntains multi-agent and needs parallel work you have to choose parallel in process=Process.sequential. We will see such examples next day.

# Instantiate your crew
tech_crew = Crew(
  agents=[researcher],
  tasks=[research_task],
  process=Process.sequential  # Tasks will be executed one after the other
)
# Begin the task execution
tech_crew.kickoff()

Now once you run this file you will get the output.

You will get the full code here,
Today we have built the most simple AI agent using crewAI and NebiusAI. In the next post we will see how multiple agents can work and also how we can integrate tools like google search for building more upgraded AI agent.

I Built My First SaaS — Here’s The Mistakes I did

INDRANIL MAITI — Wed, 04 Jun 2025 14:47:15 +0000

I have recently launched my first ever SaaS, ToonyTalesWorld where user can create colourful personalized storybooks for kids and feature them as hero in their own story.
CHeck out my project on Peerlist Launchpad. Check this out

This is my first ever SaaS so I made too many mistakes and it took around 3 months for me to finish this as a product. The mistakes are silly but were unavoidable as I did not have any experience. But before mentioning them I also want to tell you this is an incredible journey my friend. Once you come out from the project building mindset to product building mindset you will feel the difference. As a solo developer I enjoyed every part of it from buying domains, marketing, to pricing selection this was an incredible journey.

So, without wasting more time here are the mistakes

Not Enough Planning

I did not plan enough before the start of the project and from the day one I started coding. After spending one month I understood the need of PRD. Before starting any project spend enough time on PRD and have clear planning of your different phase development. It is good to build phase by phase and take opinions from your user. Don't try to overdo and make everything perfect before launch. It will eventually be perfect on the way. At this stage you should have clear answer of two questions 1. What you are building 2. For whom you are building

Your Competitions

PLease do spend some time on market research before building a product. YOu will also get an opportunity to validate your idea, pricing structure your competitors are using, and these will save a lot of time later on. i had to spend an enormous amount of time later stage which should have been done earlier. Don't do this mistake

Techstack and cost analysis

in your local development you may not need some professional services for an example mailing services but in production you need such services and it also comes with a cost. So apart from the domain and server there will be more cost associated with your product. research about these services finalize the tiers you will use and make the pricing tiers according to your costs otherwise it will be so much frustrating at the end.

Hype Yourself

In today's world, you have to sell yourself. PLan your marketing and start engaging with people before launching it.

These were my key learnings from my first SaaS. At the end don't forget to check out ToonyTalesWorld at peerlist and please do a upvote if you like the project.

Step-by-Step: Build a RAG Chatbot That Understands Your PDFs

INDRANIL MAITI — Mon, 26 May 2025 08:45:26 +0000

Today, we will build a simple chatbot that answers based on your pdf. We will use Langchain and Openai. The goal is to learn the basics of a simple RAG application. Before beginning lets understand the steps. For building a basic RAG application you need to understand the 5 steps.

Loading Documents : First you need to load your data be it PDF, or CSV, excel, or website.
Split : You need to then split your data. This is needed because every LLM has its own context window. So if your data is big you can not give all the data at once to LLM to get preferred output.
Embeddings: To store the data in the database we need to make embeddings.
Store : As the embeddings is done final work is to store it in the database.

Retrieval : Now, as the user asks some question to LLM, relevant chunks of data will be retrieved from the database and will be given to the LLM context. LLM will give the output based on chunks it has received.

Without wasting any time let's get started.

Installation

We need to install the following packages. I will tell about the need of these packages in the subsequent sections.

%pip install -qU pypdf
%pip install -qU langchain-openai
%pip install -qU langchain-qdrant
%pip install langchain_text_splitters

We need a OPENAI_API_KEY as well. So if you do not have please create it. After creating it we have to load the key from the .env file.

import os
from dotenv import load_dotenv
load_dotenv()

OPENAI_API_KEY = os.getenv("OPENAI_API_KEY")

Load your PDF

To make a chatbot based on your pdf we have to load the pdf first and for this we will use PyPDFLoader from langchain_community

from langchain_community.document_loaders import PyPDFLoader

file_path = "YOUR_FILE_PATH"

loader = PyPDFLoader(file_path)
pages = []
async for page in loader.alazy_load():
    pages.append(page)

Split the text

As we have loaded the PDF successfully, we now have to split the text for breaking it into chunks. Later the relevant chunks will be taken based on the user's query. We have used RecursiveCharacterTextSplitter but there are other options as well. Read here. You can choose different splitters and watch the performance.

from langchain.text_splitter import RecursiveCharacterTextSplitter
text_splitter  = RecursiveCharacterTextSplitter(
    chunk_size=1000,
    chunk_overlap=200,
)

split_docs = text_splitter.split_documents(documents = pages)

Chunk size defines how much information it should contain. You can change and play to know what's the correct number to get correct responses. Chunk overlap means a chunk will start not just after the end of the previous chunk but it will contain some information from previous chunk. This helps to maintain the context of the PDF.

Embeddings

Next step is to make embeddings from the chunks. We will use OpenAI embeddings here from langchain. You can choose any other embeddings as well. Check here for other embeddings models.

from langchain_openai import OpenAIEmbeddings
embeddings = OpenAIEmbeddings(
    model = "text-embedding-3-large",
    api_key = os.environ["OPENAI_API_KEY"],
)

We have created our embedder and will use this while uploading the chunks into database.

Store chunks in the Database

Next step is to store the chunks in the database. For this we will use QdrantDB from langchain. This is open source and easy to use. You need to have docker installed in your local computer and you can run it very easily.
After docker installation simply run a docker-compose.yml file to run the qdrantdb. Here is the .yml file.

services:
  qdrant:
    image: qdrant/qdrant
    ports:
      - 6333:6333

Once it runs go to http://localhost:6333/dashboard to check if qdrant has run successfully or not. If you see the following then its working. for your case there should not be any db store.

Keep the docker running as it is and let's move on to the next step. So far we have created the chunks.
First we have to create a client to connect with the database.

from langchain_qdrant import QdrantVectorStore
from qdrant_client import QdrantClient
from qdrant_client.models import Distance, VectorParams
# Create the client
client = QdrantClient(url="http://localhost:6333")

# Create the collection with the correct embedding dimension
client.create_collection(
    collection_name="visual_instruction_final",
    vectors_config=VectorParams(
        size=3072,  # Your embedding dimension
        distance=Distance.COSINE
    )
)

Next we will use this client to upload the chunks into database.

# Now create the vector store using the existing collection
vector_store = QdrantVectorStore(
    client=client,  # Use the client we created in Step 2
    collection_name="visual_instruction_final",
    embedding=embeddings
)

# Add your documents
vector_store.add_documents(split_docs)

Once this is successful you can check the dashboard again by refreshing it and you will see the datas stored there.

Information Retrieval

Now the most fun part, is to retrieve the data based on user's query. The most important part now you can imagine, based on the user's query the most important chunks will be retrieved from the database and provided to the LLM models. LLM models will then prepare the response.
Here is how you can write the retriever.

from langchain_qdrant import QdrantVectorStore

# Create retriever without passing the client object
retriever = QdrantVectorStore.from_existing_collection(
    collection_name="visual_instruction_final",
    embedding=embeddings,
    url="http://localhost:6333"  # Use URL instead of client
)

# Perform similarity search
search_result = retriever.similarity_search("What is written in introduction?", k=3)

We have done retriver based on similarity search but there are other options as well that you can change and check the performances.
So we are all ready. Now on to the last and final step i.e. prepare the chatbot.
We will use OpenAI from Langchain.

from langchain_openai import ChatOpenAI
from langchain.schema import HumanMessage, SystemMessage, AIMessage

# Create the chat model
chat_model = ChatOpenAI(
    model="gpt-3.5-turbo",  # or "gpt-4" if you have access
    temperature=0.7,        # Controls randomness (0.0 = deterministic, 1.0 = very random)
    max_tokens=1000,        # Maximum tokens in response
    streaming=False         # Set to True for streaming responses
)

def rag_chat(question, k=3):
    # Step 1: Retrieve relevant documents
    relevant_docs = retriever.similarity_search(question, k=k)

    # Step 2: Combine retrieved content
    context = "\n\n".join([doc.page_content for doc in relevant_docs])

    # Step 3: Create messages directly (simpler approach)
    system_message = f"""You are a helpful AI assistant. Use the following context to answer the user's question. 
If you can't find the answer in the context, say so clearly.

Context:
{context}"""

    messages = [
        SystemMessage(content=system_message),
        HumanMessage(content=question)
    ]

    # Step 4: Get response from chat model
    response = chat_model.invoke(messages)

    return {
        "answer": response.content,
        "sources": relevant_docs,
        "context_length": len(context)
    }

# Test the corrected RAG chatbot
question = "What is written in introduction?"
result = rag_chat(question)

print("Question:", question)
print("\nAnswer:", result["answer"])
print(f"\nContext length: {result['context_length']} characters")
print(f"Used {len(result['sources'])} source documents")

Last few lines have been added here to check the retrieved chunks.

Once you run this, you will get the response from the LLM. Now you can play with different options and try to get a better response. The main goal here was to introduce the concept step by step and how to use them. Hope this clears. Happy building..
Share what you are building.
Connect me : Twitter

Understanding NodeJS STREAMS : Reading the Data in chunks (Part I)

INDRANIL MAITI — Tue, 01 Apr 2025 16:06:26 +0000

Streams in NodeJS are very effective way to send data from a source (or a network) to your browser bit-by-bit (or lets say chunks).

What does this mean?
Suppose you have two buckets, bucket A is filled with water and the other bucket is empty. You have to send the water from bucket A to bucket B.
There are two ways to do this.

You can take another empty bucket C, take the water from bucket A and filled the bucket B
Second option is take a pipe and make a connection between bucket A and B. The water will flow gradually.

The second option is exactly the same what streams mean.
Suppose you have data (text, video, etc) received from the server and you want to show the data in your frontend.

So to cut the long story short,
With the Streams API, you can start processing raw data with JavaScript bit by bit, as soon as it is available, without needing to generate a buffer, string, or blob

Usecases in real life application

Video streaming services
Large file uploads/downloads
Real-time data dashboards
Chat applications
Audio processing applications

Enough motivation right? Lets move into technicals. Today I will talk about reading data in chunks and in the next day I will write about how you can process and use the data in chunks.

Using readable streams

programmatically reading and manipulating streams of data received over the network, chunk by chunk

Lets write code .....

// Fetch the original image
fetch("https://images.pexels.com/photos/1229356/pexels-photo-1229356.jpeg?auto=compress&cs=tinysrgb&w=600")
  // Retrieve its body as ReadableStream
  .then((response) => console.log(response.body))
  .catch((err) => console.log(err))

We have made a request to access data from a specific URL. In this case this is an image.
Output:
ReadableStream { locked: false, state: 'readable', supportsBYOB: true }
Let me break it down what this output means

This is showing you the properties of the ReadableStream object that represents the image data:

locked: false - The stream is not currently locked by a reader. When a stream is locked, it means a reader has exclusive access to it. Since your stream is unlocked, you could still attach a reader to consume its data.
state: 'readable' - The stream is in a "readable" state, which means it contains data that can be read. Other possible states include "closed" (no more data available) and "errored" (an error occurred).
supportsBYOB: true - This indicates that the stream supports "Bring Your Own Buffer" mode, which is an optimization that allows you to provide your own buffer for the stream to fill, reducing memory allocations.

What we have seen the "response.body" is an ReadableStream object but not the actual data i.e. the image. To get the the data we have to consume the stream by using a reader.

fetch("https://images.pexels.com/photos/1229356/pexels-photo-1229356.jpeg?auto=compress&cs=tinysrgb&w=600")
  .then((response) => response.body)
    .then((body) => {
        const reader = body.getReader()
        console.log(reader)})
  .catch((err) => console.log(err))

We have attached a reader to our response which we received to read the data here.
Output:

ReadableStreamDefaultReader {
  stream: ReadableStream { locked: true, state: 'readable', supportsBYOB: true },
  readRequests: 0,
  close: Promise { <pending> }
}

Invoking this method creates a reader and locks it to the stream — no other reader may read this stream until this reader is released.

stream: This points back to the original ReadableStream from which the reader was created. Notice that now the stream has locked: true (whereas before it was false). This is because once you get a reader, it locks the stream for exclusive access.
readRequests: This shows the number of pending read requests (currently 0). When you call reader.read(), this count would increment until the data is delivered.
close: This is a Promise that will resolve when the stream is closed, either because all data was consumed or because the stream was explicitly canceled

Next step is to attach read() method to read data chunks out of the stream. This method returns a promise.

reader.read().then(({ done, value }) => {
  /* … */
});

The results can be one of three different types:

If a chunk is available to read, the promise will be fulfilled with an object of the form { value: theChunk, done: false }.
If the stream becomes closed, the promise will be fulfilled with an object of the form { value: undefined, done: true }.
If the stream becomes errored, the promise will be rejected with the relevant error.

So now we have understood how the .read() works. Lets write down the code to read the full data in chunks.
First we will create a function to read all chunks from a reader.

// Function to read all chunks from a reader
function readAllChunks(reader) {
    const chunks = [];
    let totalSize = 0;

    // Create a recursive function to read chunks
    function pump() {
      return reader.read().then(({ done, value }) => {
        if (done) {
          console.log("Stream complete. Total data size:", totalSize, "bytes");
          return chunks;
        }

        // Store the chunk
        chunks.push(value);
        totalSize += value.length;
        console.log("Received chunk of data, size:", value.length, "bytes");

        // Continue reading
        return pump();
      });
    }

    // Start the reading process
    return pump();
  }

Let me break this function

The readAllChunks function implements a technique for consuming a ReadableStream completely using recursion.

chunks: An array that will store all the Uint8Array chunks read from the stream
totalSize: A counter to track the total number of bytes read
The pump() function: This inner function implements the recursive reading pattern. It calls reader.read(), which returns a Promise that resolves to an object with done and value properties. Each call reads the next available chunk from the stream
When done is true, it means the stream has no more data
Each chunk (in value) is a Uint8Array of binary data It's added to the chunks array and its length is added to the total The size of each chunk is logged for monitoring
return pump(): This recursively calls pump() to read the next chunk The Promise chain ensures each read completes before the next one starts This continues until done becomes true

Return Value: A Promise that resolves to an array of Uint8Array chunks containing all the data from the stream.

We have written a function to recursively read data by chunks. Let see how we can incorporate this.

// Function to read all chunks from a reader
function readAllChunks(reader) {
    const chunks = [];
    let totalSize = 0;

    // Create a recursive function to read chunks
    function pump() {
      return reader.read().then(({ done, value }) => {
        if (done) {
          console.log("Stream complete. Total data size:", totalSize, "bytes");
          return chunks;
        }

        // Store the chunk
        chunks.push(value);
        totalSize += value.length;
        console.log("Received chunk of data, size:", value.length, "bytes");

        // Continue reading
        return pump();
      });
    }

    // Start the reading process
    return pump();
  }



/// Usage in our fetch example:
fetch("https://images.pexels.com/photos/1229356/pexels-photo-1229356.jpeg?auto=compress&cs=tinysrgb&w=600")
.then(response => {
  const reader = response.body.getReader();
  return readAllChunks(reader);
})
.then(chunks => {
  // Combine all chunks into a single Uint8Array
  const totalLength = chunks.reduce((total, chunk) => total + chunk.length, 0);
  const combinedData = new Uint8Array(totalLength); // This creates a new Uint8Array with exactly the right size to hold all data

//For each chunk, we copy its data into the combined array and then advance the position. This builds a single contiguous array from all the separate chunks
  let position = 0;
  for (const chunk of chunks) {
    combinedData.set(chunk, position); // Uint8Array.set() copies values from one array to another at a specific position
    position += chunk.length;
  }

  console.log("Complete image data received:", combinedData.length, "bytes");

  // Now you can work with the full image data
  // For example, convert to base64 for display 


  return combinedData;
})
.catch(err => console.error("Error reading stream:", err));

Ouput is:

You can see how the data is read chunk by chunk.

What is exactly is happening finally here?

-The fetch() call returns a Promise that resolves to a Response object
From that Response, we extract the body ReadableStream and create a reader. We pass this reader to the readAllChunks function we discussed earlier. This returns a Promise that resolves to an array of Uint8Array chunks when the stream is fully read

Finally all of your data is read. Now you can process it furthur for your use. We will see next week.

So what we have understood today?

Fetch a resource
Read all chunks from its stream
Combine those chunks into a complete dataset
Process the complete data as needed

Thanks. Happy Reading...
Don't forget to share your thoughts....

Quick Cookie Management Tips

INDRANIL MAITI — Wed, 29 Jan 2025 14:04:01 +0000

Hey there, fellow developers! 👋
You know what's funny? I recently hit a roadblock with cookie management in my recent project

e-commerce-smoky-omega.vercel.app

, After figuring it out, I thought - "Hey, others might run into this too!" So here I am, sharing what I learned about making cookies work smarter, not harder.
Let me show you how to level up your cookie game!

What is cookie

A cookie (also known as a web cookie or browser cookie) is a small piece of data a server sends to a user's web browser. The browser may store cookies, create new cookies, modify existing ones, and send them back to the same server with later requests.
-- This is primarily used for session management, personalization and tracking.

The Cookie Basics

Think of cookies as small data packets your server sends to users' browsers. They're super handy for things like keeping users logged in or remembering their preferences.

Server-Side Cookie Configuration:

const options = {
        httpOnly: true,
        secure: true,
        sameSite: "none"
    }

    return res
    .status(200)
    .cookie("accessToken", accessToken, options)
    .cookie("refreshToken", refreshToken, options)
    .json(
        new Apiresponse(
            200, 
            {
                user: loggedInUser
            },
            "User logged In Successfully"
        )
    )

Here is a simple example of how you can send cookies from your server to browser.
Here, I have set two cookies in the response:

An access token for short-term authentication
A refresh token for getting new access tokens

In the 'options' I have taken httpOnly, secure, sameSite. These are essential options to set your cookie parameters and security.
These options create secure cookies:

httpOnly: true prevents client-side JavaScript from accessing the cookie, protecting against XSS attacks
secure: true ensures cookies are only transmitted over HTTPS
sameSite: "none" allows the cookie to be sent in cross-origin requests, which is needed for your frontend-backend communication
I was actually having problems in this sameSite parameter

Client-Side Cookie Handling:

const loginResponse = await axios.post(
    `${base_URL}/api/v1/users/signin`,
    { email, password },
    { withCredentials: true }
);

if (loginResponse.data.data) {
    const userResponse = await axios.get(
        `${base_URL}/api/v1/users/getuser`,
        { 
            withCredentials: true  // This will automatically send the cookies
        }
    );
}

In the client side, when the user is loggedin a cookie is sent from the server to browser and _loginResponse_ become true then I am sending a request to my server to get the cookie from browser using _withCredentials: true_ and make a database query. As a response I get the user data.

That's simple and easy right?

What other options in cookie

const options = {
    expires: new Date(Date.now() + 24 * 60 * 60 * 1000), // Expires in 24 hours
    maxAge: 24 * 60 * 60 * 1000, // Alternative way to set expiry in milliseconds
    domain: '.example.com',    // Cookie available on all subdomains
    path: '/',                 // Cookie available for entire domain

}

expires vs maxAge: Use either one, not both. maxAge is generally preferred as it's relative to the current time
domain: Be careful with this setting as it affects security. Only set it if you need cross-subdomain access
sameSite:
'strict' is most secure but restricts cross-site requests
'lax' is a good default
'none' requires secure: true
'signed': Requires your server to have a secret key configured
partitioned: New feature for privacy, not supported by all browsers yet.

That's all from my side. Hope this helps. Also this is my first article so expects some roasting from you guys.