Loading video player...
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.
Most “streaming” agent UIs are built around token streams. That works — until you try to build a real UI. In this video, Christian Bromann shows how to stream typed agent messages from a LangChain agent into a React UI, without parsing text or guessing what the model is doing. We’ll set up a LangGraph server, stream messages in real time, and render type-safe agent output directly in the UI — the same pattern used for reliable tool-calling UIs. This is the foundation pattern for building trustworthy LangChain agent UIs. 📚 Documentation: https://docs.langchain.com/oss/javascript/langchain/streaming/frontend 🧑💻 Example Application: https://github.com/langchain-ai/langgraphjs/tree/main/examples/ui-react