In the last videos, we talked about how

to build an agent with langjs. We gave

them various capabilities with tools and

skills and we fine-tuned their behavior

with middleware. However, we never

really talked about how to stream an

agent response to the actual

application. Let's change that. In the

next series of videos, we will look into

generative UI and how you stream various

of agent information to the front end.

Let's dive in. So for this series of

videos, I created another sandbox

environment that helps us to showcase

different streaming patterns that we

have when building generative UI

applications. This application is fairly

simple. It uses a V version 7 to render

and host the application and I'm using a

Langraph dev server to host my agents.

that has a couple of advantages,

especially when it comes to branching

and more advanced agent patterns that

we're going to talk to in the upcoming

videos. If you build agents with

longchain, all you need to do is

essentially just exporting the agent in

one of your subdirectories and then you

can easily create this config file that

helps you to host these agents very

easily. I just need to call npm create

langraph set the config command and then

provide the path to my project. So if I

call this, it will detect all the agents

within the directories that I have in my

application and then creates this config

file that helps me to start a langu dev

server. So with this dev server open, I

have now an endpoint and that allows me

to talk to the agent from my UI. So

let's look into the two calling agent

first which is a very basic agent that

helps us to get weather information as

well as look up the latest news or do

any kind of web search. So the

implementation looks as follows. We have

a model that we're using GPT4 mini. Then

we have a get weather tool because

everyone likes weather tools uh when

displaying agent behavior. So we use

another get weather tool where we

actually pull the information from the

open mio.com API

and then we apply a provider native tool

to the agent as well. In this case we

use the web search tool that is embedded

into the openi provider package to give

the agent access to the internet.

The front end is also very simple

implemented. What you need to do to

access the agent on the langraph server

is to import the Ustream method from the

Langraph SDK react. Right now we only

have the Ustream hook available for

React, but we're working on making that

one available for Vue, Sweld, Angular,

and all the other frameworks as well.

So within React, we now use the use

stream hook and reference the tool

calling agent to interact with in this

view. Again, if you deploy your agent

with Langraph, you can have as many

agents as you want in your application.

They're all deployed at the same time.

And with the Ustream hook, you can

reference which agent you want to

actually talk to. And this two calling

agent reference refers to how you named

your agent within your Langraph config.

And that langraph config then points

lang graph to the file where that agent

is implemented which is in this case the

agent ts file where this agent is being

exported. So this makes running agents

and communicating to different agents at

the same time within the same

application very very easy. The languff

server is by default deployed on

localhost 2024.

And with the stream hook, we now have

access to messages that come from the

agent as well as are able to essentially

send new messages to the agent. You can

see here in the handle submit handler

that is being triggered whenever I send

a message to the agent. We can submit

that message by calling stream.submit.

In order to render the messages, all we

need to do is to map over stream

messages, which gives us all the

messages that are being streamed down

from the server

and we can render our tool calls when an

AI message is being rendered as well as

just render the message itself natively.

You can see that every message which is

part of the Langraph SDK has a different

type. So for the human message, we want

to display a human bubble with a

different color than for instance for

the system message or for the AI or

assistance message.

Tool calls in general are part of an AI

message. Every LLM that wants to make a

tool call within the agent environment

attaches the information about that tool

call within that AI message. So in order

to render two calls in our UI, we have

to look into the AI message to find out

which two calls are available. So that's

is this is why we have this if statement

here. Whenever the message is an AI

message, we look into if that AI message

has two calls and for that we get the

have the get two calls method from the

stream that helps us to kind of like get

the right two call message based on the

AI message provided. And when we have

two calls, we then just render a tool

call card. That tool call card now

renders different types of tool UIs

based on which tool has been executed.

Now for the get weather tool, we have a

specific weather tool card where we can

then render not only the input of the

tool which is in this case the location

but also different outputs like the

condition, the temperature, the wind and

the humidity.

Let's check this out. So I'm in San

Francisco right now and it looks pretty

clear outside. So, let's see if our

agent has the same opinion about that as

well. And you can see here it renders

the tool call properly in a nice little

card. And it tells me that we have 10.8°

Celsius outside right now. And then I

render the assistant message right below

that tool card.

Now, when I want to search for AI news,

you will see that no weather tool card

is being rendered because the weather

tool is not being executed. And we

essentially just render the assessment

message that comes right after the human

message which is our input. Now if you

want to learn more about streaming, we

have enhanced our documentation with a

specific section on front-end streaming.

Here we go all into where you get the

streaming primitives, how you use

Ustream, the Ustream parameters that

allows you to even more configure the

streaming behavior as well as the return

types and what access you get from the

agent. as well as we go into different

streaming patterns like human and loop

wheezing information or custom uh state

types. Um all of that we will cover

within the next videos as well. Thank

you for watching. Make sure you follow

this channel so you don't miss out on

the following videos where we going to

go into more depth in different

streaming patterns from rendering human

in the loop workflows towards resuming

agent streams displaying reasoning

information as well as sending custom

events to the UI. So don't miss out on

that. Also let me know if you are

interested in specific streaming

patterns that you're struggling with.

I'm happy to showcase them as well. See

you in the next video.