Name: assistant-ui
Uploaded: 2025-03-01T11:15:20.431Z
Duration: 2 min 33 s
Description: An open-source TypeScript/React library enabling developers to integrate AI chat interfaces into their applications.

assistant-ui

An open-source TypeScript/React library enabling developers to integrate AI chat interfaces into their applications.

At Langchain we want to make it as easy as possible to build agent applications. A big part of agent applications is the UI and the UX that goes along with it. That's why I'm so excited today to show off an integration and a partnership with Assistant UI, a React component library for building these types of agent UI and UXs. 

So we've invested a lot in building agents through L graph, our framework for building reliable and controllable agents. A few of the characteristics that we really focused on with Lang graph are streaming, human in the loop, and generative UI components. The awesome thing about Assistant UI is they have independently focused on all of those as well. 

So there's a really great and natural integration point. I want to show off a quick demo of using Lang graph Cloud, our platform for deploying Lang graph agents and Assistant UI components together. Then I'll walk through how it's built and how you can do the same as well. 

So this is a financial assistant chatbot and it has access to a bunch of tools. Some of them will correspond.

To some gener UI components and some of them will have some human and loop components and it streams everything back so it shows off everything. 

And so let's jump into it. Um I can ask a question. Uh like how much revenue did Apple make last year and I can see that it's using this tool and it streams back the results. If I look at here I can see the result of the tool call as well as the exact input so I have really good visibility into the tool calls that are going on. 

To show off some of the generative UI components I can ask a question like what is its stock price and we've enabled it so that when it calls this tool the price snapshot it shows this little component here this little widget which displays the ticker the price the day change and and the last time it was updated. 

And this is still a relatively simple component but hopefully it shows off how you can use generative UI in your applications. Finally I want to show off the human in the loop component so let me ask something like buy me five of those stocks and this is just a demo so it's not actually.

Hooked up to anything but if you had this in real life you might want to ask the human to manually confirm that what the LLM decided to do is exactly correct. 

So here I have this transaction component and it shows the ticker, the company, the quantity, and the purchase price, and then the total cost. 

And here it gives me this confirm and reject button so it has this human loop aspect for verifying what could potentially be a dangerous transaction. 

This is much more expensive than just searching the web or something like that and so I can confirm it. 

I can see that it goes through and then it streams back the results so that shows off streaming human the loop genui. 

All of these are focuses of assistant UI as well as Lingraph Cloud, which is why there's such a natural integration point. 

Now let's see how we can go about building this application and what the components are. 

So I mentioned assistant UI. Assistant UI is a great React component library for building chatbot-like UIs. 

And if we go to the documentation we can see that there's an integration with Lang.

Graph Cloud which is a new way to serve Lang graph agents that we just launched. So there's a few ways to use it. You can create a brand new project uh using the Lang graph assistant UI template or you can use it in existing react project with the various components that it has. 

We've put together an example of this to make it really easy. So if we go to this assistant UI stock broker we can see that there's a few things in here. If we go into the back end this is where the Lang graph agent is defined and so it's defined using Lang graph JS um and so Lang graph JS is supported in the cloud and in the studio. We can go into the Lang graph.

Json file and we can see our dependencies and our agent definition. 

If we go into the code, we can see the agent as it's defined in index.ts. If we scroll to the bottom, we can see the agent definition here where we have different nodes that do different things. We have a model node. Um, and if we go to where that is defined, we can see that that is simply just calling the model with a given system prompt and we're giving it some tools. 

We have a tools node and this is executing some of the tools. But then we also have these nodes around purchasing stock options and this just mocks it out for this demo. Um, but this is where we'll plug in the human in the loop component and we'll see what that looks like. 

Um, in a little bit we can use lra Studio to take a look at what this agent looks like visually. So we can see that after the start it goes to the agent node and from there it either calls a tool and we have access to web search tools, stock price tools, or it goes into this basically purchase approval flow where it will first prepare the purchase details.

Will then check for purchase approval from here. It will either execute the purchase or it will go back to the agent. And so this is this is lra Studio. This is a nice way to visualize what's going on. We can even interact with the agent here as well. 

So if we add a message, we can say something like hi, what's meta's stock price? And we can see the flow of the agent as it's executing. We can see the tool that it's called the results and then the streaming answer that gets back. This is great for debugging, but this isn't an amazing user-facing UI. That's where assistant UI comes into play. 

If we go back to the app, I want to show off a lot of the functionality and how it all comes together. The first thing I want to show off is streaming, specifically token by token streaming from the llm. This may seem like a pretty basic thing. It's in chat GPT, it's in all the chat apps, but it's a little bit tricky to get right and it's crucial for nailing that experience for chat Bots. 

So let me ask something where I know it's going to generate a long response. Write me a long poem. I can see.

That it responds token by token and it streams that the response quickly and in a nice visual way. This is a tight integration between L graph studio and assistant UI to make this happen. 

Let's now see some tool calls. So let me ask what is the stock ticker for meta. I can see that it shows the tool call that it made. I can then click into that and see information about the response and then the LM continues and generates an answer. Great, this shows what's going on but it's a little bit generic of a tool call representation. 

Let's now look at a generative UI component. So I'm going to ask it for what the stock price of meta is. I can see that it calls this tool price snapshot and then it visualizes the result in a custom component. This is an example of generative UI and we're seeing a lot of applications like this to make chatbots seem more distinctive, intuitive, and user friendly. 

The last thing I want to show off is the human in the loop component. So let me say something like buy me five shares of this. This is a bit more of a dangerous or tricky action because it is.

Writing to the database so to speak and it's not actually in this demo because it's just a demo. But the idea is that you can have these actions that are a bit trickier or a bit more dangerous than just looking something up on the Internet. They're actually updating your account or making purchases for you. 

And so you might want to explicitly have a human in the loop in this case me to confirm or deny these types of actions. And so here I can just press a confirm button and we can see that it sends it back to the llm and continues on its way. Human in the loop is something that we've emphasized a lot in Lang graph and assistant UI has as well. 

So it's a great thing. That's it for this video. I'm really excited about this integration because we've been investing a lot in streaming and Tool calling and human in the loop in Lane graph. But we need a UI to show it off for user facing applications and that's exactly what assistant UI is. So I hope you share AI Agent Store with colleagues.

Note, that there may be slight differences in text and video. Watch video for the original content.

assistant-ui Video