Blog
Build AI Applications With LangChain, JavaScript, and React
February 18, 2024 - Roy Derks
As a software developer seeking to accelerate development and incorporate AI into products, integrating tools like LangChain into your workflow is an exciting prospect. This post will provide a guide for developers on leveraging LangChain to execute prompting with OpenAI models.
We will walk through:
- Setting up a React app with Vite
- Installing and configuring LangChain
- Connecting to the OpenAI API
- Building a query function with LangChain
- Handling form submission to interface with the AI
Click the image below to watch the YouTube video version of this blog post:
Setting up a React app with Vite
Vite is a rapid frontend build tool for modern web development. For this tutorial, we use a basic Vite app styled similarly to ChatGPT - with a query box against an empty background ready to display questions and answers.
I've already created a boilerplate for this tutorial, which you can find here.
You can check out the repository by running the following command in your terminal:
git clone https://github.com/royderks/ai-frontend-workshop.git
After cloning the repository, you'll need to move into the new directory and install the dependencies.
cd ai-frontend-workshop/my-gpt npm install
Once you've got everything installed, open your project in whatever IDE you use – we're gonna go with Visual Studio Code here. The project folder is gonna look pretty familiar if you've ever dabbled with Create React App. You'll find static assets such as images in public
and your React code in src
. Plus, all the must-haves like package.json
and vite.config.js
are there. Oh, and TypeScript users, you haven’t been forgotten – there’s a tsconfig.json
in there for you.
Ready to see your project live? Start your local development server with:
npm run dev
And just like that, your Vite app is up and running in your browser. Which will look something like the screenshot you can see below.
You get hot-reloading and all the modern features that make coding less of a chore.
Installing and configuring LangChain
LangChainJS is a JavaScript library designed to integrate language AI capabilities into web and Node.js applications. LangChain began as a Python SDK but now has JavaScript and TypeScript support. By offering developers an easy-to-use interface to leverage Large Language Models (LLMs) like GPT-4, LangChainJS simplifies the process of incorporating advanced natural language understanding and generation into projects.
Popular use cases for LangChainJS are chatbots, automating content creation, enhancing search functionalities, or crafting personalized user experiences. You can do all of this with a limited amount of knowledge about LLMs as LangChain offers a set of abstractions on top of popular LLM providers such as OpenAI and IBM Watson.
Before installing LangChain, let's stop the dev server and run:
npm install langchain @langchain/openai
This will install both the general LangChain library and the library needed to connect to OpenAI. In the next section, we'll be connecting to OpenAI for which we need to generate an API Key first.
Connecting to OpenAI API
OpenAI isn't only the creator of ChatGPT; it also has a platform where you can access the models used by ChatGPT. Developers can sign up for free, and often, will get a small credit of $5 to try out their APIs. On
the OpenAI dashboard, we will generate a new secret key to authenticate our app.
With our key secured, we create an environment file called .env
to store it:
VITE_OPENAI_API_KEY=<your_key>
We're using VITE_
as a prefix so the environment variable gets picked up by Vite.
Now we can initialize the connection in a new file called langchain.ts
:
import { OpenAI } from "@langchain/openai"; const llm = new OpenAI({ openAIApiKey: import.meta.env.VITE_OPENAI_API_KEY, });
After creating the connection to OpenAI, we can create a function to call the LLM and pass our question to retrieve the answer.
Building a query function with LangChain
There are multiple methods to query an LLM using LangChain, each of these methods will behave slightly differently. For this tutorial, we'll use the invoke
method, one of the simplest and quickest available in LangChainJS.
With our connection configured, we can build out the query function in the same langchain.ts
file:
import { OpenAI } from "@langchain/openai"; const llm = new OpenAI({ openAIApiKey: import.meta.env.VITE_OPENAI_API_KEY, }); export async function getAnswer(question: string) { let answer = '' try { answer = await llm.invoke(question); } catch (e) { console.error(e); } return answer; }
This async function takes the question, queries the API using LangChain's invoke
method, and returns the answer. There's a try/catch block around the function so we can catch errors, for example, when we run out of tokens.
Handling form submission to interface with the AI
The final step to completing this tutorial is to use the getAnswer
function in the user interface that we built in the first section. As we're using client-side React, we need to create a few state variables in src/App.tsx
and import the getAnswer
function from langchain.ts
. Also, the getAnswer
function needs to be wrapped in a function that we can connect to the onSubmit
function of the text input for typing the question:
import { useState } from "react"; import { getAnswer } from "./langchain"; export default function App() { const [question, setQuestion] = useState(""); async function handleSubmit(e: React.FormEvent<HTMLFormElement>) { e.preventDefault(); const result = await getAnswer(question); console.log(result); } // ...
We can now handle the submission of the question by adding this function to the onSubmit
in the form
element:
<form className="stretch mx-2 flex flex-row gap-3 last:mb-2 md:mx-4 md:last:mb-6 lg:mx-auto lg:max-w-2xl xl:max-w-3xl" onSubmit={handleSubmit} >
With that, our app can now interface with the AI! We can ask questions and see it return answers that are logged to the console. If you want to display the result in the user interface, you can create another state variable for the answer:
import { useState } from "react"; import { getAnswer } from "./langchain"; export default function App() { const [question, setQuestion] = useState(""); const [answer, setAnswer] = useState(""); async function handleSubmit(e: React.FormEvent<HTMLFormElement>) { e.preventDefault(); const result = await getAnswer(question); setAnswer(result); } // ...
The value for answer
can be rendered anywhere in the user interface, for example, in a text balloon.
What's next?
Integrating LangChain opens up lots of possibilities for automating workflows, analyzing data, providing search functionality, and more. The contents of this tutorial should give you a good start in building your own AI integrations. Feel free to leave any questions below!
If you found this article useful, let me know on X or Bluesky. Please share it around the web or subscribe to my YouTube channel for more exciting content on web technologies.