Introduction

In this article, I am gonna demonstrate a simple example in which we shall integrate ChatGPT, aided with Google Searching to a react app. Are you with me, because through this simple example you can automate your website if you go deeper in using LangChain JS.

So Let’s Start!!!
Table of Contents

What is ChatGPT
What is LangChain
What is SerAPI
Example
What is ChatGPT?

ChatGPT is a cutting-edge conversational language model developed by OpenAI for generating human-like text.

What is LangChain?

Langchain is a library that facilitates the integration of multiple language models and tools, enabling powerful web experiences by leveraging models like BERT, GPT-3, and T5, among others.

What is SerAPI (SerpApi: Google Search API)

SerpApi is a Google Search API that enables developers to programmatically retrieve search engine results in a structured format.

Also Read: Discover the Top 10 AI Tools in 2024

Example: I am assuming you are familiar with React Js Framwork, Let’s start!

1. Installing LangChain.Js
If you are using npm package manager then

```Code
npm install -S langchain
for yarn yarn add langchain

2. Importing Models, LLM’s, Agents and Tools

```Code
import { OpenAI } from "langchain/llms/openai";
import { initializeAgentExecutorWithOptions } from "langchain/agents";
import { SerpAPI } from "langchain/tools";
import { Calculator } from "langchain/tools/calculator";
```

Note: To understand the terms above, you can go through detailed Information from official LangChain JS Documents.

3. Setting Up Models, tools and Agents

“`Code

const model = new ChatOpenAI({
temperature: 0.9,
openAIApiKey: "YOUR-API-KEY", // In Node.js defaults to process.env.OPENAI_API_KEY
});
//Tools are aided helpers that perform needed action on
//human request message before sending to Chat Model.
const tools = [
new SerpAPI(process.env.SERPAPI_API_KEY, {
location: "Austin,Texas,United States",
hl: "en",
gl: "us",
}),
new Calculator(),
];
//Combine tools, model, Agent together and process human message and respond with all resources specified in it.
const executor = await initializeAgentExecutorWithOptions(tools, model, {
agentType: "zero-shot-react-description",
});

4. Creating a Promise for Chat Request & Response


```Code
const chatResponse = async (input) => {
const res = await executor.call({
input
});
return res
};
```

5. Human Message Request and Executor Respone


```Code
const input =
"Who is Olivia Wilde's boyfriend?" +
" What is his current age raised to the 0.23 power?";
const result = await chatResponse(input);
console.log(result)
//Output: Olivia Wilde's boyfriend is Jason Sudeikis, and his current age raised to the 0.23 power is 2.4242784855673896.

Oops! I think I have copy pasted example, you get it Right?

But main question that arouse is, how LangChain JS chains the tools and Models, before reaching to final output?

In the above example LangChain firsrt get response from Search Engine: `Who is Olivia Wilde’s boyfriend and what is his age?`. Then It passes to Chat-GPT which did calculations using Calculator tool and responded with a final result!!!w