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

Before	After
Guessing	Grounded answers
Generic	Context-aware
Demo	Production

---

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