Build an LLM app with Node, React, and LangChain.js

In this tutorial, we'll run a large language model application in Javascript using Node, React, and Langchain. This tutorial will use an LLM React Node app template to get the project started.

This tutorial assumes the reader is familiar with Git, Node, React, and Yarn.

First, clone the LLM React Node app template repository and set it as your current directory.

git clone https://github.com/golivecosmos/llm-react-node-app-template.git

cd llm-react-node-app-template.git

Before running the app locally, we need to set up an environment file to connect the app's Node server to an LLM. In this example, we'll create an environment file with an API key for OpenAI's language model. To see an example of what the .env file should look like, see the .SAMPLE-env file included in the template.

touch .env

echo ENABLED_MODEL_STORE=OPEN_AI >> .env
echo OPENAI_API_KEY=<your_API_key> >> .env

Now we're ready to run the app. We can start it up by installing all its dependent packages and then running the backend and frontend servers.

# install packages 
yarn

# start the backend server
yarn start-server

After starting the backend server, open http://localhost:3100/ in your browser to confirm the server is running. You'll see the welcome message in your browser.

Now let's start the frontend server. Open a second terminal window in the project's root directory and start the frontend server.

yarn start

We're ready to check out the app and send prompts to the connected LLM.

Open http://localhost:5173/ in your browser and you should see a basic input prompt to communicate with your language model.

And now you are up and running 🚀.

Curious for more? Follow us on X (Twitter) to continue the conversation.