Hi there, this is Christian from

Langchain. Just a couple of weeks ago,

we released version one of Langchain and

Lang Graph. And one of the cool features

of it is that it makes it really easy to

stream events and results from the agent

down to any type of front end that

you're using, whether it's React, Vue,

or Swelt. So, in this video, I want to

build a little CHPT clone that shows you

how you can build and create agent right

in your Nex.js application. Every

longchain agent maintains a state

throughout its entire lifetime. That

states contain information like messages

that it exchanges with the LLM as well

as tool calls or specific custom states

that middlewarees add in order for it to

work. This state information we want to

display in our front end. We want to

display the messages as well as the tool

calls and eventually information that

come from the middleware. Like in the

case of the summarization middleware, we

want to show when the summarization

middleware actually summarizes the

content in our context window. So let's

look at our nextjs application. It's a

very basic chat application that allows

me to interact with the agent through a

simple text input field at the bottom.

So if I ask the agent what is the

meaning of life,

it will stream down its result to the

front end.

The application itself is very basic.

Starting at the package JSON, all the

packages we need is a provider package

that makes it very easy to connect with

a large language bottle provider. We

need lang core because it provides some

basic primitives in order to work with

messages from the LLM. We need langraph

which is our agent runtime and agent

framework for help that helps us to

stream down the messages to the front

end as well as the langraph SDK that

provides nice front-end hooks for our

React application. And last but not

least, we need launch in order to build

and create these agents.

The application has a simple API

endpoint that does nothing more than

parsing the request payload and passing

it in our agent function. I like to

abstract away the whole agent into its

own module. So I can totally test it

with unit test as well as just separate

the concerns between API endpoint as

well as agent implementation. So this

basic agent defines a model as you can

see here a cloud 3.7 set model. It comes

with a tool that allows me to fetch

custom information from a fake database

that I have here right in the code. And

then all it does is it puts these

primitives together. It calls the create

agent which we import right from lchain

and this create agent function gets the

model the tools that we want to provide

a checkpoint and a system prompt. Now

the checkpoint is interesting. The

checkpoint allows us to remember the

threads and conversation that we have

with the agent. So if we go back to the

front end and say hey I'm Christian

and say after that what's what was my

name

you will see that it will remember me

and this wouldn't be possible without a

checkpoint. Lambda provides different

types of checkpoint to allow you to

store the state of the agents in

different types of databases. The one I

use in this application is a memory

checkpoint. So the the state is being

stored in memory, but you can also use a

radius checkpoint or an SQL

checkpointter if you prefer different

database types. And lastly, we create a

stream for our agent. Uh you can call

the stream method. It takes the input of

the front end. We provide an encoding

property which is going to be an event

stream. We are interested in all types

of information from the agent that

includes updates from each node within

the agent as well as the node values and

the messages that are being exchanged

between the agent and the LLM. We're

providing a configurable which is a

config object that contains information

like the thread ID which is important to

identify our conversation. And lastly,

we define a recursion limit to ensure

that our agent doesn't run into an

endless loop of continuously calling

tools or or running into an reasoning

endless loop.

Lastly, we're going to define a response

for our endpoint which contains the

stream and some custom headers to make

sure that we're returning an event

stream. Now, all of this is being

initiated in our chat interface. The

chat interface component takes an API

key and we're creating in order to talk

to our back end and providing that API

key to our back end. We are defining a

custom transport. That custom transport

is a fetch stream transport which we

import from the langraph SDK package.

And here we can define the API endpoint

to which we want to talk and where our

agent is deployed. And we're using the

on request hook in order to pass along

our API key. Now in most application you

probably have a large langu an API K for

your large language model provider

stored within the back end. Here you can

see we can also just have the user bring

their own key and then we're all

wrapping this into the Ustream hook. Now

the Ustream hook will update the

component whenever a new message from

the agent comes in. So this allows us to

now wrap or loop over through all the

messages that we see. If we have no

messages so far, we're going to display

a welcome stream. And if we guess

messages in, we loop over them and

display a black bubble when it's a human

message. So a user generated message.

And we're displaying a gray bubble if

it's an AI message.

At the end, we're going to show a little

loading bar that is active whenever the

stream is running. In addition to that,

I have an error message bubble uh that I

can display whenever the stream receives

an error for some reason. as well as I

show associated tool call bubbles. So

every AI message essentially has access

or can potentially call tools. And so we

have a little function here in the tool

calls by message where we basically

convert all the tool calls being made by

the LLM into tool messages that we

associate with a certain AI message. So

we can display these messages in order.

But that's essentially it. So if we go

back to our application and restart and

take one of the example prompts,

you can see here that it now starts

thinking about what it needs to do. It

finds the two call in order to find the

customer with that ID. We can display

the two call arguments as well as see

the two call results as well as whether

or not the two call was successful. And

later we can see what the output of that

agent is. Awesome. In this video, we

learned how to integrate a launch create

agent right within an XJS application.

It shows how easy it is to display

messages as well as tool calls in a

conversation-like interface.

In the future, you may consider

deploying this to production. Check out

our LSmith platform docs to see how you

can deploy agents at scale with tracing

and observability in mind. You can find

the entire codebase of this application

right within my GitHub profile. So check

out

github.com/christenwoman/nextlankchain

nextjs and feel free to clone run it

yourself and just build cool AI

application. Thank you for watching and

see you at the next