Loading page...Загружаем страницу...正在加载页面...
AtlasRepo

Building a Production-Ready AI Context Search: Integrating Local RAG into a React & Node.js Stack

Description and use

Step-by-step guide to building a context-aware search with RAG in a React/Node.js stack, covering embedding generation, in-memory storage, and semantic search.

Problem

Users of modern web applications expect to query internal knowledge bases instantly, but static documentation cannot provide contextual answers efficiently.

Outcome

The tutorial demonstrates a complete RAG pipeline that transforms static docs into a queryable vector search, enabling semantic context retrieval in a React/Node.js stack.

Workflow

  • Initialize Node.js backend with Express, cors, dotenv, openai, and nodemon.
  • Create .env with PORT and OPENAI_API_KEY.
  • Define in-memory knowledgeBase array with sample docs.
  • Implement cosineSimilarity helper.
  • Pre-compute embeddings for each doc on startup using OpenAI embeddings API.
  • Expose POST /api/search endpoint that: 1) generates embedding for user query, 2) computes cosine similarity with stored embeddings, 3) sorts and returns top 2 matches.
  • Create React app with Vite, scaffold App.jsx with search form, fetch to backend, display results with relevance score.
  • Style the UI with minimal CSS.
  • Run backend (node server.js) and frontend (npm run dev) and test queries.
  • Consider production upgrades: persistent vector DB, chunking strategies, hybrid search.

Evidence

By the end of this guide, you will have a functional, end-to-end component that ingests raw markdown/text documents, chunks them, generates vector embeddings, stores them, and uses semantic search to fetch exact contextual snippets for user prompts.

Source

Create a directory named ai-search-backend, navigate into it, and install the necessary dependencies.

Source

app.post('/api/search', async (req, res) => { ... const queryEmbeddingResponse = await openai.embeddings.create({ model: "text-embedding-3-small", input: query, }); ... });

Source

npm create vite@latest client -- --template react

Source

Persistent Vector Databases: Move from in-memory lookups to dedicated database vector search tools like PostgreSQL with pgvector or managed services like Pinecone.

Source

  • Record date: 2026-10-14T07:41:14.824Z