LangChain Concepts Explained for Web Developers

Jamie Wen
3 min readJun 13, 2023

LangChain is a framework for developing Large Language Model (LLM) applications. Lang stands for LLM and Chain is the same concept of Promise Chains in JavaScript.

Think LangChain as React, Vue, Angular or any other web frameworks that help you create web app easily. LangChain helps you create LLM apps or bring LLM capability to your web app easily.

LangChain as a Framework

Note: LangChain is not the model itself, but rather a framework that simplifies the access to various models.

I am going to explain some key concepts of LangChain in this article. OpenAI as the model provider and LangChain as the framework to interact with OpenAI model.

The Normal Way

We either prompt in the browser or via OpenAI API.

Basic LangChain Concepts

LangChain abstracts some common concepts into several classes for developers to consume.

LangChain: Prompt, Model, Output Parser

Firstly, LangChain provides Prompt as a class, your message becomes the input of a function.

Secondly, LangChain wraps model to a class as well, you can choose the one you’d like to consume.

LangChain also provide OutputParser that helps you convert output into a certain format.

Ready-to-use Modulars

With those abstracted concepts, you can choose which implementation you would like to use.

Chains 🔗 🔗 🔗

Imagine a use case, the system a customer email from overseas, you need to translate to English > generate a short summary > profile the sentiment > generate a response > customer support to review

Storage

Memory serves as a temporary storage. It stores chat history like the chat history in ChatGPT. Note: LLM doesn’t remember any previous interaction. You need to provide it in your input parameter in every request. The context length limits the sun of tokens input + output.

Document Loader, Text Splitter, and Vector Storage serves as external knowledge base.

Tools and Toolkits

LangChain Tools and Toolkits are very useful and can be compared to ChatGPT Plugins in some ways. It’s a set of utilities to interact with the world like for example:

Agents

Agent is the magic of LangChain. You can wrap a piece of logic into an agent for reuse purposes. Take zero-shot-react-description agent for example, by using this agent, you prompt the LLM to cycle through Reasoning and Action steps. Enabling a multi-step process for identifying answers without explicility putting your instruction into your prompt.

Most importantly, LangChain has a JS version. Although it is less mature compared to its Python equivalent, but it opens to the whole JS community. This is huge.

Check out LangChainJS

--

--