📱

Get Our Mobile App

Take your business learning on the go!

Download on the App StoreGet it on Google Play

AG-UI Protocol: Inside TanStack AI's New Protocol

Alem Tuzlak9:50

Transcription

Hey guys, a little bit over a month ago, we at Tens AI made an announcement post talking about how we are AGUI ready, and you might have seen it. And this was the post.

So basically, here we talk about how we are built on top of the AGY standard now and how we are using it to standardize in the industry. And I think one of the biggest questions, and if you even scroll down here a bit, you can see that David Kpiano commented the same question, and basically the question is, what is it? Well, let's talk about it.

So, what is AGUI? Well, the AGI protocol is an open-source, lightweight protocol that allows builders of agents to standardize upon a standard easily, allowing people to mix in different technologies and different providers. And when I say providers, I don't mean stuff like OpenAI and Tropic, but I mean stuff like AI SDK, TC AI, Master, and some other agent frameworks to be used together.

And how this works is you have this protocol that talks these events that the providers return. They are standardized. So you can easily swap one in or out. And if I scroll down here a little bit, and if I open this picture up, you can actually see that the agent. So this would be your Taste AI, Mastra, Langraph, Langchain, whatever you use. And the agent itself does some work. So, for example, calls some tools, processes some images, processes text, whatever. And then it needs to respond back to you, the user. So the way it works is it sends data across the wire, but the data itself is standardized with the AGUI standard. And because of this, when your application gets these events, it knows what it's going to get and it can consume them easily. So, for example, your application gets some tool calling events, it gets some text message events, and then it knows, for example, "Okay, this is a text message, this is a tool call. I need to do this or that." And that is how AGUI works. So it sits in between your agent and your application.

And as you can see, these are kind of the supported agents, but I think this image is a little bit outdated, but they support Mastra, Pyantic, Google SDK, Crew AI, Langraph, Llama Index, EG2I, Agno, and Tstack AI. So basically, what you can do is, for example, if you're using a Master agent, it emits the same events as the Tenstack AI chat interface does, and you can easily swap one with the other without any breaking changes, which is kind of really cool and awesome. And I think standardization is one of the most important things moving forward in the industry, and I think this is the step in the right direction because of that.

All right, so what does this look like in action? Well, if I close this image down, and if I scroll down here a little bit, you can see that they have this interactive dojo, and this is actually live. So I can check it out. So this dojo allows me to like select an integration, and I can do something like Master, and then I can do something like backend tool rendering. "Okay, I want to see the weather in San Francisco," and I click it, and it does it. So that's me using Mastra, and this responds with TGUI events. So, for example, let's say tomorrow I wanted to add another integration partner into my application. For example, for some reason, I want to use Langraph because they have some feature that Mastra doesn't. I go to Langraph Python example, I go to backend tool rendering, I say "weather in San Francisco," and again, it works. And this responds in the exact same way as the Master agent. So it's just a drop-in replacement. And that's the cool thing about AGUI because it's an open standard. Everybody who standardizes upon it can easily be used and swapped out and swapped in. And this is really cool because, for example, if one integration partner has a really cool feature that you like, and another one has another one, you can use both of them. And this is really cool.

And if I switch back to the AGI overview, you can like see the supported integrations here, and they support Langraph, Crew AI, all of these guys. So basically Amazon. So all the big players out there, and even the smaller ones. And you can even see like the community adapters, and this list keeps growing. And now Tens AI is a part of that.

So let's talk about how this actually works under the hood. So if I go to core architecture, you can see that it's an event-driven communication and it's bidirectional. And what that means is it's basically a standard. So where the client talks to the server, and the server talks to the client, or rather, the server talks to the agent, and the agent talks to the server. So that's really cool because that way you're standardized end-to-end. So you don't really have to worry about it.

And another cool thing that is important is it's transport agnostic, which means that you can use websockets, you can use server-sent events, you can use whatever. You can use like pigeons to carry over the messages over the actual layer. So it's really up to you. And I think this architectural overview kind of shows you in a nutshell why it's so cool because as you can see, for example, you have your front end, and then you have your AGI client here. And basically, this would be some abstraction that talks with your server. So, for example, you could use something like Co-pilot Kit and then talk to the backend, and then, for example, that consumes the AGUI protocol events that are coming either from your agent directly or, for example, some proxy or some third server. So as long as it's a UI and your UI can talk with it, it doesn't matter where it comes from. So that's also cool because you can like spin up five different servers, and they can all talk to each other. And as long as it's talking with AGUI, it doesn't matter for the client because the client just consumes the same events and it doesn't care where they came from. And this also allows you to build some cool abstractions where you can have multiple servers because as long as they're talking AGI events, you really don't have to worry about actually like converting one message type to the other or converting a tool call to another type of convention. It's all standardized.

And then the last part of all of it is the events that are actually being emitted. And these are mind-blowingly simple. So if I scroll down here, you can see that they are kind of categorized into different categories. And one of them is like lifecycle events, text message events, tool call, state management events, activity, blah blah blah blah blah. And all of these serve different purposes, but they are really simple at their core. And the base event properties are like what's common on every one of them. And that's the type of the event, the timestamp that it happened, and the raw event. And then you kind of get into these lifecycle events where you have your agent and the client, and then you, for example, emit a "run begins" event, where you emit "run started," and then you have this kind of loop and iteration where anything can happen, but it's very simple where you like "start a step" so here, and then the "step is finished." And then this can happen multiple times, and then the "run is finished" or it errors out. And that is kind of your main loop.

And then in the step execution, you have things like tool calls, reasoning, and stuff like that. And you can like even go through the this list of events and see what it offers. But basically, for example, if you look at the text message events, you, for example, have the "text message start" event. This marks the start of streaming text. Then you have a bunch of content chunks, and then you have a "text message end." And this way, you can like build multiple messages and do whatever you want. And then, for example, if I go down to the tool calling, you also have like a "tool call start," and then you have "tool call arguments," "tool call end," and "tool call result." So basically, the tool call has started, these are the arguments, it has ended. Here's the result. And it's like really simple, and it's just a simple standard that you implement, and you're off to the races.

So yeah, that's pretty much it. And like you can see on the side, like it has agents, middleware, messages, reasoning, state management, civilization, tools, capabilities, generative UI, whatever you name it. And this is really cool. And I think you really should be excited about this because standardization is one of the cornerstones of successful software, at least in my opinion. And I think this is a major leap forward to reaching that common ground where everybody's using the same thing, and then you, as the consumer of all of these frameworks, who is already overwhelmed with all of it, don't have to worry about the protocol and inter-agent communication. And that's pretty much it. I hope you like this one. Let me know what you think in the comments. And thank you for watching. See you in the next one. Bye.