6 Building AI workflows with Langchain.js
This chapter moves beyond single prompt-response interactions and shows how to build robust, multi-step AI workflows with LangChain.js. It introduces chains built from composable Runnables to orchestrate data transformations, tool calls, and LLM invocations with retries and fallbacks. The chapter also emphasizes structured prompt management—using templates and few-shot examples—to produce more reliable outputs, and demonstrates how these capabilities complement, rather than replace, a modern web stack by integrating with the Vercel AI SDK for responsive, streamable user experiences.
Through practical patterns, you learn to compose pipelines via pipe or sequence, manage prompts with ChatPromptTemplate and FewShotPromptTemplate, and stream chain results to the UI using createStreamableUI. The chapter then develops a retrieval workflow end to end: ingesting content with text splitters (notably the recursive splitter), generating embeddings, storing them in vector stores, and querying via retrievers that slot neatly into chains. It covers key cautions such as preserving the order of steps and matching inputs between components, selecting the correct embedding provider, and properly closing and accumulating streams. Conversation memory is added with ChatMessageHistory, BufferMemory, and ConversationChain to persist and leverage context across turns, along with guidance on customizing prompts and avoiding shared memory across chains.
Finally, the chapter introduces agents that implement the ReAct paradigm, enabling the model to decide when and how to call tools (including custom tools and retrievers) to accomplish multi-step goals. It illustrates streaming agent reasoning and results back to the UI, and calls out practical constraints like context window limits from tool descriptions and latency introduced by multi-layered pipelines. A brief module overview situates prompts, agents, vector stores, and parsers within the ecosystem, and advanced orchestration options—LCEL for declarative chain composition and LangGraph for stateful, loop-capable workflows—round out the toolkit for building scalable, context-aware, AI-enhanced web applications.
A typical LangChain operation chain where it processes data sequentially through a toUpperCase function, then a VowelCount function, then via the Language Model (LLM), and finally via the StringOutputParser to parse the output.
The FewShotPromptTemplate class takes five key parameters: 'examples' (a list of question-answer pairs serving as reference examples), 'examplePrompt' (a template for formatting each example), 'prefix' (introductory text preceding the examples), 'suffix' (concluding text following the examples, typically containing the main task or question), and 'inputVariables' (specifying the variables to be provided when the prompt is used).
Sample interaction with our AI agent that formats the answers based on the examples we provided. Behind the scenes it utilized the FewShotPromptTemplate class from the LangChain.js project.
Step by step integration of the LangChain stream results with the createStreambleUI object. Everytime there is an update we push it to the uI stream which in turn updates the UI in real time.
The diagram outlines the process of document embedding preparation and retrieval. It starts with document ingestion from various sources, followed by embedding generation using LangChain to create semantic vectors. These embeddings are stored in a vector database, enabling efficient similarity-based querying during the information retrieval stage.
Managing user messages to improve conversation accuracy. Messages are retrieved from a database, stored with a unique session ID, and converted into a ChatMessageHistory format. This history is used to create a ConversationChain that handles user queries, using stored context to enhance response accuracy. The history is integrated into other prompts to refine the model’s performance.
The iterative decision-making process of a LangChain agent. Starting with user input, the agent cycles through decision-making, tool execution, and observation phases. The agent can utilize multiple tools (represented as Tool 1, Tool 2, or other agents) as needed. This process continues until the agent determines it can provide a final response to the user.
Sample interaction with our AI agent that uses Wikipedia Run engine to return a search result and display it to the user. Behind the scenes, the agent performs one or more calls to the provided tool to reach its end goals as instructed by the system prompt.
Summary
- LangChain.js provides a framework for building context-aware AI applications, integrating features like agents, memory, and chains to enhance user interactions.
- The framework allows for effective prompt management using tools like PromptTemplate and few-shot learning strategies, enabling developers to create more accurate and relevant AI responses.
- The modular design of LangChain.js includes various packages that simplify different aspects of development, such as document loading, vector storage, and output parsing.
- Runnables in LangChain enable flexible and composable workflows by allowing developers to chain together multiple operations for processing data efficiently.
- The use of memory in LangChain enables applications to retain conversation history and enhance the contextual understanding of ongoing interactions with users.
- Integration with Vercel AI SDK allows developers to combine the strengths of both platforms, leveraging LangChain's advanced features while utilizing Vercel's efficient UI updates and structured data handling.
- Agents in LangChain can utilize both community driven and custom-made tools for real-time information retrieval, providing dynamic responses that enhance user experience.
Build AI-Enhanced Web Apps ebook for free