Transcription
What's up everyone? It's Brace from LangChain, and I'm super excited to show you all the Agent Chat UI today. This is a React and Next.js application we've built to allow anyone to connect to their LangChain graph, or any LangChain deployment, whether it be a local or production deployed graph. And as long as it has a messages key, you can interact with it with this UI, uh, through a chat-like interface. It also supports rendering tool calls and human-in-the-loop. So I will show off how to connect to a local deployment right now.
First, I'll navigate to my terminal and I'll run `pnpm agent` to start my local agent. That's then running at `http://localhost:2024`. And I'll set the graph ID to `chat`. I then hit continue, and this is going to be pointing to a simple chat agent, which just sends a simple LM call to OpenAI. So I can say something like, "Why is the sky blue?" And now I hit send, and we can see it gives me back a simple text response. Since we're using LangChain, we'll get access to all of the nice time-traveling, forking, and so on features. So I can hit the refresh button, and this is going to rerun the graph from this point in the state, and it's going to give me a new result. I can then go back and forth between these two forks. I can also edit this initial, initial message and say something like, "Hi," and it's going to edit that point in state, send a new message, and I can once again go back and forth between any of these forks at any point in time. I can also inspect all of the past chats and create new chats.
Now, when I'm done with this, I can simply clear the query programs, and I can set it to a new graph. So I'm going to set it to `email agent`. This is a simple implementation I made for what you would use to build an actual email assistant. And it uses human-in-the-loop. We use a standard human interrupt schema, which is exported from the LangChain library. And it's a way to call the interrupt function, which pauses your graph, passing in this specific schema. And then when the Agent Chat UI detects you have interrupted your graph with that schema, it's going to render a UI that allows users to edit, inspect, and respond to your graph based on that interrupt. So I can say something like, "Write me an email to brace@langchain.com about how much I love the Agent Chat UI." We can see that it calls the `write email` tool, generating these fields for the subject, body, and to, and then it calls the interrupt function with that specific schema. And the Agent Chat was able to detect that the human interrupt schema was passed, and it's rendering this nice UI for us to interact with this interrupt. So we can see here I'm allowing for editing, accepting, responding, and ignoring this interrupt item. I can also inspect the state, right, and expand this to see the current value of the state of my thread. I can look at the description, if this was defined—in my case it was—where I can see the subject, to, and body, and so on. And now I can go, and let's say I want to respond to this, right, it's your name, and I want to say, "My name's Mark," update the sign-off. I then hit submit, and it's going to send a `type: response` to the interrupt, which is then going to rewrite my email, now passing in Mark as the sign-off, and interrupt again. So I can approve it, um, or ask it to make more changes. I like what it, what it shows; it has Mark right there. So I hit accept, and it's going to then send a `type: accept` to the interrupt. So that is how you would interact with the chat site using just plain chat, tool calls, and tool results, as well as human-in-the-loop.
Now let's talk about the different ways you can access this site. The first is, of course, `agentchat.reel.app`, which is the deployed site. You can connect to any graph, local or deployed. But we also have open-sourced this code, so you can clone it at the Agent Chat UI GitHub repo. And then the third way is via `npx create-agent-chat-app`. So I'm going to show you now how you can do this locally. And that's just going to bring in all the code which renders this web app locally to your machine, so that you can edit it, make modifications, or just run the app locally. So I'm in my terminal, and I'm going to run `npx create-agent-chat-app`. Hit enter. It's going to ask me if I want to install it. I'm going to say yes. Once it's installed, it's then going to prompt me with what I want the name to be. I'll just accept the default of `agent-chat-app`. Hit submit, and then it clones this entire repo locally. I'll run `pnpm install` to install the dependencies. And while this is running, we can open up, up in my IDE, and we can see it has successfully pulled in all the different code components and the rest of the code that I need to render this and run this app locally. So the installation is done, and now I can run `pnpm dev`, which is going to run this app locally. I then open it up in my browser, and after a second—the first load is always going to take a second—it's going to load the exact same app we saw there. Now this is running. I'm going to show you how you can connect to a deployed graph, not a local one. So I'm going to first navigate to one of the graphs I've deployed in LangSmith. So I have this React agent tool server deployment. I'm going to copy it and paste into my deployment URL. The graph ID is `agent`, and I have my LangSmith API key set because it's a production deployment. I then hit continue, and I can say a message, it's like, "What's the weather like in New York?" I hit send. We can see it's going to say it's going to help me check the weather. It's then going to call the `get weather` function with the city of New York, and it's going to call the `get weather` function and get the actual weather. This is the tool result; this is the tool call. We can see it summarizes that down here. So that is how you connect to a deployment URL, run it locally, use the `npx create-agent-chat-app` command, use the deployed site at `agentchat.reel.app`, and of course, all the links to everything I've mentioned in this video will be in the description. I hope you all enjoy it, and I'll see you in the next one.