DEV Community: Praveen

Use Cases for HNSW-SQLite Library

Praveen — Fri, 18 Jul 2025 07:39:42 +0000

The HNSW-SQLite library combines the speed of Hierarchical Navigable Small World (HNSW) graphs for fast approximate nearest neighbor search with the reliability and portability of SQLite for persistent storage.

📦 Installation

npm:

npm install hnswsqlite

View on npm

- GitHub:
github.com/praveencs87/hnswsqlite

🚀 How to Use

const { HNSWSqlite } = require('hnswsqlite');

// Initialize or open an index
const index = new HNSWSqlite({
  dbPath: 'my_vectors.db',
  dimensions: 128,
  space: 'l2' // or 'cosine'
});

// Add a vector
await index.addItem('item123', [0.1, 0.2, ..., 0.128]);

// Search for nearest neighbors
const results = await index.search([0.1, 0.2, ..., 0.128], 10);
console.log(results);

// Save and close
await index.close();

For more usage examples and API details, see the API Documentation.

🔎 Use Cases

Semantic Search in Text and Documents:

Find semantically similar documents, articles, or code snippets using vector embeddings.

Image and Multimedia Retrieval:
Quickly find visually similar images or audio/video content by comparing feature vectors.

Recommendation Systems:
Suggest similar products, content, or users based on embeddings.

Anomaly Detection:
Identify outliers or unusual data points in high-dimensional datasets.

Scientific and Medical Data Analysis:
Search for similar gene sequences, patient records, or medical images.

Edge & Mobile Applications:
Use SQLite’s lightweight footprint and HNSW’s speed for on-device search and recommendation.

Knowledge Graphs & Entity Linking:
Resolve and link entities across datasets using vector similarity.

💡 Why Use HNSW-SQLite?

Persistence: Reliable storage with SQLite.
Performance: Fast, scalable nearest neighbor search.
Portability: Cross-platform, no server required.
Simplicity: Easy integration with minimal dependencies.

Links:

npm package

GitHub repository

API Documentation

Let me know if you’d like this inserted at a specific location in your README.md or if you want any further customizations!

🚀 Part 8: Deployment and Optimization

Praveen — Wed, 02 Apr 2025 09:48:19 +0000

Welcome to the final part of our series! Now that the chatbot is fully functional, it’s time to deploy, optimize, and monitor your e-commerce support chatbot for real-world use.

✅ What We'll Cover

Deploying frontend and backend
Environment setup for production
Performance and cost optimization
Monitoring and logging

☁️ 1. Deployment Strategy

Option 1: Full Stack in One Server

Use services like Render, Railway, Vercel (frontend only), or a VPS.

Option 2: Frontend + Backend Separation

Frontend on Vercel/Netlify
Backend on Render/Heroku
Use environment variables to configure URLs accordingly

📦 2. Build Frontend for Production

cd frontend
npm run build

This creates a build directory. You can serve it using:

Node.js + express.static
Nginx
Static hosting on Netlify/Vercel

⚙️ 3. Set Environment Variables

Make sure to update production .env variables on your hosting platform:

PORT=5000
OPENAI_API_KEY=your_production_openai_key
PINECONE_API_KEY=your_production_pinecone_key
PINECONE_ENVIRONMENT=your_pinecone_env
MONGODB_URI=your_production_mongo_uri

💰 4. Cost Optimization Tips

Use lower temperature for LLMs (e.g., 0.2)
Avoid unnecessary API calls
Cache frequently asked questions
Limit Pinecone queries per session if needed

📈 5. Monitoring & Logging

Backend Monitoring

Use console.log, or integrate with Winston, Logtail, etc.
For crash alerts: Use PM2, UptimeRobot, or Better Stack

Frontend Monitoring

Track user interactions using tools like PostHog, LogRocket, or Sentry

🎉 You Did It!

You've successfully built and deployed a fully functional AI-powered e-commerce support chatbot using:

React + Node.js
LangChain + OpenAI
Pinecone + MongoDB

🙌 What's Next?

Add authentication for users
Allow users to track multiple orders
Train on FAQs and product guides
Integrate with WhatsApp, Messenger, or your website

Thanks for following along. Keep building awesome things! 🚀

Part-7: Connecting Frontend and Backend

Praveen — Mon, 31 Mar 2025 04:10:11 +0000

🔌 Part 7: Connecting Frontend and Backend

With both frontend and backend components ready, it's time to connect them and ensure the chat interface communicates seamlessly with the backend API. This part focuses on API integration, routing, and testing the flow.

✅ What We'll Cover

Setting up proxy for development
Creating backend API endpoints
Sending chat messages from frontend
Handling CORS and testing full flow

🌐 1. Proxy Setup for Development

In your frontend/package.json, add a proxy to redirect API calls to the backend:

"proxy": "http://localhost:5000"

This tells React to forward /api requests to your backend during development.

🧪 2. Backend API Endpoint

Create a basic API in your backend:

// backend/routes/chat.js
const express = require('express');
const router = express.Router();
const { createQAChain } = require('../langchain/qaChain');

router.post('/', async (req, res) => {
  const { question } = req.body;

  try {
    const qaChain = await createQAChain();
    const response = await qaChain.call({ question });
    res.json({ answer: response.text });
  } catch (err) {
    console.error(err);
    res.status(500).json({ error: 'Failed to process question' });
  }
});

module.exports = router;

And update your main server file to use this route:

// backend/server.js
const express = require('express');
const cors = require('cors');
const chatRoute = require('./routes/chat');
require('dotenv').config();

const app = express();
const PORT = process.env.PORT || 5000;

app.use(cors());
app.use(express.json());
app.use('/api/chat', chatRoute);

app.listen(PORT, () => {
  console.log(\`Server running on port \${PORT}\`);
});

🔁 3. Frontend Axios Integration

Already implemented in Part 6, your React component should be sending messages to /api/chat using Axios.

Make sure both frontend and backend are running:

# In one terminal
cd backend
node server.js

# In another terminal
cd frontend
npm start

✅ Next Steps (Part 8)

In the final part of this series, we’ll:

Deploy the chatbot to production
Optimize performance and cost
Set up monitoring and logging

🚀 You’re almost there—just one step to go!

Building an E-Commerce Support Chatbot Part 6: Building the React Frontend

Praveen — Sat, 29 Mar 2025 15:00:22 +0000

Now that our backend and chatbot logic are ready, it's time to create a user-friendly chat interface using React. This part focuses on building a simple yet elegant frontend that interacts with the backend and enhances the user experience.

✅ What We'll Cover

Setting up the React project structure
Creating a chat interface
Sending queries to the backend API
Displaying responses from the chatbot
Basic styling for good UX

⚙️ 1. Project Setup (if not already done)

cd frontend
npx create-react-app .
npm install axios styled-components

💬 2. Chat Interface Component

Let’s create the chat interface:

// frontend/src/components/ChatInterface.js
import React, { useState } from 'react';
import styled from 'styled-components';
import axios from 'axios';

const ChatContainer = styled.div\`
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
  height: 80vh;
  display: flex;
  flex-direction: column;
\`;

const MessagesContainer = styled.div\`
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
\`;

const MessageBubble = styled.div\`
  max-width: 70%;
  padding: 10px 15px;
  border-radius: 18px;
  margin-bottom: 10px;
  line-height: 1.4;
  word-wrap: break-word;
  \${props => props.isUser ? \`
    background-color: #dcf8c6;
    margin-left: auto;
  \` : \`
    background-color: #f0f0f0;
    margin-right: auto;
  \`}
\`;

const InputContainer = styled.div\`
  display: flex;
  gap: 10px;
\`;

const Input = styled.input\`
  flex: 1;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #ccc;
\`;

const Button = styled.button\`
  padding: 10px 20px;
  background-color: #4a69bd;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  &:hover {
    background-color: #3c55a5;
  }
\`;

const ChatInterface = () => {
  const [messages, setMessages] = useState([
    { text: "Hi! How can I help you with your order today?", isUser: false }
  ]);
  const [input, setInput] = useState('');

  const handleSendMessage = async () => {
    if (!input.trim()) return;

    const userMessage = { text: input, isUser: true };
    setMessages(prev => [...prev, userMessage]);

    try {
      const response = await axios.post('/api/chat', { question: input });
      const botMessage = { text: response.data.answer, isUser: false };
      setMessages(prev => [...prev, botMessage]);
    } catch (err) {
      console.error(err);
      setMessages(prev => [...prev, {
        text: "Sorry, something went wrong.",
        isUser: false
      }]);
    }

    setInput('');
  };

  return (
    <ChatContainer>
      <h2>E-Commerce Support Chatbot</h2>
      <MessagesContainer>
        {messages.map((msg, idx) => (
          <MessageBubble key={idx} isUser={msg.isUser}>
            {msg.text}
          </MessageBubble>
        ))}
      </MessagesContainer>
      <InputContainer>
        <Input
          value={input}
          onChange={e => setInput(e.target.value)}
          onKeyDown={e => e.key === 'Enter' && handleSendMessage()}
          placeholder="Ask about your order..."
        />
        <Button onClick={handleSendMessage}>Send</Button>
      </InputContainer>
    </ChatContainer>
  );
};

export default ChatInterface;

🧩 3. Use Component in App

// frontend/src/App.js
import React from 'react';
import ChatInterface from './components/ChatInterface';
import './App.css';

function App() {
  return (
    <div className="App">
      <ChatInterface />
    </div>
  );
}

export default App;

✅ Next Steps (Part 7)

In the next part, we will:

Set up API routes to connect backend and frontend
Handle authentication (if needed)
Add real-time support and finalize the flow

⚡ Let's make it fully functional!

💬 Part 5: Designing Conversational Logic

Praveen — Sat, 29 Mar 2025 04:36:44 +0000

💬 Part 5: Designing Conversational Logic

Now that we have our order data embedded and searchable with Pinecone, it’s time to design how the chatbot understands and responds to customer queries. This part focuses on crafting prompts, setting up retrieval-based QA, and handling multi-turn conversations using LangChain's Chains and Memory.

✅ What We'll Cover

Creating prompt templates for order-related questions
Setting up chains using LangChain
Managing context and conversation history
Using memory to support multi-turn conversations

🧾 1. Create Prompt Templates

LangChain allows you to create flexible prompt templates for guiding the LLM. Here’s an example:

// backend/langchain/prompts.js
const { PromptTemplate } = require('@langchain/core/prompts');

const orderQueryPrompt = new PromptTemplate({
  template: \`
You are a helpful support assistant for an e-commerce store. Use the context to answer the user's question.
If the answer isn't in the context, respond with "Sorry, I couldn't find the information."

Context:
{context}

Question:
{question}
\`,
  inputVariables: ['context', 'question'],
});

module.exports = { orderQueryPrompt };

🔄 2. Create a QA Chain

We’ll use a RetrievalQAChain to combine the vector search and the LLM.

// backend/langchain/qaChain.js
const { RetrievalQAChain } = require('@langchain/community/chains');
const { OpenAI } = require('@langchain/openai');
const { orderQueryPrompt } = require('./prompts');
const { initPinecone } = require('./config');
const { OpenAIEmbeddings } = require('@langchain/openai');
const { PineconeStore } = require('@langchain/pinecone');

async function createQAChain() {
  const llm = new OpenAI({
    openAIApiKey: process.env.OPENAI_API_KEY,
    temperature: 0.2,
    modelName: 'gpt-3.5-turbo',
  });

  const pinecone = await initPinecone();
  const index = pinecone.Index('ecommerce-orders');

  const vectorStore = await PineconeStore.fromExistingIndex(
    new OpenAIEmbeddings({ openAIApiKey: process.env.OPENAI_API_KEY }),
    { pineconeIndex: index }
  );

  return RetrievalQAChain.fromLLM(llm, vectorStore.asRetriever(), {
    prompt: orderQueryPrompt,
  });
}

module.exports = { createQAChain };

🧠 3. Add Conversation Memory (Multi-Turn)

We’ll use BufferMemory to allow the model to remember the chat context.

// backend/langchain/memory.js
const { BufferMemory } = require('@langchain/core/memory');

const memory = new BufferMemory({
  returnMessages: true,
  memoryKey: 'chat_history',
});

module.exports = { memory };

You can pass this memory into a conversational chain if you want the bot to remember previous queries.

🚀 4. Handle Incoming Queries

Finally, let’s wire this up to handle incoming API requests.

// backend/routes/chat.js
const express = require('express');
const router = express.Router();
const { createQAChain } = require('../langchain/qaChain');

router.post('/', async (req, res) => {
  const { question } = req.body;

  try {
    const qaChain = await createQAChain();
    const response = await qaChain.call({ question });
    res.json({ answer: response.text });
  } catch (err) {
    console.error(err);
    res.status(500).json({ error: 'Failed to process question' });
  }
});

module.exports = router;

Then plug the route into your server.js:

// backend/server.js
const chatRoute = require('./routes/chat');
app.use('/api/chat', chatRoute);

✅ Next Steps (Part 6)

In the next part, we will:

Build the frontend chat interface in React
Connect the UI to the chat API
Style and refine the user experience

🎨 Let’s make it look good and feel real!

Building an E-Commerce Support Chatbot: Part 4 - Creating the LangChain Pipeline

Praveen — Fri, 28 Mar 2025 04:28:45 +0000

🔗 Part 4: Creating the LangChain Pipeline

In this part, we’ll build the LangChain-powered backend pipeline that connects your chatbot to MongoDB and Pinecone, handles data chunking, generates embeddings, and retrieves relevant responses.

✅ What We'll Cover

Setting up document loading from MongoDB
Splitting order data into chunks
Creating embeddings from chunks
Storing vectors in Pinecone
Retrieving relevant chunks for user queries

🧱 1. Load Data from MongoDB

We’ll load order data to feed into LangChain's document processing tools.

// backend/langchain/loadOrders.js
const { connectToDatabase } = require('../database/connection');

async function loadOrderDocuments() {
  const db = await connectToDatabase();
  const orders = await db.collection('orders').find().toArray();

  return orders.map(order => ({
    pageContent: `
      Order ID: ${order.orderId}
      Customer: ${order.customerName}
      Email: ${order.email}
      Items: ${order.items.map(i => \`\${i.productName} x\${i.quantity}\`).join(', ')}
      Total: $\${order.totalAmount}
      Status: \${order.status}
      Date: \${order.orderDate.toDateString()}
    `,
    metadata: { orderId: order.orderId },
  }));
}

module.exports = { loadOrderDocuments };

✂️ 2. Split Data into Chunks

We use LangChain's text splitter to break content into manageable pieces.

// backend/langchain/splitter.js
const { RecursiveCharacterTextSplitter } = require('@langchain/community/text_splitter');

async function splitDocuments(documents) {
  const splitter = new RecursiveCharacterTextSplitter({
    chunkSize: 500,
    chunkOverlap: 50,
  });

  return await splitter.splitDocuments(documents);
}

module.exports = { splitDocuments };

🔁 3. Embed & Store in Pinecone

Now we’ll process and store the chunks as vectors.

// backend/langchain/storeChunks.js
const { OpenAIEmbeddings } = require('@langchain/openai');
const { PineconeStore } = require('@langchain/pinecone');
const { initPinecone } = require('./config');

async function storeChunksInPinecone(chunks) {
  const embeddings = new OpenAIEmbeddings({
    openAIApiKey: process.env.OPENAI_API_KEY,
  });

  const pinecone = await initPinecone();
  const index = pinecone.Index("ecommerce-orders");

  await PineconeStore.fromDocuments(chunks, embeddings, {
    pineconeIndex: index,
  });

  console.log("Chunks stored in Pinecone.");
}

module.exports = { storeChunksInPinecone };

🧪 4. Pipeline Runner

Let’s put it all together:

// backend/langchain/pipeline.js
const { loadOrderDocuments } = require('./loadOrders');
const { splitDocuments } = require('./splitter');
const { storeChunksInPinecone } = require('./storeChunks');

async function runLangChainPipeline() {
  const docs = await loadOrderDocuments();
  const chunks = await splitDocuments(docs);
  await storeChunksInPinecone(chunks);
}

runLangChainPipeline();

Run the pipeline:

node backend/langchain/pipeline.js

✅ Next Steps (Part 5)

In the next part, we will:

Design prompt templates for order-related queries
Handle multi-turn conversations
Implement memory using LangChain for context retention

🚀 Stay tuned for Part 5: Designing Conversational Logic!

🧭 Part 3: Implementing Vector Search with Pinecone

Praveen — Thu, 27 Mar 2025 08:55:33 +0000

🧭 Part 3: Implementing Vector Search with Pinecone

In this part, we’ll integrate Pinecone, a vector database that enables semantic search. This allows the chatbot to understand user queries and fetch relevant order information—even if the phrasing varies.

✅ What We'll Cover

Introduction to vector databases and embeddings
Setting up Pinecone
Creating embeddings from order data
Storing and retrieving vectors from Pinecone

🧠 1. Why Vector Search?

Traditional keyword search has limits. With vector search, we embed data (like order summaries) into high-dimensional vectors using LLMs. These vectors can then be compared to the user’s query (also embedded) to find semantically similar matches.

🔧 2. Set Up Pinecone

Install Pinecone client (already done in Part 1, just in case):

npm install @pinecone-database/pinecone

Update your .env if not already done:

PINECONE_API_KEY=your_pinecone_api_key
PINECONE_ENVIRONMENT=your_pinecone_environment

Initialize Pinecone in your config:

// backend/langchain/config.js
const { PineconeClient } = require('@pinecone-database/pinecone');

const initPinecone = async () => {
  const client = new PineconeClient();
  await client.init({
    apiKey: process.env.PINECONE_API_KEY,
    environment: process.env.PINECONE_ENVIRONMENT,
  });
  return client;
};

🧬 3. Generate Embeddings

We’ll create vector representations of order data using LangChain’s OpenAI embeddings.

// backend/langchain/embedOrders.js
const { OpenAIEmbeddings } = require('@langchain/openai');
const { initPinecone } = require('./config');
const { connectToDatabase } = require('../database/connection');

async function embedOrders() {
  const db = await connectToDatabase();
  const orders = await db.collection('orders').find().toArray();

  const embeddings = new OpenAIEmbeddings({
    openAIApiKey: process.env.OPENAI_API_KEY,
  });

  const pinecone = await initPinecone();
  const index = pinecone.Index("ecommerce-orders");

  for (const order of orders) {
    const orderSummary = `
      Order ID: ${order.orderId}
      Customer: ${order.customerName}
      Items: ${order.items.map(i => i.productName).join(', ')}
      Status: ${order.status}
    `;

    const [embedding] = await embeddings.embedQuery(orderSummary);

    await index.upsert([
      {
        id: order.orderId,
        values: embedding,
        metadata: {
          orderId: order.orderId,
          customerName: order.customerName,
          status: order.status,
        },
      },
    ]);
  }

  console.log("All orders embedded and stored in Pinecone.");
}

embedOrders();

Run the script:

node backend/langchain/embedOrders.js

🔍 4. Perform a Semantic Search

We’ll later use this to match user queries to order information.

// backend/langchain/searchOrder.js
const { OpenAIEmbeddings } = require('@langchain/openai');
const { initPinecone } = require('./config');

async function searchOrders(userQuery) {
  const embeddings = new OpenAIEmbeddings({
    openAIApiKey: process.env.OPENAI_API_KEY,
  });

  const pinecone = await initPinecone();
  const index = pinecone.Index("ecommerce-orders");

  const [queryVector] = await embeddings.embedQuery(userQuery);

  const results = await index.query({
    vector: queryVector,
    topK: 3,
    includeMetadata: true,
  });

  return results.matches;
}

module.exports = { searchOrders };

✅ Next Steps (Part 4)

In the next part, we will:

Connect LangChain components
Load data from MongoDB
Split and embed text dynamically
Retrieve and generate responses

🚀 Stay tuned for Part 4!

Building an E-Commerce Support Chatbot: Part 2 - Building the Knowledge Base

Praveen — Wed, 26 Mar 2025 08:14:03 +0000

In this part, we’ll focus on setting up the database and preparing sample e-commerce order data that the chatbot will reference during conversations.

✅ What We'll Cover:

Setting up MongoDB as our database
Creating a schema for storing order information
Inserting sample order data
Writing functions to retrieve data for chatbot use

📦 1. Database Setup

We’ll use MongoDB. If you're running it locally, make sure MongoDB is installed and running. You can also use MongoDB Atlas (cloud).

Update your .env file with the MongoDB URI if you haven’t already:

MONGODB_URI=mongodb://localhost:27017/ecommerce

📁 2. Schema Design

Let’s define a basic structure for order information:

{
  "orderId": "ORD123456",
  "customerName": "Jane Doe",
  "email": "jane@example.com",
  "items": [
    {
      "productName": "Wireless Mouse",
      "quantity": 1,
      "price": 25
    }
  ],
  "totalAmount": 25,
  "orderDate": "2024-03-01",
  "status": "Shipped"
}

🛠 3. Inserting Sample Data

Create a script to insert sample data:

// backend/database/seed.js
const { MongoClient } = require('mongodb');
require('dotenv').config();

const sampleOrders = [
  {
    orderId: "ORD1001",
    customerName: "Alice Smith",
    email: "alice@example.com",
    items: [
      { productName: "Bluetooth Speaker", quantity: 1, price: 45 }
    ],
    totalAmount: 45,
    orderDate: new Date("2024-02-20"),
    status: "Delivered"
  },
  {
    orderId: "ORD1002",
    customerName: "Bob Lee",
    email: "bob@example.com",
    items: [
      { productName: "Laptop Stand", quantity: 2, price: 30 }
    ],
    totalAmount: 60,
    orderDate: new Date("2024-02-21"),
    status: "Shipped"
  }
];

(async () => {
  const client = new MongoClient(process.env.MONGODB_URI);
  try {
    await client.connect();
    const db = client.db('ecommerce');
    const orders = db.collection('orders');

    await orders.deleteMany({});
    await orders.insertMany(sampleOrders);
    console.log("Sample order data inserted.");
  } catch (err) {
    console.error("Data insertion failed", err);
  } finally {
    await client.close();
  }
})();

Run the script:

node backend/database/seed.js

🔍 4. Fetching Orders for the Chatbot

Now let's create a utility to fetch order details:

// backend/database/orders.js
const { connectToDatabase } = require('./connection');

async function getOrderById(orderId) {
  const db = await connectToDatabase();
  const order = await db.collection('orders').findOne({ orderId });
  return order;
}

module.exports = { getOrderById };

This will later be used by the LangChain pipeline to fetch specific order info when a customer asks about their order.

✅ Next Steps (Part 3)

In the next part, we will:

Set up Pinecone for vector storage
Convert our order data into embeddings
Enable semantic search through LangChain

🚀 Stay tuned for Part 3!

Building an E-Commerce Support Chatbot: Part 1 - Introduction and Setup

Praveen — Sat, 01 Mar 2025 10:54:58 +0000

In this first article of our series, we'll lay the groundwork for building an intelligent e-commerce support chatbot using JavaScript technologies. Our chatbot will help customers get information about their orders without waiting for human support.

Technologies We'll Use

LangChain.js – A framework for developing applications powered by language models
Pinecone – A vector database for efficient similarity search
React – For building our frontend user interface
Node.js – For our backend server
Database – We'll use MongoDB for storing our e-commerce data

Prerequisites

To follow along with this tutorial, you should have:

Basic knowledge of JavaScript and Node.js
Familiarity with React
Node.js installed on your machine
A code editor (VS Code recommended)
npm or yarn for package management

Project Setup

Let's create our project structure:

mkdir ecommerce-chatbot
cd ecommerce-chatbot
mkdir backend frontend

Setting Up the Backend

First, let's initialize our backend:

cd backend
npm init -y

Now, let's install the required dependencies:

npm install @langchain/openai @langchain/pinecone @langchain/community @langchain/core express cors dotenv mongodb

Creating Our Basic Server

Let's create a simple Express server to get started:

// backend/server.js
const express = require('express');
const cors = require('cors');
require('dotenv').config();

const app = express();
const PORT = process.env.PORT || 5000;

// Middleware
app.use(cors());
app.use(express.json());

// Basic route
app.get('/api/health', (req, res) => {
  res.json({ status: 'ok', message: 'E-commerce Chatbot API is running' });
});

// Start server
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Setting Up Environment Variables

Create a .env file in your backend directory:

PORT=5000
OPENAI_API_KEY=your_openai_api_key
PINECONE_API_KEY=your_pinecone_api_key
PINECONE_ENVIRONMENT=your_pinecone_environment
MONGODB_URI=your_mongodb_connection_string

Setting Up LangChain

Let's create a basic LangChain configuration:

// backend/langchain/config.js
const { OpenAI } = require('@langchain/openai');
const { PineconeStore } = require('@langchain/pinecone');
const { PineconeClient } = require('@pinecone-database/pinecone');

// Initialize LLM
const initLLM = () => {
  return new OpenAI({
    openAIApiKey: process.env.OPENAI_API_KEY,
    temperature: 0.2,
    modelName: 'gpt-3.5-turbo',
  });
};

// Initialize Pinecone
const initPinecone = async () => {
  const client = new PineconeClient();
  await client.init({
    apiKey: process.env.PINECONE_API_KEY,
    environment: process.env.PINECONE_ENVIRONMENT,
  });
  return client;
};

module.exports = {
  initLLM,
  initPinecone,
};

Setting Up the Database Connection

// backend/database/connection.js
const { MongoClient } = require('mongodb');

let db = null;

async function connectToDatabase() {
  if (db) return db;

  try {
    const client = new MongoClient(process.env.MONGODB_URI);
    await client.connect();
    console.log('Connected to MongoDB');
    db = client.db('ecommerce');
    return db;
  } catch (error) {
    console.error('Database connection error:', error);
    process.exit(1);
  }
}

module.exports = { connectToDatabase };

Setting Up the Frontend

Now, let's initialize our React frontend:

cd ../frontend
npx create-react-app .

Install additional packages for the frontend:

npm install axios styled-components react-icons

Project Architecture Overview

Frontend (React)

Chat interface for user interaction
API calls to backend

Backend (Node.js/Express)

API endpoints for chat functionality
Integration with LangChain.js
Connection to MongoDB for order data
Integration with Pinecone for vector search

Next Steps

In Part 2, we'll:

Set up MongoDB with sample order data
Create the data schema
Implement database operations for retrieving order information

Running the Application

Start the backend:

cd backend
node server.js

Start the frontend:

cd frontend
npm start

🚀 Stay tuned for Part 2!

Building an AI-Powered E-Commerce Support Chatbot using langchain.js : A Step-by-Step Guide

Praveen — Sat, 01 Mar 2025 10:22:48 +0000

E-commerce businesses rely on efficient customer support to enhance user experience and drive conversions. AI-powered chatbots can streamline support operations by handling common queries, tracking orders, and assisting customers in real time. This series explores how to build a robust, intelligent e-commerce support chatbot from scratch using LangChain, Pinecone, and React.

What You’ll Learn

This guide takes a hands-on approach, walking you through the complete development lifecycle—from setting up the environment to deploying a fully functional chatbot. We will cover:

Leveraging Large Language Models (LLMs) for understanding and responding to customer queries.
Integrating Vector Databases (Pinecone) for efficient retrieval of order-related data.
Building a Scalable Backend that processes queries and provides accurate responses.
Designing a React-based Frontend to deliver a seamless chat experience.
Optimizing and Deploying the chatbot for real-world use.

Series Breakdown

- Part 1: Introduction and Setup – Overview of technologies, architecture, and environment setup.
- Part 2: Building the Knowledge Base – Structuring and storing order-related data.

Part 3: Implementing Vector Search with Pinecone – Converting order data into embeddings for fast retrieval.
Part 4: Creating the LangChain Pipeline – Handling document processing and retrieval.
Part 5: Designing Conversational Logic – Implementing prompt templates, memory, and contextual understanding.
Part 6: Building the React Frontend – Developing a user-friendly chat interface.
Part 7: Connecting Frontend and Backend – Ensuring smooth communication between the UI and AI backend.
Part 8: Deployment and Optimization – Making the chatbot production-ready with cost and performance optimizations.

Who Is This For?

This series is perfect for developers, AI enthusiasts, and e-commerce professionals looking to implement AI-driven automation in customer support. Whether you're new to LLM-powered chatbots or want to deepen your understanding of vector search and AI pipelines, this guide will provide practical insights and code implementations.

Let's get started on building an intelligent AI chatbot that transforms e-commerce customer support! 🚀

What's Next?

In the upcoming articles, I will dive deeper into each part of this series, providing detailed explanations and example code to help you implement each component step by step. Stay tuned as we build this AI-powered chatbot together! 🚀

Learning the Basics of Large Language Model (LLM) Applications with LangChainJS

Praveen — Sat, 08 Jun 2024 00:38:38 +0000

LangChainJS is a powerful tool for building and operating Large Language Models (LLMs) in JavaScript. It’s perfect for creating applications across various platforms, including browser extensions, mobile apps with React Native, and desktop apps with Electron. The popularity of JavaScript among developers, combined with its ease of deployment and scalability, makes LangChainJS an ideal choice for these tasks.

LangChainJS uses a special language to create chains of components called "runnables." These runnables define core methods, input and output types, and enable functionalities like invoking, streaming, batching, and modifying runtime parameters.

Example: Making a Joke Bot
Here’s a simple example to demonstrate how LangChainJS works:

import "dotenv/config";
import { ChatOpenAI } from "@langchain/openai";
import { HumanMessage } from "@langchain/core/messages";

const model = new ChatOpenAI({
    modelName: "gpt-3.5-turbo-1106"
});

await model.invoke([
    new HumanMessage("Tell me a joke.")
]);

// Expected Response:
// "Why don't skeletons fight each other? They don't have the guts!"

Understanding Prompt Templates

Prompt templates are standardized formats used for creating prompts in LLM applications. They include placeholders for variable input, making them reusable and adaptable for different queries. In LangChain, prompt templates are implemented using classes like PromptTemplate and ChatPromptTemplate.

`import { ChatPromptTemplate } from "@langchain/core/prompts";

const prompt = ChatPromptTemplate.fromTemplate(
    `What are three good names for a company that makes {product}?`
);

await prompt.format({
    product: "colorful socks"
});

// Expected Output:
// "What are three good names for a company that makes colorful socks?"
`

LangChain Expression Language (LCEL)

LCEL connects different components (runnables) in a sequence, creating workflows where the output of one component becomes the input for another. These runnables come with methods like invoke, stream, and batch.

const chain = prompt.pipe(model);
await chain.invoke({
    product: "colorful socks"
});

// Expected Response:
// "1. Rainbow Soles\n2. Vivid Footwear Co.\n3. Chromatic Sockworks"

Using Output Parsers

Output parsers transform the chat model output into a different format, such as a simple string.

import { StringOutputParser } from "@langchain/core/output_parsers";

const outputParser = new StringOutputParser();
const nameGenerationChain = prompt.pipe(model).pipe(outputParser);

await nameGenerationChain.invoke({
    product: "fancy cookies"
});

// Expected Response:
// "1. Gourmet Cookie Creations\n2. Delicate Delights Bakery\n3. Heavenly Sweet Treats Co."

Streaming Responses

The .stream method allows handling LLM responses that take a long time to generate, returning the output in an iterable stream.

const stream = await nameGenerationChain.stream({
  product: "really cool robots",
});

for await (const chunk of stream) {
    console.log(chunk);
}

Batch Processing

The batch method performs multiple operations concurrently, handling multiple inputs simultaneously.

const inputs = [
    { product: "large calculators" },
    { product: "alpaca wool sweaters" }
];

await nameGenerationChain.batch(inputs);

// Expected Response:
// ["1. GiantCalc Co.\n2. MegaMath Devices\n3. JumboCalculations Inc.",
//  "1. Alpaca Luxe\n2. Sweater Alpaca\n3. Woolly Alpaca Co."]

Retrieval Augmented Generation (RAG)

RAG combines the capabilities of LLMs with retrieval techniques to generate text with contextual information. It involves loading documents, splitting them for clarity, embedding them into vectors, and storing them in a vector database for efficient retrieval.

Document Loading with LangChainJS

LangChainJS offers document loaders to collect data from various sources. For example, you can load a GitHub repository:

import { GithubRepoLoader } from "langchain/document_loaders/web/github";
import ignore from "ignore";

const loader = new GithubRepoLoader(
  "https://github.com/langchain-ai/langchainjs",
  { recursive: false, ignorePaths: ["*.md", "yarn.lock"] }
);

const docs = await loader.load();
console.log(docs.slice(0, 3));

Splitting Documents

LangChainJS provides strategies for splitting documents to ensure coherence and context.

import { RecursiveCharacterTextSplitter } from "langchain/text_splitter";

const splitter = RecursiveCharacterTextSplitter.fromLanguage("js", {
  chunkSize: 32,
  chunkOverlap: 0,
});
const code = `function helloWorld() {
console.log("Hello, World!");
}
// Call the function
helloWorld();`;

await splitter.splitText(code);

// Expected Output:
// ["function helloWorld() {", 'console.log("Hello, World!");\n}', "// Call the function", "helloWorld();"]

Embedding and Searching

Embedding converts document contents into vectors, which are then stored in a vector database. You can search for relevant chunks using these embeddings.

import { OpenAIEmbeddings } from "@langchain/openai";

const embeddings = new OpenAIEmbeddings();
await embeddings.embedQuery("This is some sample text");

// Expected Output:
// An array of numbers representing the embedded text.

Constructing a Retrieval Chain

Create a chain to retrieve documents and generate answers based on user queries.

import { RunnableSequence } from "@langchain/core/runnables";
import { ChatOpenAI } from "@langchain/openai";
import { StringOutputParser } from "@langchain/core/output_parsers";

const retrievalChain = RunnableSequence.from([
  {
    context: documentRetrievalChain,
    question: (input) => input.question,
  },
  answerGenerationPrompt,
  model,
  new StringOutputParser(),
]);

const answer = await retrievalChain.invoke({
  question: "What are the prerequisites for this course?"
});

console.log(answer);

// Expected Response:
// Detailed answer about the prerequisites for the course.

Handling Follow-up Questions

LangChainJS can handle follow-up questions by saving chat history and rephrasing questions to make them standalone.

import { MessagesPlaceholder } from "@langchain/core/prompts";
import { RunnableWithMessageHistory } from "@langchain/core/runnables";
import { ChatMessageHistory } from "langchain/stores/message/in_memory";
import { HumanMessage, AIMessage } from "@langchain/core/messages";

const messageHistory = new ChatMessageHistory();
const finalRetrievalChain = new RunnableWithMessageHistory({
  runnable: conversationalRetrievalChain,
  getMessageHistory: (_sessionId) => messageHistory,
  historyMessagesKey: "history",
  inputMessagesKey: "question",
});

const originalQuestion = "What are the prerequisites for this course?";
const originalAnswer = await finalRetrievalChain.invoke({
  question: originalQuestion,
}, {
  configurable: { sessionId: "test" }
});

const finalResult = await finalRetrievalChain.invoke({
  question: "Can you list them in bullet point form?",
}, {
  configurable: { sessionId: "test" }
});

console.log(finalResult);

// Expected Response:
// List of prerequisites in bullet points.

This guide covers the basics of using LangChainJS for building LLM applications, from loading documents and creating prompt templates to constructing retrieval chains and handling follow-up questions. By leveraging these tools, you can create powerful and efficient LLM applications in JavaScript.