Introduction

In this tutorial, we will build a stockbroker assistant using LangChain.js, LangGraph.js and assistant-ui.

We will go through the necessary steps to integrate assistant-ui with a LangGraph Cloud endpoint. Code snippets focus on the setup of the frontend, but we will highlight relevant sections of the backend code as well.

This agent leverages the following features:

• 🚄 Streaming of messages from LangGraph state to assistant-ui
• 💅 Rich text rendering using Markdown
• 🛠️ Generative UI: Mapping tool calls to tool UIs
• 🔁 Approval UI: Confirming tool calls before execution (human-in-the-loop)

Prerequisites

• Node.js 18.x or higher

Final Result

• Demo: https://assistant-ui-stockbroker.vercel.app/
• Source Code: https://github.com/Yonom/assistant-ui-stockbroker

Get Started

Begin Part 1 of the tutorial by setting up the frontend.