Letâs learn about using LangChain in JavaScript by using OpenAIâs API while building a chatbot application that interacts with the OpenAI API to generate responses to user prompts. In this tutorial we will be using Next.js (with React.js) for the frontend (UI) and backend (API). The finished project can be found on GitHub .
For the project setup you will need to go through the Next.js installation .
We will start with a set up for a React component. It includes an input field for entering prompts, a button to submit them, and a space to display messages exchanged between the user and the chatbot. The state variables prompt , isLoading , and messages will help manage the data and UI changes:
The ChatMessageItem component serves as reusable function component that displays individual messages. It takes a message object as a prop and formats the output to indicate whether the message was sent by the user or generated by the bot:
The most important part of the chatbot application is the logic for handling user input and bot responses. When the user submits a prompt, we first prevent the default form behavior . Then, we reset the input field to be empty, set the loading state to true , and add the userâs message to the messages array:
At this point, we are ready to integrate the backend API call to generate the botâs response. Therefore we send the userâs prompt to the server by making a HTTP POST request to the /api/chat endpoint in Next.js. This endpoint is responsible for processing the prompt and generating a response using the OpenAI API . Once the response is received, weâll process and display it later:
Before we can proceed, we will implement the server-side logic for handling chat interactions. We use LangChainâs ChatOpenAI class to communicate with the OpenAI API. The prompt is received via the request body, and we use SystemMessage and HumanMessage classes to construct the conversation context. The result is parsed from an object to a string (see StringOutputParser ) and returned to the UI:
Before we can use LangChain in JavaScript, we need to install the required packages. This command adds the core LangChain library and the OpenAI package, which contains the tools we need for integrating with OpenAIâs models:
The .env file stores your OpenAI API key securely. Never hard-code your API key directly into your application code, always use environment variables like this to protect sensitive information. Once you have your API key in the file, the ChatOpenAI constructor will automatically pick it up:
Finally we can complete the handleSubmit function by processing the APIâs response. After sending the prompt to the backend, we parse the response and update the messages array with the botâs reply. Finally, we set the loading state back to false to indicate that the response has been received:
Congratulations! Youâve now implemented a simple chatbot application using LangChain and OpenAI in JavaScript with the help of Next.js and React. This tutorial demonstrated how to set up the frontend, integrate with a backend API, and process responses from the OpenAI API. You can now experiment further by adding features like streaming responses, custom prompts, or improved error handling to enhance your chatbot.