// transcript — 558 segments
0:00 The Future of SaaS is Agentic Experiences
0:01 I've got something really exciting that I've been exploring recently that I want
0:05 to share with you. It's all about creating aic experiences with something
0:10 called AGUI. Now, let me set the stage for you a bit first. There's a good
0:14 chance that you're stuck on the idea that we need to be building apps or SAS
0:20 platforms around our AI agents. But that isn't where the future is headed. The
0:25 real shift is embedding agents into our applications so they become a natural
0:29 part of the product experience. And it seems natural, right? I mean, when the
0:32 AI height bubble bursts, the products that are going to be left over are
0:35 generally not going to be the ones competing as agents, but instead the
0:40 ones that deeply integrate AI agents into a product that delivers its own
0:45 unique value. That's what I mean by agentic experiences and the future of
0:49 SAS because these platforms are the ones that are not going to be wiped out as
0:54 our more general agents like chat GP and operator get more powerful and make the
0:58 more niche agents just simply irrelevant. So right now I'll introduce
1:01 you to how to build these kinds of agentic experiences which are not
1:05 trivial by the way generally a lot harder than building isolated chat bots.
1:10 But luckily I have the tech stack for you to make it simple. So, I'll
1:14 introduce you to that, get into some demos and really important principles,
1:17 and then we'll build together. I'll even take an agent that I've created
1:21 previously on my channel and create a full application around it. So, the
1:26 primary part of our tech stack here is a protocol developed by the C-pilot Kit
1:31 team called AGUI. I covered it on my channel around when it first came out.
1:35 Super powerful stuff. Now, the big question is, what does this actually do
1:39 for us? Well, simply put, AGUI standardizes how front-end applications
1:45 connect to AI agents. It's like MCP, but instead of connecting agents to tools,
1:49 we are connecting agents to our applications in a standard way. It's
1:54 fully open source. So, they have this GitHub repo, which I'll link to in the
1:57 description. They have a nice diagram here that shows how it works at a high
2:02 level as well. So we have AGUI kind of as a middleman here that provides a
2:06 standard of communication between our front-end applications and our AI
2:12 agents. And so as long as both have support for AGUI, which all of these AI
2:18 agent frameworks do, then we have this seamless communication that makes it so
2:21 we can build full applications in hundreds of lines of code instead of
2:25 thousands and thousands. And that's what we'll see as we build together and go
2:29 through some of these demos. And so we just have to pick our front-end library
2:33 and our AI agent framework. And then AGUI takes care of a lot of things. And
2:38 so for our front end, we're going to be using Copilot Kit. This is a React
2:42 library that makes it very easy for us to build userfacing agentic
2:46 applications. It integrates natively with AGUI, of course. And then out of
2:52 all the options we have for our AI agent framework, you know, if you've been
2:56 following my channel that paid AI is my favorite. And they recently added a
3:01 direct firstparty integration between Copilot Kit and Pineanti through AGUI.
3:06 They even have an AGUI doc section in Pideant AAI. So, I'm super excited for
3:10 this. This is actually the catalyst for me to make this video and I've been
3:14 talking to the Copilot Kit team about this and actually asking for this
3:17 integration. So, I'm super excited that it's finally here because now we can
3:21 build these kinds of user interactive applications with Pyantic AI agents
3:26 under the hood driving the whole thing. And these are the demos that they have
3:29 for us that I was talking about earlier. I'll link to this in the description.
3:33 It's a great resource to just explore the power of AGUI. So, they have all of
3:38 these different demos that each represent something that would very much
3:43 not be trivial to build without AGUI. But with AGUI, it's really easy. You can
3:48 even see the code for both the front end like with copilot kit here and the back
3:52 end like I have paid ai selected here but you can even just select any AI
3:56 agent framework you want and it'll immediately drop that in in the back end
4:00 and then we have to change nothing in the front end that's what agui gives us
4:05 that standard communication so we can move from langraph to eggno or eggno to
4:09 panty and our front end app doesn't have to change at all so let's actually see
4:13 this in action like I want you to see how this really does unlock a entic
4:18 experiences for us. Like in this example right here, it is a recipe builder and
4:23 there's a state sync between our front end and our backend thanks to AGUI. So
4:27 like for example, I can add an ingredient here and I can say I'm adding
4:31 in beef, one pound of beef. And then I can ask my agent, what are my
4:35 ingredients? And it's going to immediately recognize the changes that I
4:39 made in the front end here because we have that two-way sync. There we go. We
4:43 got our ingredients. And then I can do the other way around. And I can say I
4:49 want to make a recipe with a lot of beef. All right. So now instead of
4:52 syncing the front end to the the backend agent, it's now the agent that's going
4:56 to be updating our front end here. So it's creating the recipe and boom, it
5:00 renders out everything in a very beautiful way in the front end. So we
5:04 have our typical chat application on the right hand side, but then it's deeply
5:08 integrated into the rest of the components of our front end. That's what
5:12 I mean by aentic experiences. Really, really nice. We have our instructions
5:17 here. We can actually improve it with AI as well. We have our list of ingredients
5:21 and I can continue to collaborate with the agent here making changes back and
5:26 forth to make my perfect recipe. And obviously it's just a very simple
5:29 example here. But yeah, definitely play around with these different things like
5:33 human in the loop collaborating with our agent toolbased generative UI. So we can
5:37 actually build tools in our front end that we give into our AI agent
5:41 dynamically. There's so many powerful things here. And like I said, we can
5:46 view the code. So we can see exactly how the front end was built with Copilot Kit
5:50 and how the back end was built with the Pantic AI agent. All right, so now that
5:54 you know how AGUI works and what it really gives us, let's get into actually
5:58 building with it. So the easiest way to get started with building these Aente
6:03 experiences with AGUI is to follow this quick start, which I'll link to in the
6:07 description. And so this is the copilot kit documentation and they have an
6:10 entire section for working with paidantic AI specifically and they do
6:15 that for all of their integrations. It's really really cool. And so to get
6:19 started we just have to have mpm installed on our machine and we can copy
6:23 this command here. So I'll actually go into my terminal and let's walk through
6:26 this really quickly. So, it's going to set up a new project for us using
6:30 Copilot Kit as the front end. And then we're using AGUI here. And we can select
6:34 our agent framework. And so, I'll just say test here because I have something
6:37 else set up already that I'll demo for you. And there we go. We can select our
6:41 framework. Like I can say I want to use Pinantic AI. There we go. And so, it's
6:45 going to open up your browser for authentication because there is a cloud
6:49 version of Copilot Kit. We don't actually have to pay for anything
6:53 though. Um, and so we can just get through this and authenticate and then
6:56 I'll come back once I have this done. Okay, there we go. So, I'm signed in. It
7:01 creates a Copilot kit cloud API key as well if you want to host with them. You
7:04 don't have to though. And so, for demonstration purposes, we're not going
7:07 to be doing anything with that right now, but yeah, they even give us some
7:11 documentation here. And so, we can open this new folder that was created for us.
7:15 And so, I have it open right now. And then there's a readme here that walks
7:18 you through the quick start. So, how you can get things set up in both the front
7:22 end and the back end. And it's literally just a couple of commands. Like, it's so
7:26 easy to get this up and running. And that's going to give us a quick start
7:30 that's going to look kind of like the demos that we saw here. But now we have
7:34 something that is running entirely locally. And there's a couple of
7:38 different things we can try to really see the power of AGUI. And we can start
7:42 to build on top of this application as well. But I'll just show you really
7:45 quickly. Like for example, I can say set the theme to green. And so this is a
7:50 tool that we actually build in the front end and send into our agent. So our
7:56 backend agent, thanks to AGUI, doesn't even have to know that there's a tool to
7:59 change the theme. And we just pass that in from the front end. I can also say
8:06 write a proverb about the difficulties of SQL. All right. So we'll send this
8:09 in. It'll make a proverb for us. And then boom, we immediately have that
8:13 state sync like that other demo I was showing you where now our front end has
8:17 this proverb here. And it's displayed and rendered out in a nice rain. I can
8:21 say write another one. And so we can do another state sync here. And then I can
8:25 delete one of these as well. Like I'll just delete this first one. And I'll say
8:30 I deleted one which is left. Right? So we can know that the front end is also
8:34 syncing back to the back end as well. And then the last thing that they have
8:37 for the demo here. I'm just trying to like show you the different kinds of
8:40 things that we can do with this front end. It's really, really neat. We can
8:44 also render out components in our chat UI. So, we're not limited to just having
8:49 a bland conversation here and then passing things into the rest of our app.
8:52 We can also render out cool things here. So, I can say, uh, what is the weather
8:57 in Orlando, Florida? And it's going to render out a really nice looking card
9:01 here. So we can take tool calls from the back end and standardize the format like
9:05 actually make it look like a nice component in our React frontend. So
9:09 super cool. That's what we have for our quick demo here. But now let's actually
9:14 use this as a starting point to build our own applications on top. Now to
9:19 build on top of this application, we're not going to dive straight into
9:23 implementation. There's one really cool thing first because the co-pilot kit
9:29 team, they have built a vibe coding MCP server. Now, you know that I'm not the
9:32 biggest fan of vibe coding. So, maybe this isn't the best name for what I'm
9:36 about to use it for, but this is an MCP server that's kind of like archon for
9:41 knowledge retrieval. It gives our AI coding assistant the ability to search
9:47 through the co-pilot kit and AGUI documentation and best practices. So it
9:52 becomes our expert guide on our implementation. Super cool. So if you're
9:56 building any kind of agentic experiences with this tech stack, definitely use
10:00 this MCP server. That's what I'm going to be using right now. And they have
10:04 instructions here based on your AI coding assistant like cursor or client
10:08 or windsurf exactly how to hook it up. Now they don't have instructions here
10:12 for claude code specifically. Uh but I've got that for you right now. So you
10:16 can copy this URL right here and then go into your editor. I have my terminal
10:21 open here and I'll just paste the command right here. So it's claude MCP
10:26 ad and then SSE is their transport and then you just can call this server
10:30 whatever you want and then the SSE URL is the one that we copied from the
10:34 documentation. So I'll add that in here and then I can also do a claude MCP list
10:40 to test the connection and so this is a remote MCP server completely free to
10:45 use. Now Claude Code is able to search the C-pilot kit documentation. Super
10:49 cool. Okay, so now armed with this MCP server, we can now build any kind of
10:54 agentic experience that we want on top of this starter template. It provides a
10:58 really good foundation for us. And so yeah, I'll send in a request here. I'll
10:59 Improving Our AG-UI App
11:02 show you what it looks like to build on top. And then I'll even show you how far
11:08 I went taking a rag AI agent that I built with Padantic AI on my channel
11:12 previously and I'll show you how I built a full application around it with a GUI.
11:15 So, we'll get there in a second, but right now I just want to send in a
11:19 simple request here. I'll and first I'll actually tell it to use the uh copilot
11:25 kit MCP server to understand how to build this feature. And maybe I don't
11:29 have to call that out explicitly, but I just want to to make sure that it
11:33 leverages the MCP. So, what I want to do here, if I go within the source and
11:38 page.tsx, one of the things we have here is the co-pilot kit action. This is our
11:45 front-end tool that we're passing into our agent to give it the ability to
11:50 change the theme. And so I want to add another tool here to do something else.
11:55 Let's say maybe clear all the proverbs that we have on the front end. I think
11:58 that's a good example here. So I'll say I want to make another uh front-end tool
12:08 with co-pilot kit to clear the proverbs that we currently have. And so we since
12:12 we have that state sync as well, the agent will immediately recognize that
12:16 everything is cleared in the front end. And so I'm going to go ahead and send
12:20 this in right now. And it should after maybe looking at some of the files we
12:24 have in um our starter template here or actually yeah right away it searches the
12:28 copilot kit docs. Take a look at that. Use copilot kit action custom actions
12:33 front end. And we can do control O to expand and actually see the chunks or
12:37 the snippets as they call them that were retrieved from this rag implementation.
12:41 It's really, really cool. So, we're pulling in the documentation from
12:44 C-pilot kit. That's a part of our context engineering here, giving our
12:49 coding assistant all the information it needs to actually build out the
12:53 implementation here. Now, this is a very simple example. And so, it could
12:57 probably just look at what we already have for a front-end tool and then
13:00 implement that as well. But I hope that you can see that like if we didn't have
13:04 any front-end tools at all, it would have no idea how to use use copilot kit
13:08 action. So, it would need to search through the documentation like we are
13:12 doing here. And so, yeah, let me actually scroll down. Um, let me exit
13:16 out of this. There we go. All right. Yeah, there we go. It is adding in a
13:20 clear all proverb tool. And so, when this is invoked from our agent, it's
13:25 going to yeah, just clear the proverbs in the state that we have and that'll
13:29 immediately be synced to the backend as well. Looking really, really nice. So,
13:32 cool. Yeah, I'll pause and come back once this is fully fully implemented.
13:36 There we go. I just paused for like 20 seconds and then we are done. So we have
13:41 that new action and then we just have the button that it added for us to be
13:45 able to clear things right here. So there we go. We got our updated UI. So
13:50 now I can say add a bunch of proverbs. All right. So we'll have to populate it
13:53 first obviously. So the agent has generated some proverbs. There we go. We
13:56 have Oh wow. It is adding a lot. All right. So we added a lot of proverbs
14:00 here. And now I can clear all of them. And so I'm going to send this in. Click
14:05 this button here. Or I could just ask it to clear the proverbs. So, well, I'm
14:07 actually going to click this button here, clear all proverbs. Uh, there we
14:11 go. And now we have that state sync. And so, I can say, what proverbs do I have?
14:17 And it's going to say that there are none. There we go. It is currently
14:21 empty. And I can also show you. So, I'm going to say add some more. I'll also
14:24 show you that like I can have the agent clear them as well. So, it doesn't just
14:28 have to be this button. So, I can say clear the proverbs. And so just based on
14:32 a simple text request to our agent, we can do the same thing that that button
14:34 The Principles of Agentic Experiences
14:36 did. And so I hope that this just helps you see how our agent is starting to
14:40 interact with the website. We can build these agentic experiences where AI
14:45 agents can actually help us navigate through a website as well. Like this is
14:48 a really simple example where it performs an action of a button click,
14:52 but this could be a full onboarding experience where the agent is actually
14:56 like walking me through clicking on different buttons in my app depending on
15:00 what I'm talking to it about. Like, oh, I have this question and then it's like,
15:03 okay, well, let me click on this button and then highlight this section of a
15:05 website. Like, there's just so many things that we can do with this. And so,
15:09 that that's like the higher level principles that I wanted to be speaking
15:13 to in this video. Like it's cool to like see AGUI and Pantic AI specifically, but
15:18 like the most important thing that I'm trying to get across here is the general
15:22 principles of like we need a way to sync the state between the front end and the
15:26 back end. The agent needs to know like where we're currently at in our front
15:31 end. And that is what AGUI makes really easy for us along with the fact of
15:36 course that our backend is so incredibly simple thanks to AGUI. Generally, you'd
15:41 have to build an entire backend with API endpoints and middleware and everything.
15:45 But our backend right now is literally just a single file. We have our
15:50 agent.py. And so this is our Pantic AI agent where we have our agent defined.
15:53 We're giving it some tools. It's going to look very similar for uh other
15:58 frameworks as well. We have our primary system prompt. And then the only thing
16:03 we have to do to turn this padantic AI agent into a fully working API endpoint
16:08 compatible with AGUI and our C-pilot kit front end is to call this two AGUI
16:13 function. So so easy. And so now our agent is running on port 8000 and it is
16:17 good to go. And we have everything handled here with the state syncing and
16:21 conversation history. We can even dynamically adjust the system prompt
16:24 based on the front end. There's so much integration that we have here for
16:28 literally 100 lines of code. like this is just so so easy. And so there are a
16:32 lot of things that are made possible thanks to AGUI. Not because we couldn't
16:37 build it without the protocol, but because it just makes it so easy to do
16:41 so. And it's the same kind of thing with like the model context protocol. I mean,
16:45 we can connect agents to any tools, but MCP just makes it very easy and
16:49 Building a RAG Agent App with AG-UI
16:49 accessible. That's what we have here. And like I said I would cover, I even
16:54 went as far as to take an existing Pantic AI agent that I built on my
16:58 channel previously and create a full application around it with AGUI and
17:02 Copilot Kit. And that's what you're looking at right here. And so I'll link
17:05 to the video right here where I built this rag agent. I built it with cloud
17:09 code and a team of sub agents. And in that video we were just using the
17:13 command line, a simple CLI tool to talk to our agent. So it was a perfect
17:18 opportunity to take an existing agent and barely having to change the code at
17:22 all thanks to the podantic AI and AGUI integration to build out this full app.
17:26 And so now I can ask it a question. It's a rag agent. So we have this knowledge
17:30 base with all this information about AI startup. So I can ask it about OpenAI's
17:34 funding for example. And we'll get the answer on the right hand side like a
17:37 normal chatbot. It's got streaming and conversation history and everything. But
17:42 then also it takes all of the chunks that we returned from the knowledge base
17:46 and it populates the front end with them. So we have this super interactive
17:49 rag agent where we can actually like view the chunks that it retrieved. We
17:53 can see the match percentage. We can click into view the contents of the
17:57 chunks and all the metadata like the document that it came from. I mean this
18:01 is definitely taking a typical rag agent that you would have in just a chat
18:05 interface. taking it to the next level where we can actually see under the hood
18:09 what information it's using to give us the answer that we have in the chat box.
18:14 So really really cool and man was it easy to build this out. I'll just show
18:18 you the code really quickly here. I had to define some classes here. That's for
18:22 the state sync so that the chunks that we have in the front end is synced with
18:26 what the agent knows it's displaying. And then I defined my agent very very
18:30 much the same way like I always do with padantic AI giving it tools as well to
18:34 search my knowledge base both with semantic search and hybrid search like a
18:39 keyword search. And so I'll scroll down here. We have the system prompt as well.
18:44 Um this is also dynamic. So all of the chunks that we have as a part of that
18:48 state sync through agui we're passing those in as a part of the system prompt.
18:52 And then all I have to do just like our starter template is call the rag agent.2
18:58 to agui and now we have the full backend infrastructure spun up with the agent
19:02 running on a port 8000. Absolutely beautiful. And we could swap this out
19:06 for a langraph agent and not even have to change the front end at all. That is
19:12 the beauty of AGUI. And to build all of this, all I did is I followed the quick
19:15 start here in the copilot kit documentation for Pantic AI. They have
19:20 instructions specifically for how you can take an existing Pantic AI agent and
19:24 turn it into something that's compatible with AGUI. So I I use this as a
19:28 reference point. And then I went into Cloud Code. I took that starter template
19:32 that I already showed you building on top of, put in the code for my existing
19:38 agent, hooked in the vibe coding MCP server and just had it go ham. So yeah,
19:43 using the MCP for documentation and then the existing template to build on top
19:46 of, I just told it exactly what I wanted. I want you to take the copilot
19:50 kit application, make it work with this rag agent so I can actually see the
19:53 chunks and all the metadata and it knocked it out of the park. It was so
1:23 Introducing AG-UI - Connecting AI Agents to Apps
1:26 primary part of our tech stack here is a protocol developed by the C-pilot Kit
1:31 team called AGUI. I covered it on my channel around when it first came out.
1:35 Super powerful stuff. Now, the big question is, what does this actually do
1:39 for us? Well, simply put, AGUI standardizes how front-end applications
1:45 connect to AI agents. It's like MCP, but instead of connecting agents to tools,
1:49 we are connecting agents to our applications in a standard way. It's
1:54 fully open source. So, they have this GitHub repo, which I'll link to in the
1:57 description. They have a nice diagram here that shows how it works at a high
2:02 level as well. So we have AGUI kind of as a middleman here that provides a
2:06 standard of communication between our front-end applications and our AI
2:12 agents. And so as long as both have support for AGUI, which all of these AI
2:18 agent frameworks do, then we have this seamless communication that makes it so
2:21 we can build full applications in hundreds of lines of code instead of
2:25 thousands and thousands. And that's what we'll see as we build together and go
2:29 through some of these demos. And so we just have to pick our front-end library
2:33 and our AI agent framework. And then AGUI takes care of a lot of things. And
2:38 so for our front end, we're going to be using Copilot Kit. This is a React
2:42 library that makes it very easy for us to build userfacing agentic
2:46 applications. It integrates natively with AGUI, of course. And then out of
2:49 Pydantic AI + AG-UI Integration
2:52 all the options we have for our AI agent framework, you know, if you've been
2:56 following my channel that paid AI is my favorite. And they recently added a
3:01 direct firstparty integration between Copilot Kit and Pineanti through AGUI.
3:06 They even have an AGUI doc section in Pideant AAI. So, I'm super excited for
3:10 this. This is actually the catalyst for me to make this video and I've been
3:14 talking to the Copilot Kit team about this and actually asking for this
3:17 integration. So, I'm super excited that it's finally here because now we can
3:21 build these kinds of user interactive applications with Pyantic AI agents
3:26 Agentic Experiences Demo
3:26 under the hood driving the whole thing. And these are the demos that they have
3:29 for us that I was talking about earlier. I'll link to this in the description.
3:33 It's a great resource to just explore the power of AGUI. So, they have all of
3:38 these different demos that each represent something that would very much
3:43 not be trivial to build without AGUI. But with AGUI, it's really easy. You can
3:48 even see the code for both the front end like with copilot kit here and the back
3:52 end like I have paid ai selected here but you can even just select any AI
3:56 agent framework you want and it'll immediately drop that in in the back end
4:00 and then we have to change nothing in the front end that's what agui gives us
4:05 that standard communication so we can move from langraph to eggno or eggno to
4:09 panty and our front end app doesn't have to change at all so let's actually see
4:13 this in action like I want you to see how this really does unlock a entic
4:18 experiences for us. Like in this example right here, it is a recipe builder and
4:23 there's a state sync between our front end and our backend thanks to AGUI. So
4:27 like for example, I can add an ingredient here and I can say I'm adding
4:31 in beef, one pound of beef. And then I can ask my agent, what are my
4:35 ingredients? And it's going to immediately recognize the changes that I
4:39 made in the front end here because we have that two-way sync. There we go. We
4:43 got our ingredients. And then I can do the other way around. And I can say I
4:49 want to make a recipe with a lot of beef. All right. So now instead of
4:52 syncing the front end to the the backend agent, it's now the agent that's going
4:56 to be updating our front end here. So it's creating the recipe and boom, it
5:00 renders out everything in a very beautiful way in the front end. So we
5:04 have our typical chat application on the right hand side, but then it's deeply
5:08 integrated into the rest of the components of our front end. That's what
5:12 I mean by aentic experiences. Really, really nice. We have our instructions
5:17 here. We can actually improve it with AI as well. We have our list of ingredients
5:21 and I can continue to collaborate with the agent here making changes back and
5:26 forth to make my perfect recipe. And obviously it's just a very simple
5:29 example here. But yeah, definitely play around with these different things like
5:33 human in the loop collaborating with our agent toolbased generative UI. So we can
5:37 actually build tools in our front end that we give into our AI agent
5:41 dynamically. There's so many powerful things here. And like I said, we can
5:46 view the code. So we can see exactly how the front end was built with Copilot Kit
5:50 and how the back end was built with the Pantic AI agent. All right, so now that
5:51 AG-UI Quickstart w/ CopilotKit + Pydantic AI
5:54 you know how AGUI works and what it really gives us, let's get into actually
5:58 building with it. So the easiest way to get started with building these Aente
6:03 experiences with AGUI is to follow this quick start, which I'll link to in the
6:07 description. And so this is the copilot kit documentation and they have an
6:10 entire section for working with paidantic AI specifically and they do
6:15 that for all of their integrations. It's really really cool. And so to get
6:19 started we just have to have mpm installed on our machine and we can copy
6:23 this command here. So I'll actually go into my terminal and let's walk through
6:26 this really quickly. So, it's going to set up a new project for us using
6:30 Copilot Kit as the front end. And then we're using AGUI here. And we can select
6:34 our agent framework. And so, I'll just say test here because I have something
6:37 else set up already that I'll demo for you. And there we go. We can select our
6:41 framework. Like I can say I want to use Pinantic AI. There we go. And so, it's
6:45 going to open up your browser for authentication because there is a cloud
6:49 version of Copilot Kit. We don't actually have to pay for anything
6:53 though. Um, and so we can just get through this and authenticate and then
6:56 I'll come back once I have this done. Okay, there we go. So, I'm signed in. It
7:01 creates a Copilot kit cloud API key as well if you want to host with them. You
7:04 don't have to though. And so, for demonstration purposes, we're not going
7:07 to be doing anything with that right now, but yeah, they even give us some
7:11 documentation here. And so, we can open this new folder that was created for us.
7:15 And so, I have it open right now. And then there's a readme here that walks
7:18 you through the quick start. So, how you can get things set up in both the front
7:22 end and the back end. And it's literally just a couple of commands. Like, it's so
7:26 easy to get this up and running. And that's going to give us a quick start
7:30 that's going to look kind of like the demos that we saw here. But now we have
7:34 something that is running entirely locally. And there's a couple of
7:38 different things we can try to really see the power of AGUI. And we can start
7:42 to build on top of this application as well. But I'll just show you really
7:45 quickly. Like for example, I can say set the theme to green. And so this is a
7:50 tool that we actually build in the front end and send into our agent. So our
7:56 backend agent, thanks to AGUI, doesn't even have to know that there's a tool to
7:59 change the theme. And we just pass that in from the front end. I can also say
8:06 write a proverb about the difficulties of SQL. All right. So we'll send this
8:09 in. It'll make a proverb for us. And then boom, we immediately have that
8:13 state sync like that other demo I was showing you where now our front end has
8:17 this proverb here. And it's displayed and rendered out in a nice rain. I can
8:21 say write another one. And so we can do another state sync here. And then I can
8:25 delete one of these as well. Like I'll just delete this first one. And I'll say
8:30 I deleted one which is left. Right? So we can know that the front end is also
8:34 syncing back to the back end as well. And then the last thing that they have
8:37 for the demo here. I'm just trying to like show you the different kinds of
8:40 things that we can do with this front end. It's really, really neat. We can
8:44 also render out components in our chat UI. So, we're not limited to just having
8:49 a bland conversation here and then passing things into the rest of our app.
8:52 We can also render out cool things here. So, I can say, uh, what is the weather
8:57 in Orlando, Florida? And it's going to render out a really nice looking card
9:01 here. So we can take tool calls from the back end and standardize the format like
9:05 actually make it look like a nice component in our React frontend. So
9:09 super cool. That's what we have for our quick demo here. But now let's actually
9:14 use this as a starting point to build our own applications on top. Now to
9:16 CopilotKit Vibe Coding MCP
9:19 build on top of this application, we're not going to dive straight into
9:23 implementation. There's one really cool thing first because the co-pilot kit
9:29 team, they have built a vibe coding MCP server. Now, you know that I'm not the
9:32 biggest fan of vibe coding. So, maybe this isn't the best name for what I'm
9:36 about to use it for, but this is an MCP server that's kind of like archon for
9:41 knowledge retrieval. It gives our AI coding assistant the ability to search
9:47 through the co-pilot kit and AGUI documentation and best practices. So it
9:52 becomes our expert guide on our implementation. Super cool. So if you're
9:56 building any kind of agentic experiences with this tech stack, definitely use
10:00 this MCP server. That's what I'm going to be using right now. And they have
10:04 instructions here based on your AI coding assistant like cursor or client
10:08 or windsurf exactly how to hook it up. Now they don't have instructions here
10:12 for claude code specifically. Uh but I've got that for you right now. So you
10:16 can copy this URL right here and then go into your editor. I have my terminal
10:21 open here and I'll just paste the command right here. So it's claude MCP
10:26 ad and then SSE is their transport and then you just can call this server
10:30 whatever you want and then the SSE URL is the one that we copied from the
10:34 documentation. So I'll add that in here and then I can also do a claude MCP list
10:40 to test the connection and so this is a remote MCP server completely free to
10:45 use. Now Claude Code is able to search the C-pilot kit documentation. Super
10:49 cool. Okay, so now armed with this MCP server, we can now build any kind of
10:54 agentic experience that we want on top of this starter template. It provides a
10:58 really good foundation for us. And so yeah, I'll send in a request here. I'll
11:02 show you what it looks like to build on top. And then I'll even show you how far
11:08 I went taking a rag AI agent that I built with Padantic AI on my channel
11:12 previously and I'll show you how I built a full application around it with a GUI.
11:15 So, we'll get there in a second, but right now I just want to send in a
11:19 simple request here. I'll and first I'll actually tell it to use the uh copilot
11:25 kit MCP server to understand how to build this feature. And maybe I don't
11:29 have to call that out explicitly, but I just want to to make sure that it
11:33 leverages the MCP. So, what I want to do here, if I go within the source and
11:38 page.tsx, one of the things we have here is the co-pilot kit action. This is our
11:45 front-end tool that we're passing into our agent to give it the ability to
11:50 change the theme. And so I want to add another tool here to do something else.
11:55 Let's say maybe clear all the proverbs that we have on the front end. I think
11:58 that's a good example here. So I'll say I want to make another uh front-end tool
12:08 with co-pilot kit to clear the proverbs that we currently have. And so we since
12:12 we have that state sync as well, the agent will immediately recognize that
12:16 everything is cleared in the front end. And so I'm going to go ahead and send
12:20 this in right now. And it should after maybe looking at some of the files we
12:24 have in um our starter template here or actually yeah right away it searches the
12:28 copilot kit docs. Take a look at that. Use copilot kit action custom actions
12:33 front end. And we can do control O to expand and actually see the chunks or
12:37 the snippets as they call them that were retrieved from this rag implementation.
12:41 It's really, really cool. So, we're pulling in the documentation from
12:44 C-pilot kit. That's a part of our context engineering here, giving our
12:49 coding assistant all the information it needs to actually build out the
12:53 implementation here. Now, this is a very simple example. And so, it could
12:57 probably just look at what we already have for a front-end tool and then
13:00 implement that as well. But I hope that you can see that like if we didn't have
13:04 any front-end tools at all, it would have no idea how to use use copilot kit
13:08 action. So, it would need to search through the documentation like we are
13:12 doing here. And so, yeah, let me actually scroll down. Um, let me exit
13:16 out of this. There we go. All right. Yeah, there we go. It is adding in a
13:20 clear all proverb tool. And so, when this is invoked from our agent, it's
13:25 going to yeah, just clear the proverbs in the state that we have and that'll
13:29 immediately be synced to the backend as well. Looking really, really nice. So,
13:32 cool. Yeah, I'll pause and come back once this is fully fully implemented.
13:36 There we go. I just paused for like 20 seconds and then we are done. So we have
13:41 that new action and then we just have the button that it added for us to be
13:45 able to clear things right here. So there we go. We got our updated UI. So
13:50 now I can say add a bunch of proverbs. All right. So we'll have to populate it
13:53 first obviously. So the agent has generated some proverbs. There we go. We
13:56 have Oh wow. It is adding a lot. All right. So we added a lot of proverbs
14:00 here. And now I can clear all of them. And so I'm going to send this in. Click
14:05 this button here. Or I could just ask it to clear the proverbs. So, well, I'm
14:07 actually going to click this button here, clear all proverbs. Uh, there we
14:11 go. And now we have that state sync. And so, I can say, what proverbs do I have?
14:17 And it's going to say that there are none. There we go. It is currently
14:21 empty. And I can also show you. So, I'm going to say add some more. I'll also
14:24 show you that like I can have the agent clear them as well. So, it doesn't just
14:28 have to be this button. So, I can say clear the proverbs. And so just based on
14:32 a simple text request to our agent, we can do the same thing that that button
14:36 did. And so I hope that this just helps you see how our agent is starting to
14:40 interact with the website. We can build these agentic experiences where AI
14:45 agents can actually help us navigate through a website as well. Like this is
14:48 a really simple example where it performs an action of a button click,
14:52 but this could be a full onboarding experience where the agent is actually
14:56 like walking me through clicking on different buttons in my app depending on
15:00 what I'm talking to it about. Like, oh, I have this question and then it's like,
15:03 okay, well, let me click on this button and then highlight this section of a
15:05 website. Like, there's just so many things that we can do with this. And so,
15:09 that that's like the higher level principles that I wanted to be speaking
15:13 to in this video. Like it's cool to like see AGUI and Pantic AI specifically, but
15:18 like the most important thing that I'm trying to get across here is the general
15:22 principles of like we need a way to sync the state between the front end and the
15:26 back end. The agent needs to know like where we're currently at in our front
15:31 end. And that is what AGUI makes really easy for us along with the fact of
15:36 course that our backend is so incredibly simple thanks to AGUI. Generally, you'd
15:41 have to build an entire backend with API endpoints and middleware and everything.
15:45 But our backend right now is literally just a single file. We have our
15:50 agent.py. And so this is our Pantic AI agent where we have our agent defined.
15:53 We're giving it some tools. It's going to look very similar for uh other
15:58 frameworks as well. We have our primary system prompt. And then the only thing
16:03 we have to do to turn this padantic AI agent into a fully working API endpoint
16:08 compatible with AGUI and our C-pilot kit front end is to call this two AGUI
16:13 function. So so easy. And so now our agent is running on port 8000 and it is
16:17 good to go. And we have everything handled here with the state syncing and
16:21 conversation history. We can even dynamically adjust the system prompt
16:24 based on the front end. There's so much integration that we have here for
16:28 literally 100 lines of code. like this is just so so easy. And so there are a
16:32 lot of things that are made possible thanks to AGUI. Not because we couldn't
16:37 build it without the protocol, but because it just makes it so easy to do
16:41 so. And it's the same kind of thing with like the model context protocol. I mean,
16:45 we can connect agents to any tools, but MCP just makes it very easy and
16:49 accessible. That's what we have here. And like I said I would cover, I even
16:54 went as far as to take an existing Pantic AI agent that I built on my
16:58 channel previously and create a full application around it with AGUI and
17:02 Copilot Kit. And that's what you're looking at right here. And so I'll link
17:05 to the video right here where I built this rag agent. I built it with cloud
17:09 code and a team of sub agents. And in that video we were just using the
17:13 command line, a simple CLI tool to talk to our agent. So it was a perfect
17:18 opportunity to take an existing agent and barely having to change the code at
17:22 all thanks to the podantic AI and AGUI integration to build out this full app.
17:26 And so now I can ask it a question. It's a rag agent. So we have this knowledge
17:30 base with all this information about AI startup. So I can ask it about OpenAI's
17:34 funding for example. And we'll get the answer on the right hand side like a
17:37 normal chatbot. It's got streaming and conversation history and everything. But
17:42 then also it takes all of the chunks that we returned from the knowledge base
17:46 and it populates the front end with them. So we have this super interactive
17:49 rag agent where we can actually like view the chunks that it retrieved. We
17:53 can see the match percentage. We can click into view the contents of the
17:57 chunks and all the metadata like the document that it came from. I mean this
18:01 is definitely taking a typical rag agent that you would have in just a chat
18:05 interface. taking it to the next level where we can actually see under the hood
18:09 what information it's using to give us the answer that we have in the chat box.
18:14 So really really cool and man was it easy to build this out. I'll just show
18:18 you the code really quickly here. I had to define some classes here. That's for
18:22 the state sync so that the chunks that we have in the front end is synced with
18:26 what the agent knows it's displaying. And then I defined my agent very very
18:30 much the same way like I always do with padantic AI giving it tools as well to
18:34 search my knowledge base both with semantic search and hybrid search like a
18:39 keyword search. And so I'll scroll down here. We have the system prompt as well.
18:44 Um this is also dynamic. So all of the chunks that we have as a part of that
18:48 state sync through agui we're passing those in as a part of the system prompt.
18:52 And then all I have to do just like our starter template is call the rag agent.2
18:58 to agui and now we have the full backend infrastructure spun up with the agent
19:02 running on a port 8000. Absolutely beautiful. And we could swap this out
19:06 for a langraph agent and not even have to change the front end at all. That is
19:12 the beauty of AGUI. And to build all of this, all I did is I followed the quick
19:15 start here in the copilot kit documentation for Pantic AI. They have
19:20 instructions specifically for how you can take an existing Pantic AI agent and
19:24 turn it into something that's compatible with AGUI. So I I use this as a
19:28 reference point. And then I went into Cloud Code. I took that starter template
19:32 that I already showed you building on top of, put in the code for my existing
19:38 agent, hooked in the vibe coding MCP server and just had it go ham. So yeah,
19:43 using the MCP for documentation and then the existing template to build on top
19:46 of, I just told it exactly what I wanted. I want you to take the copilot
19:50 kit application, make it work with this rag agent so I can actually see the
19:53 chunks and all the metadata and it knocked it out of the park. It was so
19:57 easy to build this out. So there you have it. That is everything you need to
20:01 know to get started building agentic experiences with AGUI. Now here's the
20:07 thing. Pyantic AI, AGUI, Copilot Kit, these are just tools to get the job
20:11 done. The higher level principles are what I really want you to focus on.
20:15 things that I covered here like human in the loop and front-end tools and state
20:18 syncing. That's what you really need to make these agentic experiences. AGUI is
20:24 just the protocol to standardize things and make it that much easier to build
20:28 out this kind of application. Like I literally built this out in like a half
20:31 hour after I brought in my existing agent. It was so easy to do this with
20:36 the help of an AI coding assistant. So there you go. If you appreciated this
20:39 video and you're looking forward to more things AI agents and AI coding, I would
20:43 really appreciate a like and a
