Building a RAG Chatbot with React/Angular, Node.js, pgvector, and OpenAI

Most chatbots are lying to your users.

Not maliciously — but when a user asks "why does useEffect run twice in React?" and the bot confidently gives a generic answer that has nothing to do with your course content, that’s a failure.

👉 The bot doesn’t know your product. It just sounds like it does.

So I built a RAG (Retrieval-Augmented Generation) chatbot that answers using real data instead of guessing.

👉 Full Details: https://jsden.com/projects/rag-chatbot

The Problem

Basic chatbot:

User → LLM → Response

Issues:

• Hallucinations
  


• Generic answers
  


• No product awareness
  

The Fix: RAG

New flow:

User → Retrieve → Context → LLM → Response

Instead of guessing, the model answers using your data.

Tech Stack

• Frontend: React / Angular
  


• Backend: Node.js (Express)
  


• DB: PostgreSQL + pgvector
  


• Embeddings: OpenAI
  


• LLM: GPT-4
  

How It Works

1. Chunking

function chunkText(text, size = 500) {

  const chunks = [];

  for (let i = 0; i < text.length; i += size) {

    chunks.push(text.slice(i, i + size));

  }

  return chunks;

}

2. Embeddings

const embedding = await openai.embeddings.create({

  model: "text-embedding-3-small",

  input: chunk

});

3. Retrieval

SELECT content

FROM documents

ORDER BY embedding <-> $1

LIMIT 5;

4. Prompt

const prompt = `

Use the context below:



${chunks.join('\n\n')}



Question: ${question}

`;

Challenges

• Chunk size tuning
  


• Retrieval accuracy
  


• Hallucination control
  


• Prompt design
  

Result

Final Thought

AI is not about calling APIs.

👉 It’s about connecting intelligence with your data.

That’s what RAG does.

👉 Full breakdown + working chatbot:


https://jsden.com/projects/rag-chatbot