DEV Community: Hargun Singh

# Building an AI Agent with RAG: A Simple Guide to Vector Databases and Embeddings

Hargun Singh — Mon, 15 Sep 2025 11:55:27 +0000

Ever wondered how AI can answer questions about your documents? The secret lies in RAG (Retrieval-Augmented Generation) - a powerful technique that combines vector databases with language models to create intelligent assistants.

In this article, we'll explore how to build an AI agent that can understand and answer questions about your documents using RAG, vector databases, and embeddings.

What is RAG and Why Do We Need It?

RAG stands for Retrieval-Augmented Generation. It's a technique that makes AI responses more accurate by grounding them in real documents.

The Problem: Traditional AI models can "hallucinate" - they make up facts that sound convincing but aren't true.

The Solution: RAG retrieves relevant information from your documents first, then uses that context to generate accurate answers.

The Three Key Components

1. Embeddings: Converting Text to Numbers

Embeddings are numerical representations of text that capture meaning. Think of them as a "fingerprint" for words and sentences.

// "machine learning" becomes:
[0.1, -0.3, 0.8, 0.2, -0.5, ...] // 1536 numbers for OpenAI's model

Why this matters: Similar concepts get similar embeddings. "car" and "automobile" would have very similar numerical representations, even though they're different words.

2. Vector Database: The Smart Search Engine

A vector database (like Pinecone) stores all your document embeddings and can instantly find the most similar pieces of text to any query.

Traditional search: Looks for exact keyword matches
Vector search: Understands meaning and context

3. Language Model: The Answer Generator

The LLM (like GPT) takes the retrieved context and generates human-like answers.

How RAG Works: Step by Step

Let's trace through what happens when you ask "How do I install this library?":

Step 1: Convert Your Question to Numbers

const queryEmbedding = await embeddingService.generateEmbedding("How do I install this library?");
// Result: [0.2, -0.1, 0.9, ...]

Step 2: Find Similar Content

const similarChunks = await pineconeService.querySimilar(queryEmbedding, 5);
// Result: Returns 5 most relevant document chunks

Step 3: Generate Answer with Context

const response = await llmService.generateAnswer(query, relevantChunks);
// Result: "To install this library, run 'npm install package-name' in your terminal..."

The Complete Flow

Why RAG is Powerful

1. Accurate Answers

Only uses information from your actual documents
Prevents AI from making up facts
Every answer is backed by source material

2. Context-Aware

Understands meaning, not just keywords
Can find relevant information even with different wording
Maintains conversation context

3. Scalable

Works with any type of document
Easy to add new data sources
Handles large amounts of information efficiently

Real-World Example: How RAG Works in Practice

Let's walk through a complete example of how RAG processes a user query step by step.

User asks: "What's the refund policy for this product?"

Step 1: Document Processing (Done Once)

First, our system processes all documents and converts them to searchable chunks:

// Document: "Terms of Service.pdf"
// Chunk 1: "Our refund policy allows returns within 30 days..."
// Chunk 2: "Refunds are processed within 5-7 business days..."
// Chunk 3: "For digital products, refunds are only available if..."

Each chunk gets converted to an embedding (a list of 1536 numbers) and stored in Pinecone.

Step 2: Query Processing (Real-time)

When the user asks their question:

2a. Convert Question to Embedding

const queryEmbedding = await embeddingService.generateEmbedding("What's the refund policy for this product?");
// Result: [0.2, -0.1, 0.9, 0.3, -0.4, ...] (1536 numbers)

2b. Search Vector Database

const similarChunks = await pineconeService.querySimilar(queryEmbedding, 3);
// Returns top 3 most similar chunks based on meaning, not keywords

2c. Retrieve Context
The system finds these relevant chunks:

Chunk 1: "Our refund policy allows returns within 30 days of purchase if the product is unused and in original packaging."
Chunk 2: "Refunds are processed within 5-7 business days and will be credited back to your original payment method."
Chunk 3: "For digital products, refunds are only available if you haven't downloaded the content yet."

2d. Generate Answer

const response = await llmService.generateAnswer(query, relevantChunks);

The LLM combines the user's question with the retrieved context to generate a natural response.

Step 3: Final Response

User sees:

"Based on our terms of service, you can request a full refund within 30 days of purchase if the product is unused and in original packaging. Refunds are processed within 5-7 business days and will be credited back to your original payment method. For digital products, refunds are only available if you haven't downloaded the content yet."

Source: [Terms of Service.pdf, Section 4.2]

Why This Works Better Than Traditional Search

Traditional keyword search would look for exact matches like "refund policy" and might miss relevant information.

RAG with vector search understands that "return policy", "money back guarantee", and "refund policy" all mean the same thing, so it finds all relevant information regardless of the exact wording used.

The key insight: RAG doesn't just search for keywords - it searches for meaning, making it much more powerful and accurate.

Getting Started with RAG

1. Choose Your Tools

Embeddings: OpenAI's text-embedding-ada-002
Vector Database: Pinecone (or alternatives like Weaviate, Qdrant)
LLM: OpenAI GPT-3.5 or GPT-4

2. Process Your Documents

// Convert documents to chunks
const chunks = await processDocuments(documents);

// Generate embeddings
const embeddings = await generateEmbeddings(chunks);

// Store in vector database
await storeInVectorDB(chunks, embeddings);

3. Query Your Knowledge Base

// Convert question to embedding
const queryEmbedding = await generateEmbedding(question);

// Find similar content
const results = await searchVectorDB(queryEmbedding);

// Generate answer
const answer = await generateAnswer(question, results);

Key Takeaways

RAG combines retrieval and generation for accurate AI responses
Embeddings convert text to numbers that capture meaning
Vector databases enable fast, semantic search
Context from your documents prevents AI hallucination
Source citations build trust and allow verification

Next Steps

RAG is just the beginning. You can extend this approach with:

Multiple document types (PDFs, CSVs, web pages)
Hybrid search (combining vector and keyword search)
Fine-tuned models for specific domains
Real-time document updates

The beauty of RAG is its simplicity - it takes your existing documents and makes them intelligently searchable through natural language.

Ready to build your own RAG-powered AI agent? Start with a simple document, get the basic flow working, then gradually add more sophisticated features. The future of knowledge management is here, and it's powered by vectors!

Why the "this" Keyword Behaves Differently in Regular Functions and Arrow Functions

Hargun Singh — Sat, 27 Jul 2024 18:29:47 +0000

The this keyword in JavaScript can be confusing because it behaves differently in regular functions and arrow functions. In this blog post, we will explain how this works in both types of functions, explore why these differences exist, and provide the basic knowledge you need to understand this in JavaScript.

Regular Functions

Regular functions in JavaScript are defined using the function keyword. The value of this in these functions depends on how the function is called. Here are several examples:

1. Global Context

Non-Strict Mode:

  function regularFunction() {
      console.log(this);
  }

  regularFunction(); // Logs the global object (window in browsers)

Explanation: In non-strict mode, when a function is called in the global context (not as a method of an object), this refers to the global object (window in browsers or global in Node.js).
- Strict Mode:

  'use strict';

  function regularFunction() {
      console.log(this);
  }

  regularFunction(); // Logs undefined

Explanation: In strict mode, this remains undefined when a function is called in the global context, providing a safer environment by preventing accidental modifications to the global object.

2. Method Call

When a function is called as a method of an object, this refers to that object.

Example:

  const obj = {
      method: function() {
          console.log(this);
      }
  };

  obj.method(); // Logs obj

Explanation: In this case, this points to obj because the function is called as a method of obj.
- Strict Mode: The behavior remains the same in strict mode.

3. Constructor Call

When a function is used as a constructor (called with the new keyword), this refers to the newly created instance.

Example:

  function Person(name) {
      this.name = name;
      this.sayHello = function() {
          console.log(`Hello, my name is ${this.name}`);
      };
  }

  const person1 = new Person('Alice');
  person1.sayHello(); // Logs "Hello, my name is Alice"

  const person2 = new Person('Bob');
  person2.sayHello(); // Logs "Hello, my name is Bob"

Explanation: When called with new, this inside the Person constructor function refers to the new instance being created. Each new instance (person1 and person2) gets its own name property and sayHello method.
- Strict Mode: The behavior remains the same in strict mode.

4. Explicit Binding

You can explicitly bind this using call, apply, or bind.

Example:

  function regularFunction() {
      console.log(this);
  }

  const obj = { value: 42 };

  regularFunction.call(obj);  // Logs obj
  regularFunction.apply(obj); // Logs obj

  const boundFunction = regularFunction.bind(obj);
  boundFunction();            // Logs obj

Explanation: call and apply immediately invoke the function with this set to obj, while bind creates a new function with this permanently bound to obj.
- Strict Mode: The behavior remains the same in strict mode.

Arrow Functions

Arrow functions, introduced in ES6, do not have their own this context. Instead, they inherit this from the surrounding (lexical) scope. This makes arrow functions useful in certain situations.

1. Lexical `this`

Arrow functions inherit this from the scope in which they are defined.

Non-Strict Mode:

  const arrowFunction = () => {
      console.log(this);
  };

  arrowFunction(); // Logs the global object (window in browsers)

Explanation: Arrow functions do not have their own this; they use this from the surrounding scope. Here, it refers to the global object because the function is defined in the global scope.
- Strict Mode:

  'use strict';

  const arrowFunction = () => {
      console.log(this);
  };

  arrowFunction(); // Logs undefined

Explanation: In strict mode, if the surrounding scope is global, this remains undefined as inherited from the surrounding scope.

2. Method Call

Unlike regular functions, arrow functions do not get their own this when called as methods. They inherit this from the enclosing scope.

Example:

  const obj = {
      method: () => {
          console.log(this);
      }
  };

  obj.method(); // Logs the global object (window in browsers) or undefined in strict mode

Explanation: Arrow functions do not bind their own this but inherit it from the lexical scope. In this example, this refers to the global object or undefined in strict mode, not obj.
- Strict Mode: Logs undefined, not obj.

3. Arrow Function Inside Another Function

When an arrow function is defined inside another function, it inherits this from the outer function.

Example:

  function outerFunction() {
      const arrowFunction = () => {
          console.log(this);
      };

      arrowFunction();
  }

  const obj = { value: 42, outerFunction: outerFunction };

  obj.outerFunction(); // Logs obj, because `this` in arrowFunction is inherited from outerFunction

Explanation: In this case, this inside the arrow function refers to the same this as in outerFunction, which is obj.
- Strict Mode: The behavior remains the same in strict mode.

4. Arrow Function in Event Handlers

Arrow functions in event handlers inherit this from the surrounding lexical scope, not from the element that triggers the event.

Example:

  const button = document.querySelector('button');

  button.addEventListener('click', () => {
      console.log(this);
  }); // Logs the global object (window in browsers) or undefined in strict mode

Explanation: The arrow function does not bind this to the button element; it inherits it from the surrounding scope, which is the global scope or undefined in strict mode.
- Strict Mode: Logs undefined, not the button element.

Why These Differences?

The difference between regular functions and arrow functions lies in how they handle this:

Regular Functions: The value of this is dynamic and determined by the call-site (how the function is called).
Arrow Functions: The value of this is lexical and set at the time the function is defined, based on the this value of the enclosing execution context.

Key Concepts to Understand

To understand the behavior of this in JavaScript, you need to know the following concepts:

Execution Context: The context in which code is executed, affecting how this is determined.
Call-site: The location in code where a function is called, influencing the value of this in regular functions.
Lexical Scoping: How this is inherited in arrow functions from the surrounding scope.
Strict Mode: How strict mode changes the default behavior of this in certain contexts.

Summary

Regular Functions: this is dynamic and determined by the call-site.
Arrow Functions: this is lexical and determined by the surrounding scope when the function is defined.

Understanding these distinctions will help you write more predictable and maintainable JavaScript code. Whether you're using regular functions or arrow functions, knowing how this works is crucial for effective JavaScript development.

Your Turn!

I’d love to hear your thoughts and experiences with the this keyword. Have you encountered any tricky situations where the behavior of this caused unexpected results?

Feel free to leave your questions or comments below. Engaging with the content and asking questions is a great way to deepen your understanding and foster a community discussion. Your feedback will help me create more insightful and useful content in the future!

Custom Hooks in React: Use Cases and Significance

Hargun Singh — Sat, 20 Jul 2024 05:03:50 +0000

Custom hooks in React are an excellent way to encapsulate reusable logic, manage state, and handle side effects in a way that keeps your code clean and maintainable. Here are some key use cases and the significance of creating custom hooks:

1. Reusing Logic Across Components

Example: Fetching data from an API.
You can create a custom hook like useFetch to encapsulate the logic for fetching data and handle loading, success, and error states. This logic can then be reused across multiple components.

import { useState, useEffect } from 'react';

const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch(url)
      .then((response) => response.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error);
        setLoading(false);
      });
  }, [url]);

  return { data, loading, error };
};

export default useFetch;

2. Managing Complex State Logic

Example: Managing form state
Custom hooks can be used to manage form state and validation logic in a reusable way.

import { useState } from 'react';

const useForm = (initialState) => {
  const [values, setValues] = useState(initialState);

  const handleChange = (event) => {
    const { name, value } = event.target;
    setValues({
      ...values,
      [name]: value,
    });
  };

  const resetForm = () => {
    setValues(initialState);
  };

  return [values, handleChange, resetForm];
};

export default useForm;

3. Abstracting Side Effects

Example: Synchronizing with local storage.
You can create a custom hook to manage state that synchronizes with local storage.

import { useState, useEffect } from 'react';

const useLocalStorage = (key, initialValue) => {
  const [value, setValue] = useState(() => {
    const storedValue = localStorage.getItem(key);
    return storedValue ? JSON.parse(storedValue) : initialValue;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
};

export default useLocalStorage;

Significance of Custom Hooks

1. Code Reusability
Custom hooks allow you to reuse logic across multiple components without duplicating code, promoting the DRY (Don't Repeat Yourself) principle.

2. Separation of Concerns
By moving logic out of components and into hooks, you can keep your component code cleaner and more focused on rendering, while the custom hook handles the logic.

3. Testability
Custom hooks can be tested independently from the components that use them, making it easier to write unit tests for complex logic.

3. Consistency
Using custom hooks ensures consistent behavior across different parts of your application, as the same logic is used wherever the hook is invoked.

Conclusion
Custom hooks in React are a powerful tool for creating reusable, maintainable, and testable code. They help you encapsulate complex logic, manage state and side effects efficiently, and promote best practices like separation of concerns and code reusability. By leveraging custom hooks, you can keep your components clean and focused on their primary purpose: rendering UI.

DEV Community: Hargun Singh

# Building an AI Agent with RAG: A Simple Guide to Vector Databases and Embeddings

What is RAG and Why Do We Need It?

The Three Key Components

1. Embeddings: Converting Text to Numbers

2. Vector Database: The Smart Search Engine

3. Language Model: The Answer Generator

How RAG Works: Step by Step

Step 1: Convert Your Question to Numbers

Step 2: Find Similar Content

Step 3: Generate Answer with Context

The Complete Flow

Why RAG is Powerful

1. Accurate Answers

2. Context-Aware

3. Scalable

Real-World Example: How RAG Works in Practice

Step 1: Document Processing (Done Once)

Step 2: Query Processing (Real-time)

Step 3: Final Response

Why This Works Better Than Traditional Search

Getting Started with RAG

1. Choose Your Tools

2. Process Your Documents

3. Query Your Knowledge Base

Key Takeaways

Next Steps

Why the "this" Keyword Behaves Differently in Regular Functions and Arrow Functions

Regular Functions

1. Global Context

2. Method Call

3. Constructor Call

4. Explicit Binding

Arrow Functions

1. Lexical this

2. Method Call

3. Arrow Function Inside Another Function

4. Arrow Function in Event Handlers

Why These Differences?

Key Concepts to Understand

Summary

Your Turn!

Custom Hooks in React: Use Cases and Significance

Significance of Custom Hooks

1. Lexical `this`