DEV Community: Faithful Olaleru

Deploy React App & Nestjs App to AWS EC2 Instance

Faithful Olaleru — Mon, 05 Aug 2024 13:38:23 +0000

TABLE OF CONTENT

⚙️ Introduction
🧰 What You Need
🛠 Setup EC2
🪢 Setup CI/CD Pipeline
⛓ Setup Nestjs & React
📋 Conclusion
🔗 Helpful Links

⚙️ INTRODUCTION

Deploying modern web applications involves more than just writing code; it requires a streamlined process to ensure that applications are reliably built, tested, and deployed. In this article, we will guide you through the deployment of a React front-end application and a NestJS back-end application to an AWS EC2 instance. By leveraging CI/CD pipelines with GitHub Actions, we will demonstrate how to automate the deployment process, ensuring that your applications are consistently and efficiently delivered to users.

AWS EC2 provides a scalable, customizable environment that can host both your front-end and back-end applications. React, a popular JavaScript library for building user interfaces, and NestJS, a progressive Node.js framework for building efficient and scalable server-side applications, are a powerful combination for modern web development.

We will start by setting up our AWS EC2 instance, configuring the necessary environments, and deploying our applications. We will then dive into setting up GitHub Actions, illustrating how to create a CI/CD pipeline that automates the build and deployment process. This approach not only saves time but also minimizes human error, ensuring a seamless and repeatable deployment strategy.

By the end of this article, you will have a robust deployment workflow for your React and NestJS applications, empowering you to focus more on development and innovation, and less on the intricacies of manual deployments. Whether you're a seasoned developer or just getting started with cloud deployments, this guide will provide you with the knowledge and tools to enhance your deployment practices. Let's dive in!

🧰 WHAT YOU NEED

Nodejs/Nestjs project
React app project
Github account
AWS account
Basic understanding of javascript, AWS, and git/github

🛠 SETUP EC2

Login to your AWS account and create an EC2 instance. Don't forget to save your keypair .pem file and allow inbound traffic for http and ssh for your security group. Now login to your instance using Instance connect or Ssh Client.

If using ssh client, use the coode block below. The first line is to change permissions for your keypair so it's not public. The next line is to actually connect. The actual command depends on the AMI image your instance uses. Sometimes it's root or ec2-user, then the public ip address of your instance preceded by 'ec2-', and then the region.

chmod 400 keypair.pem
ssh -i "keypair.pem" ubuntu@ec2-12-345-678-9.eu-west-2.compute.amazonaws.com

If you have any challenges at this step, visit the helpful links section below to view step-by-step instructions from the official documentations.

Installing Nginx

We would be using Nginx as our reverse proxy. Reverse proxies are important for many reasons, one of which is it adds a layer of security to protect our web servers. Run the commands below:

sudo apt update
sudo apt install nginx -y

Installing Nodejs

curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt install -y nodejs
node -v

You should get a node version after the last line is run.

Now we can install pm2 and serve globally. We'd need them later:

npm i -g pm2
npm i -g serve

PM2 is a production process manager for Node.js apps, ensuring they run continuously and efficiently. It handles tasks like restarting crashed applications, load balancing in cluster mode, and managing logs. PM2 simplifies monitoring and maintenance, making it easier to keep applications stable and performant in production.

Serve is a simple command-line HTTP server for serving static files. It's easy to use, allowing you to quickly host and view your static site or single-page application. With minimal setup, serve efficiently delivers your content, making it a handy tool for development and testing environments.

🪢 SETUP CI/CD PIPELINE

CI/CD is a very robust subject, but for the purposes of this guide, I'd summarize it. We'd be using Github actions, feel free to read more from their documentation in the link at the end.

CI/CD involves continuous integration, where code changes are automatically tested and merged, and continuous deployment, where these changes are automatically released to production. In GitHub Actions, workflows are defined in YAML files and consist of jobs triggered by events like code pushes. These jobs, which are executed by runners, contain steps that perform tasks such as testing, building, and deploying applications. This setup ensures efficient, reliable, and automated software delivery.

As shown above, go to the settings tab of your repository, and click on runners on the sub navigation. We'd be using self-hosted runners that we'd run on our EC2 instance. The list of supported OS that support self-hosted runners can be found here

Choose the OS that your ec2 instance uses, and just run the commands. The commands would install github runner on your instance and it would be linked to your github repository. Don't forget to give the runner a unique name, and add 'backend-runner' as a label for the runner.

Also run the code below to start actions runner as a service:

sudo ./svc.sh install
sudo ./svc.sh start
sudo ./svc.sh status

Now go to Actions, and click the 'New Workflow button'.

Search with keyword 'node', and select highlighted option. Edit the code you see there and replace with the code below:

name: Node.js CI/CD

on:
  push:
    branches: [ "main" ]
  workflow_dispatch:

jobs:
  build:
    # runs-on: self-hosted
    runs-on: backend-runner
    strategy:
      matrix:
        node-version: [20.x]
    steps:
    - name: 'Cleanup build folder'
      run:  sudo rm -r ${{github.workspace}}/*
    - uses: actions/checkout@v3
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v3
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'npm'
    - run: sudo npm install
    - run: sudo npm run build
    - run: pm2 start pm2.config.js

Explanation: This workflow would be run when any changes are pushed to the main branch of your repository. Workflow_dispatch means the workflow can also be triggered manually. Ideally, you should run on self-hosted for self hosted runners as we are implementing. But we intend to run two self-hosted runner, one for the react app, and the other for the nestjs app, so we use the runner label to differentiate. We are yet to create our pm2.config.js file, which we will do next.

Duplicate the above steps for the repository with the react app. Make sure the runner names are different, as directories are being created on the ec2 instance for each runner.

The code below would be the workflow for the react app:

name: React.js CI/CD

on:
  push:
    branches: [ "main" ]
  workflow_dispatch:

jobs:
  build:
    # runs-on: self-hosted
    runs-on: frontend-runner
    strategy:
      matrix:
        node-version: [20.x]

    steps:
    - name: 'Cleanup build folder'
      run:  sudo rm -r ${{github.workspace}}/*
    - uses: actions/checkout@v3
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v3
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'npm'
    # - run: sudo yarn install
    - run: sudo npm ci
    - run: vite build
    # - run: npm i -g serve
    - run: sudo chmod 777 /home/ubuntu/frontend-runner/_work/{repo-name}/{repo-name}/node_modules/
    - run: sudo chown -R ubuntu:ubuntu /home/ubuntu/frontend-runner/_work/{repo-name}/{repo-name}/node_modules/
    - run: pm2 start pm2.config.cjs

Explanation: Same explanation here, runs on frontend-runner which is a unique label for the react runner. The two extra run commands are for optional. If you run into permission issues while running the workflow, the first optional command give all users read, write and execute access for node_modules. The second command makes your user to be owner of node_modules. Then we finally run the pm2.config.cjs file.

We can test to see that our two apps are running by running the pm2 list command. The response should look like below:

Nginx Cofiguration

While still in your instance, enter the command below:

sudo nano /etc/nginx/sites-available/default

Now enter the code below into the editor.

server {

  root /var/www/html;

  # Add index.php to the list if you are using PHP
  index index.html index.htm index.nginx-debian.html;

  listen 80;
  server_name ec2-instance-ip-address;


  location / {

    proxy_set_header        Host $host;
    proxy_set_header        X-Real-IP $remote_addr;
    proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header        X-Forwarded-Proto $scheme;

    proxy_pass          http://localhost:5173;
    proxy_read_timeout  90;

    # WebSocket support if using vite bundler
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";

  }

  location /api/ {

    add_header 'Access-Control-Allow-Origin' '*' always;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
    add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept' always;
    add_header 'Access-Control-Allow-Credentials' 'true' always;


    proxy_pass  http://localhost:5000;

    proxy_set_header Host $host;

    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

  }

}

Then run sudo nginx -t to test your changes, then sudo systemctl restart nginx to restart the nginx server.

Explanation: We have two separate locations in our server, / for the react app, /api/ for nestjs app. Headers are added to api location to handle cors errors. If you bundle your react app with vite, you need to add websockets support. Finally, make sure your proxy_pass is running on the right ports for both app.

🪢 SETUP NESTJS & REACT

In our nestjs package.json, the scripts portion looks like below:

"scripts": {
    "prebuild": "rimraf dist",
    "build": "nest build",
    "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
    "start": "nest start",
    "start:dev": "nest start --watch",
    "start:debug": "nest start --debug --watch",
    "start:prod": "node dist/main",
    "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:cov": "jest --coverage",
    "test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
    "test:e2e": "jest --config ./test/jest-e2e.json"
  },

And finally, our pm2.config.js file

module.exports = {
    apps: [
      {
        name: "backend-app",
        script: "npm",
        args: "run start:prod", 
        autorestart: true,
        watch: false,
        max_memory_restart: "300M",
      },
    ],
  };

React Setup

In our react package.json, the scripts portion looks like below:

"scripts": {
    "dev": "vite --host",
    "prod": "npx serve dist -s -p 5173",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
  },

And our pm2.config.cjs file

module.exports = {
  apps: [
    {
      name: "frontend-app"
      script: "npm",
      args: "run prod", 
      autorestart: true,
      watch: false,
      max_memory_restart: "300M",
    },
  ],
};

📋 CONCLUSION

Deploying a React and NestJS application on an AWS EC2 instance with a seamless CI/CD pipeline using GitHub Actions is a powerful demonstration of modern web development practices. By leveraging the scalability and flexibility of AWS, combined with the automation capabilities of GitHub Actions, you can ensure efficient deployment and continuous integration. The use of Nginx to serve both the frontend and backend further streamlines the process, providing a robust solution for handling web traffic and API requests. This setup not only enhances the reliability and performance of your applications but also simplifies the deployment workflow, making it easier to manage updates and scale your infrastructure as needed. Embracing these technologies and best practices paves the way for more efficient, maintainable, and scalable software development.

HAPPY CODING!!!🚀🚀

(Article was written with input from ChatGPT)

🔗 HELPFUL LINKS

Setup Nestjs project - https://docs.nestjs.com/first-steps
Setup React project - https://react.dev/learn/start-a-new-react-project
Setup EC2 Instance - https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/EC2_GetStarted.html
Setup Github Actions -
https://docs.github.com/en/actions/hosting-your-own-runners/managing-self-hosted-runners/adding-self-hosted-runners
Nginx Reverse Proxy - https://docs.nginx.com/nginx/admin-guide/web-server/reverse-proxy/

Reverse Engineering a Chatbot Project: Exploring the Integration of ChatGPT, LangChain.js, and Pinecone

Faithful Olaleru — Tue, 25 Apr 2023 14:09:31 +0000

TABLE OF CONTENT

⚙️ Introduction
🧰 What You Need
🛠 Setup
📲 Ingest Data
⛓ Creating Chains
📟 Server-sent Events
📋 Conclusion
🔗 Helpful Links

⚙️ INTRODUCTION

The use of artificial intelligence (AI) and natural language processing (NLP) has revolutionized the way we interact with technology. Chatbots, in particular, have become a popular tool for businesses to provide customer support, answer inquiries, and even generate leads. However, building a chatbot that can understand natural language and respond appropriately is a complex task.

In this article, we will reverse engineer a chatbot application that was originally built to give legal advise by building our own chatbot that would do something else e.g Personal Assistant. The original project was built with ChatGPT, a state-of-the-art large language model (LLM) developed by OpenAI, LangChain.js, a JavaScript library for NLP tasks, and Pinecone, a powerful machine learning serving system. While reverse engineering this project, we will also uncover the inner workings of how these technologies interact, shed light on their capabilities, and explore the possibilities of leveraging their combined potential. So, let's dive!

🧰 WHAT YOU NEED

Npm & node installed on your PC
OpenAI API Key
Pinecone API Key, Environment name & Index name

🛠 SETUP

We will use Next.js just like the original project. So create a Next app with Typescript & Tailwind. If you not sure how to, check here.

Next we edit our tsconfig.json file so it looks just like below.

Don’t forget to set the target to “es2020”.

Now let’s install our node dependencies and dev-dependencies:

Langchain
@pinecone-database/pinecone
Dotenv
Pdf-parse
Tsx

Let me now describe the process. Based on our data set, we want to build a bot that can provide precise and dynamic responses. For this project, ChatGPT would employ pdf documents as the source of data for its training. We submit our data from the pdfs to pinecone, where it is kept as a vector list of floating point values. When we ask a query of the chatbot, ChatGPT asks Pinecone to return information that is most related to our inquiry. It then streams a response to us, and the cycle continues.

📲 INGEST DATA

We begin by ingesting our data to be accessible by our LLM. Create ingest-data.ts file in /src directory. Use DirectoryLoader from LangChain to get all pdfs in a directory (in our case its docs directory). PDFLoader would only get one pdf file at a time, but with DirectoryLoader, we can pick all pdfs at once. We convert them to raw documents where the pageContent is equal to the texts from the pdf. Then break the bulk texts into smaller chunks and then upload to Pinecone using OpenAIEmbeddings. OpenAIEmbedding is a model that converts text to numerical form. Your file should look like below:

import { RecursiveCharacterTextSplitter } from "langchain/text_splitter";
import { OpenAIEmbeddings } from "langchain/embeddings";
import { PineconeStore } from "langchain/vectorstores";
import { pinecone } from "@/utils/pinecone-client";
import { CustomPDFLoader } from "@/utils/customPDFLoader";
import { PINECONE_INDEX_NAME, PINECONE_NAME_SPACE } from "@/config/pinecone";
import { DirectoryLoader } from "langchain/document_loaders";

/* Name of directory to retrieve your files from */
const filePath = "src/docs";

export const run = async () => {
    try {
        /*load raw docs from the all files in the directory */
        const directoryLoader = new DirectoryLoader(filePath, {
            ".pdf": (path) => new CustomPDFLoader(path),
        });

        // const loader = new PDFLoader(filePath);
        const rawDocs = await directoryLoader.load();

        /* Split text into chunks */
        const textSplitter = new RecursiveCharacterTextSplitter({
            chunkSize: 1000,
            chunkOverlap: 200,
        });

        const docs = await textSplitter.splitDocuments(rawDocs);
        console.log("split docs", docs);

        console.log("creating vector store...");
        /*create and store the embeddings in the vectorStore*/
        const embeddings = new OpenAIEmbeddings();
        const index = pinecone.Index(PINECONE_INDEX_NAME); //change to your own index name

        //embed the PDF documents
        await PineconeStore.fromDocuments(docs, embeddings, {
            pineconeIndex: index,
            namespace: PINECONE_NAME_SPACE,
            textKey: "text",
        });
    } catch (error) {
        console.log("error", error);
        throw new Error("Failed to ingest your data");
    }
};

(async () => {
    await run();
    console.log("ingestion complete");
})();

Install pdf-parse dependent at this time if you haven't already, as it will read the contents of all of our pdf files. Check to see whether it works by importing normally. Use the workaround method from customPDFLoader.ts, which involves using the exact _pdf-parse.js file in node_modules, if you encounter issues with pdf-parse like we did. If you opt to utilize pdf-parse.js, remember to implement your module declaration.

Create a file named pdf-parse.d.ts that looks just like below:

declare module 'pdf-parse/lib/pdf-parse.js' {
  import pdf from 'pdf-parse';

  export default pdf;
}

You can also try another pdf parser if you so wish. All you have to do is replace CustomPDFLoader with your new implementation.

⛓ CREATING CHAINS

Then, beginning with an LLM chain, we build our chains. A chain is a sequence of primitives, including other chains or LLM Chains. An LLM chain is a special type of chain that has an LLM and a Prompt Template. Think of a prompt as the final message that gets sent to the LLM. To create the prompt, a Prompt template formats user input. Here is an illustration of an LLM chain:

import { OpenAI } from "langchain/llms/openai";
import { PromptTemplate } from "langchain/prompts";
import { LLMChain } from "langchain/chains";

const model = new OpenAI({ temperature: 0.9 });
const template = "Ask me any question about {X}?";
const prompt = new PromptTemplate({
  template: template,
  inputVariables: ["X"],
});

const chain = new LLMChain({ llm: model, prompt: prompt });

Create a file for our chains, makechain.ts. It'll look like below:

import { OpenAIChat } from "langchain/llms";
import { LLMChain, ChatVectorDBQAChain, loadQAChain, ConversationalRetrievalQAChain } from "langchain/chains";
import { PineconeStore } from "langchain/vectorstores";
import { PromptTemplate } from "langchain/prompts";
import { CallbackManager } from "langchain/callbacks";

const CONDENSE_PROMPT =
    PromptTemplate.fromTemplate(`Given the following conversation and a follow up question, rephrase the follow up question to be a standalone question.

Chat History:
{chat_history}
Follow Up Input: {question}
Standalone question:`);

const QA_PROMPT = PromptTemplate.fromTemplate(
  `You are an AI assistant providing helpful advice. You are given the following extracted parts of a long document and a question. Provide a conversational answer based on the context provided.
You should only provide hyperlinks that reference the context below. Do NOT make up hyperlinks.
If you can't find the answer in the context below, just say "Hmm, I'm not sure." Don't try to make up an answer.
If the question is not related to the context, politely respond that you are tuned to only answer questions that are related to the context.

Question: {question}
=========
{context}
=========
Answer in Markdown:`,
);

export const makeChain = (
    vectorstore: PineconeStore,
    onTokenStream?: (token: string) => void
) => {
    const questionGenerator = new LLMChain({
        llm: new OpenAIChat({ temperature: 0 }),
        prompt: CONDENSE_PROMPT,
    });
    const docChain = loadQAChain(
        new OpenAIChat({
            temperature: 0,
            modelName: "gpt-3.5-turbo", //change this to older versions (e.g. gpt-3.5-turbo) if you don't have access to gpt-4
            streaming: Boolean(onTokenStream),
            callbackManager: onTokenStream
                ? CallbackManager.fromHandlers({
                      async handleLLMNewToken(token) {
                          onTokenStream(token);
                          console.log(token);
                      },
                  })
                : undefined,
        }),
        { prompt: QA_PROMPT }
    );

    return new ChatVectorDBQAChain({
        vectorstore,
        combineDocumentsChain: docChain,
        questionGeneratorChain: questionGenerator,
        returnSourceDocuments: true,
        k: 2, //number of source documents to return
    });
};

As an instance of our LLM, we use OpenAIChat from LangChain. When the temperature is zero, only responses that are directly related to the ingested data or that are based on it should be given. We can receive more imaginative responses from OpenAIChat when the temperature is higher than zero.

For processing unstructured text data, use LoadQAChain. In its most basic form, the implementation injects all of the documents into the prompt. It accepts parameters as well as an LLM. Here, we completely specify the ChatGPT version that will be used and provide our question template in the params object. Under the hood, it builds an LLM chain using our LLM and the prompt template. The LLM chain is then used to generate a Documents Chain, which is then returned.

The last chain that would be called to generate a response is ChatVectorDBQAChain. Imagine it as a complicated chain that is connected to other chains. For instance, it contains the StuffsDocumentChain and QuestionGeneratorChain (which is an LLMChain). It manages the entire procedure, from structuring your query to generating your answer. It functions similarly to ConversationalRetrievalQAChain except that it uses a vector store in place of a base retriever and that it accepts k, the number of source documents it should return along with your response.

📟 SERVER-SENT EVENTS

Server-sent events would be our final important consideration. It is really similar to working with WebSockets. The only significant distinction is that it is one-way; clients can only listen and cannot stream back to the server, whereas the server can emit or stream events to clients.

For the implementation of server-sent events, we would utilize _@microsoft/fetch-event-source. Here is an illustration of how to emit on the server side and how to listen on the client side.

const express = require("express");
const cors = require("cors");

const app = express();
app.use(cors());

const PORT = 5000;

const getTime = () => new Date().toLocaleTimeString();

app.post("/api/chat", function (req, res) {
  res.writeHead(200, {
    Connection: "keep-alive",
    "Content-Type": "text/event-stream",
    "Cache-Control": "no-cache",
  });
  setInterval(() => {
    res.write(
      `data: {"time": "${getTime()}"}`
    );
    res.write("\n\n");
  }, 5000);
});

app.listen(PORT, function () {
  console.log(`Server is running on port ${PORT}`);
});

and for client side:

import { fetchEventSource } from "@microsoft/fetch-event-source";

 await fetchEventSource("http://localhost:5000/api/chat", {
        method: "POST",
        headers: {
          Accept: "text/event-stream",
        },
        onmessage(event) {
          console.log(event.data);
          const parsedData = JSON.parse(event.data);
          setData((data) => [...data, parsedData]);
        },
        onerror(err) {
          console.log("There was an error from server", err);
        },
 });

Now to do the equivalent for Next.js, put the following code in your api.

import type { NextApiRequest, NextApiResponse } from 'next';
import { OpenAIEmbeddings } from 'langchain/embeddings';
import { PineconeStore } from 'langchain/vectorstores';
import { makeChain } from '@/utils/makechain';
import { pinecone } from '@/utils/pinecone-client';
import { PINECONE_INDEX_NAME, PINECONE_NAME_SPACE } from '@/config/pinecone';

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse,
) {
  const { question, history } = req.body;

  if (!question) {
    return res.status(400).json({ message: 'No question in the request' });
  }
  // OpenAI recommends replacing newlines with spaces for best results
  const sanitizedQuestion = question.trim().replaceAll('\n', ' ');

  const index = pinecone.Index(PINECONE_INDEX_NAME);

  /* create vectorstore*/
  const vectorStore = await PineconeStore.fromExistingIndex(
    new OpenAIEmbeddings({}),
    {
      pineconeIndex: index,
      textKey: 'text',
      namespace: PINECONE_NAME_SPACE,
    },
  );

  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache, no-transform',
    Connection: 'keep-alive',
  });

  const sendData = (data: string) => {
    res.write(`data: ${data}\n\n`);
  };

  sendData(JSON.stringify({ data: '' }));

  //create chain
  const chain = makeChain(vectorStore, (token: string) => {
    sendData(JSON.stringify({ data: token }));
  });

  try {
    //Ask a question
    const response = await chain.call({
      question: sanitizedQuestion,
      chat_history: history || [],
    });

    console.log('response', response);
    sendData(JSON.stringify({ sourceDocs: response.sourceDocuments }));
  } catch (error) {
    console.log('error', error);
  } finally {
    sendData('[DONE]');
    res.end();
  }
}

We first obtain our PineconeStore using an already-created index name from the Pinecone dashboard. Any data we send to SendData is simply pushed to the client. To pose the question, we import and call the ChatVectorDBQAChain that we established before. After that, stream source documents to the client with your response.

It will appear as follows on the client side:

const ctrl = new AbortController();

try {
            fetchEventSource("/api/chat", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify({
                    question,
                    history,
                }),
                signal: ctrl.signal,
                onmessage: (event) => {
                    if (event.data === "[DONE]") {

                        // Logic for end of streaming

                    } else {
                        const data = JSON.parse(event.data);
                        if (data.sourceDocs) {

                            // set message state to include documents
                        } else {

                            // set message state to include only data
                        }
                    }
                },
            });
        } catch (error) {
            console.log("error", error);
        }

This is the basic outline of what it will look like. For the complete code, consult the source project.

Let's discuss chat history lastly. Your history is blank when you first ask a question. It adds your most recent question to the chat history after the streaming response to your initial question is complete. When asking your next question, it uses that chat history (your previous question) as context for the new standalone question.

📋 CONCLUSION

The reverse engineering project using Next.js, LangChain, ChatGPT, and Pinecone is now complete. This method may also be used to create a wide range of chatbots that can perform a number of tasks depending on your prompts, the temperature of OpenAI, and the contents of uploaded documents. You are welcome to reach out if you have any questions.

HAPPY CODING!!!🚀🚀

(Article was written with input from ChatGPT)

🔗 HELPFUL LINKS

Original project -
https://github.com/mayooear/gpt4-pdf-chatbot-langchain
My project -
https://github.com/ionknowmyname/pdf-analysis-chat-gpt-langchain-clone
Microsoft Fetch Event Source -
https://blog.logrocket.com/using-fetch-event-source-server-sent-events-react/
LangChain documentation -
https://js.langchain.com/docs/getting-started/guide-llm
Stuff Document Chain - https://js.langchain.com/docs/modules/chains/index_related_chains/document_qa