Create A Chat App with Node.js and TypeScript

At Naitrana, we train you to hack the traditional sloooow, tedioooous system by utilizing tools that propel you to financial freedom quickly.

Today, we will train you to get started creating your own chatbot or for your website users to get answers without relying on the paid chat apps. Better yet, you will code these in the default programming language of the web - JavaScript (with TypeScript support).

Let's do this!

Prerequisites, Please...

1. Install LTS Node.js and a text editor e.g VScode.

2. Launch a terminal.

3. Create project folder and navigate into it e.g

mkdir naitrana_chat 
cd naitrana_chat

4. Prepare npm for package installation.

npm init -y

Install Packages

1. dependencies

npm i langchain @langchain/core @langchain/groq dotenv

• Langchain is the main Python/JavaScript framework for building AI apps with Large Language models (LLMs). Some of its children, like the ChatPromptTemplate and StringOutputParser, that we will be using in this guide originate from its package known as @langchain/core.
• We will use free, opensource LLM called Groq, which is wrapped by Langchain in @langchain/groq.
• The dotenv will manage our app secrets in a secure way.

2. dev dependencies

As the name suggests, dev dependencies are for development purposes only, not to be pushed to a production app.

npm i -D typescript tsx @types/node

typescript introduces types to JavaScript; tsx is a Node.js compiler for TypeScript, whereas @types/node introduces type-hinting essential during development.

Now open the project folder in VScode.

code .

Set Environment Variables

Add sensitive information like API keys in .env file for security. Here, we are using only one environment variable called GROQ_API_KEY. Get/create it from your GroqCloud dashboard.

GROQ_API_KEY=paste_your_api_key_here

Configure TypeScript

Create a tsconfig.json file and tell TypeScript your preferences e.g

{
    "compilerOptions": {
        "module": "NodeNext",
        "moduleDetection": "force",
        "allowJs": true,
        "isolatedModules": true,
        "esModuleInterop": true,
        "resolveJsonModule": true
    }
}

Here is what we are telling TypeScript with each option:

• "NodeNext": Use the current Node.js' way of handling TypeScript files.
• "moduleDetection": Treat all files as modules regardless of whether they contain imports/exports.
• "allowJs": Hey TypeScript, allow .ts and .js files to cross-import/export variables.
• "isolatedModules": Ensure each file can be transpiled independently without relying on information from other files during compilation.
• "esModuleInterop": Use ECMAScript modules.
• "resolveJsonModule": Make it easy to load .json files.

Update your package.json file to use modern ECMAScript standards e.g await in .ts file and dev script for running development app e.g npm run dev

from

{
  "name": "naitrana_chat",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "@langchain/core": "^0.3.17",
    "@langchain/groq": "^0.1.2",
    "dotenv": "^16.4.5",
    "langchain": "^0.3.5"
  },
  "devDependencies": {
    "@types/node": "^22.9.0",
    "tsx": "^4.19.2",
    "typescript": "^5.6.3"
  }
}

to

{
  "name": "naitrana_chat",
  "version": "1.0.0",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "tsx app.ts"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "@langchain/core": "^0.3.17",
    "@langchain/groq": "^0.1.2",
    "dotenv": "^16.4.5",
    "langchain": "^0.3.5"
  },
  "devDependencies": {
    "@types/node": "^22.9.0",
    "tsx": "^4.19.2",
    "typescript": "^5.6.3"
  }
}

We have added "type": "module", and "dev": "tsx app.ts".

Create the Chat Script

Create a .ts file e.g app.ts and code a basic question-answer app.

//....................Configure the ability to autoload .env variables..................

import dotenv from "dotenv";
dotenv.config();


//....................Define Large Language model..................

import { ChatGroq } from "@langchain/groq";
const llm = new ChatGroq({ model:"gemma2-9b-it", temperature:0.7 });


// ....................Create a prompt template..................

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

const chatTemplate = ChatPromptTemplate.fromMessages([
    ["system", "Jibu swali lifuatalo kutumia Sheng - Kiswahili cha Nairobi."],
    ["human", "{swali}"],
]);


//....................Create a chain..................

import { StringOutputParser } from "@langchain/core/output_parsers"; // Converts AI replies to human - friendly text

const output_parser = new StringOutputParser();
const chain = chatTemplate.pipe(llm).pipe(output_parser);


//....................Invoke the chain..................

const AIResponse = await chain.invoke({ swali: "Msee hutengeneza aje pesa kwa TikTok?" });
console.log(AIResponse);

Testing 1, 2, 3...

Launch the terminal and run the app.

npm run dev

You should see the AI response's on the terminal. For example, I see this:

PS C:\Users\User\naitrana_chat> npm run dev


> naitrana_chat@1.0.0 dev

> tsx app.ts

Msee anaweza pata pesa kwa TikTok kwa njia kama hizi:

* **TikTok Creator Fund:** Hii ni fundi ya TikTok yenyewe, inatoa pesa kwa wasemaji maarufu ambao wamefikia viwango fulani. 

* **Affiliate Marketing:** Msee anaweza kutangaza bidhaa au huduma za wengine na kupata commission kwa kila mtu anayejizoea kupitia link yake.  

* **Live Gifting:** Wakati wa live streams, watu wanaweza kutuma "gifts" kwa msee, na msee anaweza kubadilisha gifts hizo kwa pesa halisi.      

* **Sponsorship:**  Wafanyabiashara wanaweza kulipia msee ili atafanye matangazo ya bidhaa zao kwenye TikTok.

* **Kuuza bidhaa na huduma zake mwenyewe:** Msee anaweza kuuza bidhaa au huduma zake mwenyewe kupitia TikTok, kwa mfano, muziki, nguo, au huduma za uandishi.

Kuna njia nyingi za kupata pesa kwa TikTok, lakini inahitaji juhudi na ubunifu.


PS C:\Users\User\naitrana_chat>