Name: Build and Deploy AI-Powered Agents
Uploaded: 2026-02-19T09:46:11.944Z
Duration: 1 h 26 min 24 s
Description: Build and Deploy AI-Powered Agents

Transcript for "Build and Deploy AI-Powered Agents": Thank you. Hi, everyone. Good afternoon, morning, evening from wherever you're joining from because I see in the chats folks are joining from literally everywhere. I'm excited to be doing this virtual workshop with you all today. So today, we're going to go from zero to fully deployed AI agents in about ninety minutes, and that's the goal. So let's get right into it. For everyone joining, if this is the first time you're using this platform, we have, a docs session. In there, you'll find the link to the slide, and you also find a link to a resource that I'll be using to share all the links for everything we'll cover in the workshop. So please because this is an interactive workshop, please go check out the docs and get those two links because you will need it as we go along. Otherwise, you can scan the QR code on screen. It's going to take you to the same URL. One more thing I want to mention, if you do go to the slides, when you check out the there's when you check it out, though, you'd see a party purple icon on the bottom of the screen. As we go through each of this presentation, I would love for you to also interact with me. So we have a couple of emojis on there. You can react based on how you're feeling. If you're confused, you can use the, eyes icon if you are loving where you see. Just I love to see interactions. Right? Because I'm doing this, virtually, and the best way to to get interaction is through chat or through this reaction. So please use it as we go through the workshop. Okay. Moving forward. A quick intro about me. I am Gifts. I work as a developer advocate at Cloudflare. And what else? You can find me on socials on my socials using this handle on the screen, and let's keep it moving. So today, have six learning objectives. And given the time, would love for us to go over all of this today. And the important thing is that by the end of this workshop, we'll have actually built an AI agent that has all of this integrated. And the the other part is I would also love for you to follow along because the goal is not just to show you what you can do with the agent SDK. It's actually gets you using it. So as we go on, I'll have exercises that I'll love for you to follow follow, through. And please, if you have any questions, the chat is open. I also have my teammate here to help with questions as we move along. Great. Amazing. Okay. So right now, we have AI, agents everywhere. But before that, we had chatbots. Right? And the problem with chatbots is that with those kind of applications, it's it's great because you can ask a question and then you get a response back. But it's not so great at remembering context. Take this example that I have on screen. This is supposedly a support bot that I am asking to get me information about the delivery and or an order that I made. But it's not smart enough to remember the context that I I I asked or the question that I asked the previous day. Right? And that's the problem with chatbot. Which agents are basically for the the persistent memory? They help you, you know, retain information from your previous conversation that you've had with them, and that's where agents is different. So what's an AI agent? So an agent is this is the definition that I like to go with is a tool that can help you perform tasks and make decisions on your behalf. Right? You don't have to do it on your own. Unlike chatbots where you ask a question, you get a response back, an agent can do way more than that. It can persist memory. It can monitor. It can schedule. It can kick off actions on its own. It can do so much more. This table that I have here highlights the basic differences, and I would just like to highlight two, which we'll cover today. The first one is states. So with chatbots, a chatbot is stateless. It forgets after each request. Literally have to access the same thing over and over again as opposed to an agent which has states. And the great thing is that the states can be persisted across sessions. In fact, it can also be persisted across devices, which for me is insane because you can be chatting on your phone and the next thing you're on your laptop, and you still have the same, memory being persistent across devices. So that's something that literally takes chatbot to the next level. Right? So this is a mental model for everything that we're going to be building today. Take a look at this diagram on the screen. It's basically showing you the the the the the life circle of an agent. So from the clients, you the clients could be like a chatbot or let's say we have a chat. Right? And we've integrated, worker to route through that chat. Behind the scenes, what is calling or what's performing the agent workflow is a durable object. So currently, the agent SDK has these different things that I have on screen. It has states. It also allows you to include tools that perform these actions that you would want your agent to perform. It has access to different AI models from our sheet of open source models, for example, our workers AI, or you can even bring your own, external models like use the OpenAI SDK. Recently, we shipped workflows in agents SDK, which I think is next level for agents. Right? And I'm going to cover that. This essentially allows you to add orchestrate multiple steps of workflow within an agent, allowing you to do things like not just give you a response back, right, but actually go on to to to to run steps. And even when that steps fails, it retries it over time. Right? Also, you can do things like scheduling and so on. Cloudflare is a great fit for a platform for billing agents, and this is why. Right? I'll let you scan the grid, but the ones that I want to call out here is first, that we have a global edge network that spans across 300 plus cities when you deploy your application on top of Cloudflare. You have your application is is accessible by so many, you know, users across the globe because of our fast network. Another thing I would like to call out is durable objects. Right? Durable objects gives you a per agent state. And, also, you get hibernation, meaning that you only pay when the agent is actually doing something. And finally, one other thing I'd like to call out here. We recently acquired Replicates. As as I mentioned, you can use Workers AI. But if you want access to more models, I feel like replicate has so many models. Most of the models that I've shipped you right now, you can actually access it from, replicate. So on top of what we currently have, replicate gives you access to multiple models that you can use in building out your agents. So these are some of the things you can do with the agent SDK on Cloudflare. Let's take a look at what we're going to be building today. So I've put together five modules, and the hope is we'll be able to run through each of them as we go through this workshop. So we're going to build at the end of this, we're going to build a support agent, which you see on the screen. We're going to try to build something that looks like this. Right? We'll go through agent foundation, basically talking about how do you persist dates, how do you do real time chats with WebSockets. We'll talk about tool integration. We'll talk about workflows, scheduling, and finally, MCP. Right? So let's get started. I'm not sure if you got an email sharing prerequisite before the workshop, but if you haven't yet, you need these things to follow through. So you need to have Node. Js 18 plus NPM or Yarn installed. You need a CloudFare account. And the Wrangler portion is recommended, but not necessary because you can use MPX as we go through this workshop. So please make sure you have them. So let's get started. The first thing we'll be doing is by the way, let me check on my reaction target. Is anybody using this? Okay. I see. I see. Please, please, please, as we go through the slides, if you would love to react so I know that everyone is following along, that's great. And I also know that this thing I built is working. You know? So the first thing we'll be doing is to clone the the agent starter because that's what we're using for for for this workshop. Right? I already did this before the workshop. So two things you need to do. It's easier if you have the the slides. That's the link I shared in the doc open in another tab. That way, you can easily copy the commands from the slide and paste in your terminal instead of typing it out. Right? So I already went ahead to do this portion, and I'm just going to skip over. But two things you need to do here. First, you need to run the first command. This is going to clone the agent starter for you, and then you sit into the the directory and NPM stats. So I already did that. If I come here, I have my application. I call the support agent, and we'll we'll cover the files and what they do in a bit. So let me go back to my slides. So let's look at the project structure. In here, you are going to see a couple of files, but the only ones we're concerned about during this workshop is the three the three files you see inside the source directory. So the app dot c s x, this is concerned this is what you you see. This is the clients of the the the chat interface that you see when you run the application. The server is where we're going to be defining the two. This is the the, I would say, the back end of our agents. This is where we use the Cloudflare Workers agent SDK. For example, if you let's see. Online 36 is where we define the tools. The the agents that are already comes with, I think, six tools that you can already try out. In fact, let me just go ahead and run this. It's easier if I do it in this terminal. So if I do n p m starts, so this will give you, like, a basic a basic agent that already does something. Right? So what do we have here? So this is the agent's data kit. It already comes with six tools like I showed you. First tool, I think, is a weather tool that you can ask what's the weather in Paris, and it tells you the weather. I think you can also do something like schedule. Let's see the tools that we have here. You can also schedule a task. So if I see schedule a reminder in twenty seconds. So I've scheduled this reminder, and in twenty seconds, I'll get I I I I should have given it a proper reminder. But yeah. In twenty seconds, I'll get a response back, about the reminder that I just scheduled. But this is the bare bones of the agent's data, and we're going to take this one level higher. So my reminder just I just got the scheduled reminder. So we're going to be building a support chatbot, and let's head back to my slides. Now I have so many tabs. Yeah. So three files you need to be concerned with the server dot c s file, the app dot c s x, which is the React chat UI and your Wrangler configuration file. This is where we'll be defining all of the bindings that we'll be using for this project. Take a quick look at the Wrangler config. All of this already ships with the agent starter kit, so you don't need to change anything here. But just calling out the things that are here. First, we have a the workers AI binding, and we also have the durable objects binding. So this is the default for the agents that are keyed. You can also change it. But I I think I'll be leaving the name chat agent for this workshop, but I feel like support agent could also work here. And then we have migrations. The migrations that you see here are what enables, every durable object to have an SQLite for state persistence state persistence so that whenever you open your new like, if you leave your agents in, two hours and you come back, you still see the same states that was there the previous time you had a chat with your bot with your agent. So this is what's currently in the Wrangler config, but we'll be adding a couple of things there, but not now. So let's move on. So the first module, we're going to be looking at agent foundations. Essentially, what we'll cover here is how do you persist it? Like, how does state management work with the agent SDK? And we'll also look at how does the real time chat works with WebSockets. One thing that I'll be using to show how all of this works is the agent SDK playground. This is essentially an interactive demo website that showcases every feature of the Cloudflare agent SDK. And I feel like using this in in fact, let me just open it as I am speaking. So this is it right here. And for every call feature of the agent SDK, you have an in app demo that you can demo it and see it working, and you understand the concept of, oh, this is how states actually works. And you can then use it within your application. This is going to ship in, like, a week. It's currently not public, but I feel like using this to learn all the concept about the agent SDK is just going to be amazing for everyone. So I'll use this to demo a few things. But first, let's talk about the different things you can do with it. Right? So you can use it to demo state synchronization, callable RPC, scheduling, and workflows. Right? So for every concept that I will show here, our first demo, it's in the playground, and then we'll build it out in our support agent. What does the agent educate give to you? On a high level, this is everything that ships. These are all the beauty and primitives that ships with the agent SDK. We have life circle. We have states and storage. We have communication and orchestration. All of these you can always read up in the docs, the API section to know exactly what it's doing. We are going to be covering some of that as we move along the the the workshop. So state management, every agent that you build that you build have an SQ SQLite database attached to it, like I showed you in the Wrangler in the Wrangler configuration file. What this means is that for every time you're connected to your clients, the states between them persist. I think it's even easier to show you than to talk about it. So let's go to the playground. So this is the state management demo. Right? And as you can see here, I have actually written try this out already. But, essentially, what you can do here, this is a counter demo. If I increase this over time, I close this tab, open it in another tab, I should still see the same counter persists. And the same thing applies for the demo that shows you like a list of item. If I close this, in fact, if I stop running the server and restart it, the states should still persist. And this is exactly what happens with your agents that are right? Or with your agent. Right? When you're building an agent, the state should persist regardless of where you're running it. And let's look at the code to see how that works. So a few things to note is for every, states that is being stored in your agent is stored in an embedded SQLite database, and it's synced in real time. So when you make a change, you see the changes up here, and they're broadcasted over the different places where they are. Under the hood, you're we're using something called set state. So it's if you if you're familiar with React, this is a familiar feature. Right? Where you set you call you you create an initial object states, and then you can set it over time in your application. So that's one thing. Another thing I wanted to also show you is the WebSocket connection. So agents is agents are able to maintain persistent WebSocket connections. Why? Because we have several different life cycle built into agents, the agent SDK. We have the on stats. This is essentially what wakes up or starts up an agent. We have on connect. This is what connects the agents. And you use this in different parts of your agent workflow. When you're building an agent, you for example, before you connect, you use the onstarts. There are different ways you can actually use this. Right? Let me go to the playground and show you a demo of this, and we can see here connections. So connections is where you we can see a quick demo of the WebSockets. Right now, see here connected clients. I have just one. If I click on the open new tab a couple of times, you can see how quickly that syncs. So I have what I have six tabs opened. I can also broadcast a message to to these different clients that I have opened, and I should be able to see them. I mean, I have six tabs. So let's just try it. Hello from playground. And when I broadcast this, you see the broadcast has been sent. And if I go to, like, maybe the first tab that I opened, which is this one, I should still see the same states versus. So this is a combination of the states and the WebSocket connection here. I think this is great because you can imagine if you have an agent and you have it open in your, let's say, your your your home laptop. Right? And you also have a mobile device, but you're not close to it and you want to continue having a conversation with your agent. Right? You can do this and continue on your work laptop when you're when you're when you're back home. So this is cool. This is a very cool feature. Okay. So the next thing I want you to cover is agents versus AI chat agents. Because these are two different things. The playground currently uses the base agent class, and we also support the the the the AI agent the AI chat agent. The the basic difference is because we're using the agents that are kids, and we're using these to to build our our UI, there are two things that are different. So for example, with agents, when you're sending a message, you use the on message life cycle. But with the API is different, right, between agent and AI chat agent. That's just something to note because the code examples you see on the playground would not work if you copy directly into the starter that we just cloned. That's because they use different APIs. Right? But they do the same thing. Right? It's just the AI chat agent is a bit of a high level wrapper. It's like an abstraction of the underlying APIs. So that's just something I want to call out because moving forward, we'll be using the AI chat agent in the the the the starter kit we cloned. So we are down to exercise two. And just to ensure everyone is following, do we all have the cloned repo? If you do, can can I see some reactions in chats or in in the in the slide that I'm in? Okay. Nothing. I'll assume everyone is following with exercise one, but you can also watch and you have access to all the resources and you can do this later. Well, it's five exercises, and we're done. So great. For exercise two, the next thing I would love you to do, if you have the clone repo, you would need to go to your source.server.cs and just do one thing for me. Change the current prompt. So let me just go there, and we can do it together. So this is current file that I have here. And because we're building a support bot, I figured it would be nice for us to customize our chatbots to have a system message that is specific to what we are building. Right? So currently, we have your helpful assistance. You can check the weather. You can get the user's time zone. Would not work for us. Right? So instead, I'm going to go ahead and copy what I have here, which is a bit more specific, and paste here. One thing to note, I feel like this get scheduled prompt was written specifically for the previous prompts. And because I have changed it, I need to also remove it from where it's been imported. So that's just something I need to call out because this specific system prompt, I'm not using schedule the schedule. I'm going to have to delete all of these too because I'm not using it now. So let's take that out. And I think we have one more, the get with that tool. So I'll leave this empty for now so that the next module when when it's time for us to add tools, you can you can start adding it in. And, yeah, a lot of things are breaking now. So I also don't need this. So I delete. And, actually, it's easier to leave just one, and then I delete when I want to. So I'll just leave the gets whether too. Great. Okay. So that's good. So going back to my slide, I what I just did is just change the system prompt to something more specific to what I intend to build. And if I go back to my UI, it should still work. Right? But this time around, I should be getting, like, a different response based on the system message that I've added. So we're going to be moving on to the next module. And in here, I'll just quickly scan and see the chat. Okay. Great. So the next section is talking about tools and AI. This is where we give the agents the ability to do things on our behalf. We are able to connect the agent to a model. We are also able to create tools for it, And we're also able to observe everything using AI gateway. So if you're not familiar with Workers AI, Workers AI is one of the primitives we have at Cloudflare that allows you to run inference on top of Cloudflare's GPUs network. And it's pretty easy to set up if you're already building on the platform. You don't need any API keys. You just need to call the Workers AI binding. So you already saw that in the wrangler dot json file because it it came preconfigured in the starter. But this is what you need to add if you're going to be using Workers AI. Workers AI has over 70 plus open source models that you can pick from from text generation models to image models to speech to test. This is also for this specific workshop where it's in Workers AI, but feel free to use any model that you want to from any provider. So you can use from, for example, Anthropeak or OpenAI or even from Replicates like I mentioned earlier. The AI SDK is compatible with different models. And the other thing I want to also show you, because this is also where I actually just edited a message. But when you're working work Workers AI, you need to define a create Workers AI function. And in there, you need to add in your binding and call the the AI binding that you've written in your Wrangler config file, right, to get it working. And with that, you can then choose any of the workers AI models that we have. The current one I'm using is the GLM 4.7 flash model. This is for text generation. Depending on what you want your model your agents to do, you can always swap this. And it's as easy as changing this one line, right, when you have it in. Great. So that's Workers AI in a nutshell. The next thing I want us to cover is AI gateway. So AI gateway is basically a proxy between your agents and the model. This is a good way to get insight into what you're doing with your model, like how much resources are you using, how much your your tokens how much tokens are you burning through. Like, you can also cache responses, which is something that I really like. Because if you have, for example, an agent that is supposed to give you a rundown of what you're supposed to do for the day. So it has to ask the same prompts every day. Right? You can easily cache that response and save money. It also has rate limiting and analytics. Right? So for our agents, I want us to set up a gateway for it. Right? And I would we have to do two things for this. This is sort of an exercise, but I didn't tag it as one, but you have to do two things. The first thing we do is to create an AI gateway in the dashboard and then add this line into our code. So I'll head over to the dashboard now. So just to make my life easy, I'm going to close all the steps that I have open. Yeah. And here in the dashboard, I go to the AI gateway tab, and I click create gateway. So I'm gonna call my gateway support gateway. Yeah. And by default, it collects logs for, I think, 10 is this 10,000,000? Yeah. 10,000,000 logs. I want to cache the response, so I'm going to turn that on as well. No rate limiting for this specific one. So I'll go ahead and create my gateway. And once I have that, you can see AI gateway currently supports different AI providers. I'm using Workers AI. What I need to do is just add this portion to my code. Right? So I'll go back here and copy what I have here and paste in here online online 21. Yeah. Yes. So we've successfully connected this to our AI gateway. So for every prompt that in fact, I can try this out. I think I'm not sure if I need to restart, but let's just see. So this is my starter here. And I see because I know that I've removed a couple of tools, but let me try the way that it still works. Great. So if I go to my dashboard, I should see some metrics coming in already. Except I need to deploy first, which is something I think I need to do. Yeah. So we'll leave that. We'll leave this for the the last step because that's when we deploy. But for now, locally, I don't think you can stream your your or even if you can, you have to set sets set up the remote binding for it. So let's go on, to the next slide. Here, we're going to be looking at the anatomy of a two. Right? So what is a two? I mentioned two earlier. A two is what gives your agent action. Like, it's it's what gives your agents purpose. Right? So you can create a tool, for example, that can go and fetch the latest, the top latest news on Hacker News. Right? Or you can create a a for example, the the the the agents' starter ships with whether to you can get the weather. You can get your current time zone. But these are basic things that you can do. You can do so much more than that. You can connect to if you're familiar with linear, linear is a project management platform. You can connect to use the Elinion API and use that as a tool within your application. In our use case, we're building a support chatbot. Right? What I've done is I used I built out a support API that I can create a support request for, like, an order that I've made. I can create tickets that, oh, my order was not delivered. So I made an API for that, and then I'm going to be consuming that in my agent. Right? But there are two things here. Right? The first one is a tool that can execute automatically. And for every tool that can do this, you need to pass in this execute function in there. So that whenever you pass in a prompt, it knows to pick up that tool and, you know, just go ahead and run it. On the other hand, we have something that requires human confirmation, human in the loop. And if you have a tool where you don't just want it to go and do stuff, you don't just want it to take action, you want to approve it first, then you need to pass in this needs approval. And that way, when you're running when you're running your agents, you get to approve or reject the the prompt before it goes ahead. And for our use case, we'll have a couple of places we'll be using this. So let's move on. So we're down to our exercise three and two more to go. In here, like I mentioned, we are going to be building a support support agent, and I created an API for that. So I need you to do couple of things if you're following along. Remember where we removed the tools from here? And I left the guest whether to I need you to just copy what I have there, which I'll share in a bit in here. Right? So I removed the tools, the default tools that came with the starter, and I'm adding mine. And let's look at the tools that I've created. So first, I have a lookup order too. What this does is it looks up a customer order by the order number. Right? I also have a search knowledge too. You know, when you have, for example, Amazon that, a platform that fulfills or tracks shipments, you usually will have, like, a FAQ section in that platform where, for example, if your if your if your order is missing or you have a limited time to to to return the order that you've made. You want to kind of automate that process. You don't want a human to be replying to all of those questions. Right? This is why I created this tool. So search knowledge is basically a way for you to search a knowledge database to get things like how long is the return policy and stuff like that. And the last two, this is a tool that would require human approval. Right? It's a tool for creating a support ticket for the customer. So when you are sending a chat or when any when a customer sends a chat and probably they see their order for headphones they received the headphones where it was broken and they want to create a support ticket. They can send the chat and you ask them to approve or reject the ticket numbers. We'll see this in action, but this is basically what we want to build. Right? So what I need to do is copy from let's see. Copy from here all the way to this, and I'll paste it here where I have all my tools. Right? Okay. I'm missing the first line. Actually, I'll just copy everything. Why did I just do that? K. So I'll just copy everything because this is easier and avoids mistakes. Okay. Just put this here. Okay. Great. So we have added in three tools, and we can already try this out and see what it does. So I, for example, can go and ask about this order because, of course, I know that that's in the database. So over here in my agent's data, I can see can you give me the So I'm actually to give me the status of an order that was made. Right? And what it did is it's pulling the the look up order two that I've created, and I can see that the order status is shipped. I see the details about the order and also see that I've actually created a tracking ticket for this that I can track later in the future. Right? So let's head back to our slides. So that's it for exercise three. We've created tools that takes action within our agent. Right? So the next module we'll be looking at is durable workflows. So workflows lets you build multistep processes that can survive crashes, retrial. It can retry automatically, and it can also do checkpoints after every step. So module theory, are going to be covering durable objects and durable workflows, of course, durable objects durable workflows. Right? So why workflows? What's what's even a workflow I mentioned? But why workflow? Take, for example, you have a support ticket, and a support ticket will go through different stages. It will go through, like, a classified stage, a resolved stage, and escalate stage. What if something happens during this process and one part of that stage fails? Right? Without workflows, you have to write a retrial logic for every API call. It's going to be very difficult to track the steps between these different flows that I've mentioned. It's also going to be difficult to to handle failures between those stages. Right? And also the pulling time, the time it takes to keep alive, it's going to be longer. But with workflows, which is some an an a level that unlocks, you know, building agents that are that are next level. Right? With workflows, you can configure per step retries. You can add automatic checkpoints for every steps within your your your agents. Crashes will resume from the last complete test steps. All of this is just a comparison of when you beat an agent without workflows and when you have a good workflows and how how it does, in comparison. I also wanna call out that this is not scheduling. Like, you're not scheduling something for the future like you saw me do earlier. There are currently two different concepts. So workflows are for coms complex multistep logic, which we trials, while scheduling is for when you want to run something at a specific time. So you give it, for example, to send send an order on this specific time or on a specific day or even run a cron job for that. They complement each other, but we'll be covering scheduling in module four. So let's move on. So how does workflow currently work with the agent SDK? By the way, workflows is a primitive we have in Cloudflare, if you've ever used it. But the agent SDK also builds on top of that. So that gives us the agent workflow class. So within if you're building an agent, you can import the agent workflow class from agent slash workflows. Of course, if you're reading other types of application and you need a way to do multisteps orchestration, you can still use workflows for that. But this is specific to an agent. Right? So I really want to show you the playground because that's visual things works best for me when I when I'm explaining. So I'm going to show you the workflows demo in the playground, and then we look at the code. So this is we have two examples here. So the first one is the basic example. It's basically going to allow you to start a workflow that has multiple steps. So I'll just go ahead and try it. I'll name this support workflow, and I can customize how many steps I want you to have. Let's say six, the maximum. And when I start the workflow, this is what you see, and this is how it runs. So the first thing is it triggers a run workflow to start the durable workflow step, and then it starts executing each step. So for this, I said it should execute six steps. So you see here in the event log each of the steps being executed. And once that's done, you can also track it to know, for example, if this this this was a very short flow. Right? It was quick. But if it was a longest process and you want to track what step is it in, at what point you can use on workflow progress to do that, to to get progress about your workflow. Or you can use get workflows to track all the workflow. So this is what we're going to be using in our support agents, and I'll head back to the the to to to slide and talk briefly about the components of the agent workflow car class. So the first thing you do to define steps is use the steps to do, and you can pass it in name and options. So each steps is named and checkpointed. So if the workflow breaks or fails, it knows when to to to to go back. It knows where to go back to to complete the steps. Right? Or you can also skip steps automatically if you want. You can also do multiple retries, which is something interesting because if something fails or one of the steps fails, you can configure a number of times you want that specific step to retry. And this is this has support for linear exponential backup strategies. Another additional thing I want to point out is you also can do something called step to report complete. So, like, when the workflow is completed and you want to get feedback about this, you can use this to signal that your workflow has completed. You can use this in the UI because if you're if you're, for example, doing something else and waiting for your workflow to complete, you want a way to know that it's actually completed. Right? So use this to to do that. So this is the example code of the workflow that I showed you on the playground. So there are two types of workflow. Let me me show you the other one. So you can also create a workflow that that needs an approval. So call this approval workflow or human in the loop workflow. Say, for example, you have, you're creating an expense report, and you would love to to approve that before it actually goes before the person actually gets the expense report. Or let me even use a better example using our support agents. Say, someone requested to get their other the other day they they made was bad, and they want to get a refund. Right? Well, how do you confirm that they were actually they actually received the delivery and it was bad. Right? You need some way to, for example, accenting an image of the the the parcel that they received that was broken or something. And as a human, you want to also approve. You don't just want your agents to just go ahead and approve. Imagine it's a a thousand dollar item. Right? You want to approve that. So let me quickly do that here in my demo. So what needs approval return order? Return MacBook just damaged. Yeah. I can I can type proper English, but it's just more interesting to do that on on chat on live? So the difference you see between the previous workflow that just went directly without asking is that for this specific workflow, you get prompted to either approve or reject it. So I'm going to go ahead and actually, interesting, reject it because the last time I did accept it. So I need to also enter a reason. So if I'm going to accept or reject, I need to always pass in a reason. Of course, this is optional, but yeah. Not valid. So confirm rejection. And what that does is the workflow doesn't run. Right? But in a different scenario, if I've approved that specific workflow, you see the different workflow process from the first step to however how many steps that they have. You see that run here. I ran an example earlier, and you can see the different steps for the specific workflow. Okay. So those are the two types of workflows that you can do with the agent SDK. And, go to my next slide. I spoke about this briefly already, but, yeah, You also have something called life circle callbacks that you can pass into your workflow. So for example, the on workflow progress, you use this to check on the progress of your workflow and updates in the UI in real time. When it's complete, you can also use that as well. So the full loop is your agent calls run workflow, which is what starts the workflow. It runs the steps. You can check on the progress, and then you get trigger when it's complete. Right? So that's the complete workflow life cycle. So we have an exercise that I would love for us to do together. Here, we are going to turn our support agents into like, we want to add a workflow into our support agent. Right? So for this, I would need to create a workflow directory. So let's go ahead and copy this. And we're doing exactly what we did what we saw in the playground, but we're applying it to our support agent. So the things that I'm doing is, first of all, I'll go ahead and create this directory. Let me do that. Workflows. And then I can tickets.cs, I think. Yeah. And then I copy this over, and then we can look at the code together. So in here, I have workflows ticket dot c s, and then I go ahead and paste that. So this is similar to what you've seen, but in a support context. Right? So in my case, I've created three different stages for my workflow. The first one is something to classify the tickets, so to know what kind of tickets it is. If it's a billing ticket, if it's a shipping ticket, something to auto resolve the tickets. That's a big word. To resolve the tickets. Right? If there is no necessary for example, someone is asking for their shipping updates and they want to know, I want to just go ahead and resolve it. There's the final step is an escalation step. So if it's something that needs to be escalated, this is the last step that I've created. So in this current workflow, I have three three steps. Right? And this is how you define a step. So you do I wait step to do and the name of the the the specific step and yeah. So we have that. Let's go back to our slide. Oh, we are missing two things. Right? So for every workflow you create, because we created a separate workflow directory, we need to import it in our separate dot c s. This is how your agent knows about that specific workflow that you've created. And, actually, it's what I do in the next slide. So let's get on with it. So the next thing we need to do is to register the workflow binding. We need to also reexport it from the server dot c s and also create a tool to trigger it. So there's a couple of things here to do, so we'll just get started with it. The first thing is I'll add this block to the Wrangler config file. So this is what I used to define my workflow. I bet there is okay. There is no template for that. So I'll just go ahead and add this here. And what else do we do? We also have couple of things. So I'm going to export the workflow in my server dot c s file on the here. That's weird. Okay. There's no need to put the TS then. Okay. I also need to insert this block inside the tools. So this is a tool that I I'll create for this workflow. Copy that. And put it under here. And format this properly. Okay. So this is tool that I've created to run the ticket processing workflow. Right? And it's calling the workflow that I've ex imported rather. And the last thing I need to do is also add this to the chat agent class. So I'll copy this. Just easy to search. I think it should go here. I feel like this is the wrong file. You know what? I've done this already. To save time, I'm just going to go here and confirm where that is supposed to be. So server dot c s and I Okay. No worries. It's easier to chat to search. Let me see. So many tabs open. I'm looking for on com workflow completes. Search. Okay. So it goes under under the tools. Great. Okay. So it goes here. Copy this over and put it here. I think what I should have done it's so weird that I'm getting this. Maybe one oh, okay. Perfect. What I should have done here is just put an initial block of where the the the the the previous line. So it's easier to know where I copied over to. But yeah. Let's move on. So we've configured our workflow binding, and we're exporting it and triggering it within our tools. The last the second to the last module we have in this workshop is essentially going to show you how to do the part where I say you have a workflow, but what if you want to add human approval to your workflow. Right? And also, we'll touch on scheduling as well. So if you need to add, for example, a manager approval for sensitive actions within your workflow. This is how you set that up. So I already demoed this in the in the playground. This is where I showed you how you can create a workflow, but then you can accept or reject that workflow. And this is the code for that. So this is a approval workflow file, and I think it's easy when I copy it over. I'll show you. So a few things we need is let's copy this. Oh, actually, this is the playground example. So I already showed it. When we get to the exercise, we'll copy it over to to our support. So this is nonrelated to what we're building, but it's just an example to show you what you can do with it. So a few things here to call. The workflow currently has different, methods within it. The first one being wait for approval where you can pass in the steps. And this is what enables your workflow to know that they have to it has to pause and wait for an approval, whether you want to approve or reject, like you saw in my example when I rejected the the the steps basically stopped. But if if I had approved it, then it will continue running the workflow. Right? So you have to you have two ways. So you can either accept or reject, and you can also pass in it a time a time out method. And this can go up to a year. So you can have an agent just waiting for up to a year. That's crazy. Workflows can wait up to one year. And the interesting thing here because of hibernation, no compute is being consumed while we're waiting. The workflow basically hibernates, which is to the point where I shared features about agent SDK hibernation. This is how it basically works. One thing I would like to call out here that workflow level approval is different from the needs approval that I mentioned when you're just writing it to and you want the user to pause and accept. These are two different things. So the workflow level approval process an entire multiple step process, right, as opposed to the the the the previous one I mentioned, the needs approval function. Right? So they kind of look similar, but they are two different things. Just wanted to call that out. And finally, we have here scheduled tasks. There are four different ways that you can schedule or four different scheduling modes that exist in the agent execute. They have delayed specific you can pass in a specific date. And the example that I shared where I said the agent should remind me in two seconds, That was me passing it a specific time or its specific dates. You can also, set up recurring Chrome expressions. And finally, you can also use intervals. So schedule something to run every specific time. Yeah. And under the hood, this uses durable objects alarms with the SQL table that you set in in your Wrangler, the JSON file. I want to show you a quick demo of this in the playground because we have a demo there as well. So you see this in action on the schedule. So you can run. K. We have to okay. I think we have all the states here. So the first one here is you can run a one time task. So I see, schedule a task to run after a delay of five seconds, and I schedule this. And after five seconds, I should see hello from schedule. Right? This is the demo for the recurring task. So schedule a task to repeat at an interval. So every ten seconds, you want to get hello there. So I schedule this and I wait for ten seconds. I can also see, like, the active schedule that is running here. And after sec ten seconds, I would see, the first, hello there. And then after ten seconds, again, I should see another one. Right? So this is I think this is just two examples of what you can do with scheduling. How is this useful? This is useful in different ways. Right? You can think of this like you're thinking of setting a way for your agents to remember things for you and remind you. Right? So you can, for example, tell your agent to remind you to check up on the status of the tickets that you created so that you know if you're getting a refund for the order that you made or not. Usually, with I remember there was a time I was trying to to to get a refund from Amazon, and I had this chat open, and I totally forgot about it. Right? And the the person that was responding to me literally left the chat, and he didn't get my refund. I had to basically start that process over again. But imagine this scenario. Right? You get a response. You get a a reminder that, oh, you scheduled this thing, and it gets you get prompted and they know that you are you're going to follow-up. But, yeah, that's an example of what of how you can look at it in this support scenario. Okay. Let's head back here and see how we can actually implement this in our code. So we are going to add a workflow level approval for high priority tickets and tools so that the it can either be approved or rejected. So two things. We already created the workflows dot tickets to t s. We just need to add this into it. So I'll I'll copy this. So we need to add the approval workflow, and we also need to set it up so that our agents knows about it. We set that up in the server dot c s file. So I'll go ahead and copy this and put it in my workflows tickets dot c s. I need to put this at the top. And yeah. I think I'm going to have issues with figuring out the lines where I need to put this, but it should be fine. It's weird. Something is missing. Again, I'll use my reference to to to help me here. I have workflows, tickets dot c s, and just to confirm where that goes. If Yeah. So this is interesting. So it goes under the if. Okay. Okay. Sounds good. Yeah. Again, note to myself to remember to put the lines in the slide. Otherwise, it's hard. So I think it goes here and format this. Just in case you're following and you're having this, I I have the link of the repo in the docs, so you can also use that as a as a reference. Yeah. So in my server dot c s, I need to add this to to stream just similar to what I did here is what I'm supposed to do here. So actually, I did it. I didn't see. Okay. I copy this over, and I put it in the server dot c s file as a tool. So under tools, I put it here. Great. So we we did 14. So we added a a workflow for approval. We've added, an approval workflow to an something to approve or reject to the server dot c s file. Now we can try to see if it works. Right? Let me do this. So ask the agent to process a high priority ticket. So this is my agent, and then I That's weird. Oh, I think I it stopped running. So the agent is disconnected. So I'm just going to restart it. Yeah. And then we should see it's connected in a bit. No? Okay. Then it means I probably broke something in the process of changing stuff. So I see here there is a red line and yeah. Okay. Great. So I'll restart this one more time and see if it works. Okay. Very good. Okay. Great. So I want to ask it ask agents to process a high priority ticket and see what that does. I think I have a support ticket that's probably high priority. So let me see. To help you create a hyper, I need some details from you. I need a wrong order. I'm not sure if this is. So it is doing a couple of things now. So I understand you're concerned about the wrong I need more specifically wrong oh my god. I need to pass in a couple of things to actually get this working. So it's the wrong item. I want a refund, and it's high priority. Okay. Let's see. Okay. Great. So now we see that, we're getting the workflow approval that I mentioned. I need to approve this, so I'm going to go ahead and click approve. And the next thing we see here is I create I could I'll create a high priority ticket for your refund, and it went ahead to create the tickets. And now I can use the ticket ID to reference the support request. The agent will work on processing your refund. So I think this would this would take I'm not sure exactly how long I put, but this should take, like, seven days. So in the time that we currently have, I'm not sure I I will be able to fulfill this refund. But let me see how long will this take to resolve. I created a support ticket for you and set it as unfortunately, I don't have a specific information. Interesting. I think I set it to seven days. Right? And I think it should have been shorter. But, yeah, this is a quick sample. Interesting. This is when using the search knowledge tool that I created, and so this is not exactly the response that I would love to get. But, yeah, we did a couple of things in this exercise. We added an approval workflow to our support agent. We also tried to trigger a high priority ticket. And the part where I would love I would have loved to to to get a response about what my tickets or the status of my tickets. But yeah. Let's move on because we're running low on time. The last part of this workshop is going to be about the MCP. This is the model context protocol. It's basically a way for you to expose your agent's capabilities as an MCP server so that other external tools can have assist to it. So take, for example, our support agent that we just built. We're currently using it directly from our chat UI. But what if I want to have access for for this support agent from a tool like, say, Wimsoft or ClotCode Clot rather. So any platform that allows you to connect to an MCP server, you can currently use this support support agent in, but how do we set that up? So let's take a look at that. So the MCP is an open standard for connecting AI assistant to external tools like I mentioned. So your agent can easily become an MCP server, allowing you to connect to different platforms. We've built an agent that has, I think, four tools so far, and we want to take that one step further and make that an MCP server. So we need to do a couple of things for that to work. First thing we need to do is set up the MCP agent. So by default, the agent SDK also comes shipped with this class. So the MCP agent is a dedicated agent class for the MCP server. It has its own d durable object binding. It has its own SQL database. So it doesn't share the same with the agent. Right? And what this means is that we need to create a new binding. Right? But it follows very similar it follows very similar format in that we created tools. The only difference is here we are using this server dot two, and this is what we used to expose the tools for our MCP clients. Every tool needs to have couple of things. It needs to have the name of the tool, a great description because without this, without a good description, your your either MCP clients or your agents might not know exactly what tool to call. This is an extra, but you can also set up additional resources and you need to serve it directly from the the agents by calling serve slash m c p, and then your API has slash m c p, which can give to any of the MCP clients to consume. So we need to do two things. I think this is going to be in the exercise. So I would go over there. So we need to install the MCP SDK. I think this is already bundled in the agent SDK, so we might not need to install it. I'll try and see. If it doesn't work, then I'll go ahead and install it. But the next thing I need to do is, like, I need to create this source dot m c p dot c s file. So I'll go ahead and create this here. And I instead of doing three tools like I've done or four tools like I've done, I'm just going to do two. So I'll go ahead and copy this into the file that I just created. And the two tools that I have here, the first one is the lookup tool. It looks up an order by the other number, and the other tool is a tool to create a support ticket. So I have those two. And the next thing to do is to reexport support MCP. I think that's the next slide. Okay. So the next thing to do, actually, the first thing we can do here is to create a new d zero binding. And because I mentioned you need to have separate bindings from your chat agent and your MCP server, we'll copy this over to our wrangler dot JSON file. So under my Drupal object binding, I'm going to add a new one here called MCP or support MCP is what I'm giving it the class name. And also, don't want to share the same SQL ID database with my chat agent. So I have to create a new new one. Right? And I'm going to name the tag v two and also call the the the class name. It has to it has to be consistent with what I assigned to the durable objects. Okay. And then finally, in my source dot server dot c s, I need to export, copy this yeah. And I need to also add the MCP handler. So we'll do that to the server dot c s file. So under here, I can put that, and I think I'm missing one extra thing. Easier if I copy this here. Yes. Actually, it's easier if I copy this whole thing. Yeah. Okay. So we have all of that. And what we need to do is we can we can test this out by running the MCP server. So MCP tools are listed when connected to slash MCP. So if I I think we have the MCP playground from Cloudflare that we can use to test this. Let's see. Yeah. Playgrounds. Cloudflare. I should have added this in my list of resources. I think this is it. So I can just here pass in my URL like I have here and at / m cp. Oh, I'm not able to test it locally. Okay. So I need to deploy my m c p to to test on here. I think that's possibly the next step in my slides if I just confirm that. Yeah. So one thing, to note is over the the the different stages that we've gone from doing state management in your agent SDK to where we are, you a few things. You you you can test most of them locally. Or in this case, you eventually would need to deploy your application to to see everything come together. So I think that's the next thing I'm going to do now. So to deploy, it's just one command. To deploy globally, you use the command if you have Wrangler installed, it could be Wrangler deploy. If you don't, please MPX Wrangler deploy. So I'm going to run this in my terminal to deploy my support agent. There's probably already deploy scripts in the package dot JSON. So let's see. Yeah. There is. So I think yeah. Because this is using VITs, we need to first build it and then deploy. So it'd be easy for me to just run NPM run deploy. So once that's deployed, I will try to test the MCP server, we're down to I think this is the last slide. So we're almost there. Great. So we have the deployed URL. Just one second. Yeah. So all the the bindings that I also added to my application has also been added and deployed alongside my agent. So I can use that URL now to test my MCP server slash MCP. Failed to connect to MCP server. There's a possibility that I'm missing something in my code here. But you know what? I I I I know that we're almost at time, and I don't want us to to stay long trying to debug this here. I would quickly show a version of the version that I've already deployed, which is this. So support agents actually, think this over. Yeah. Interesting. So I've deployed this before using the same name, and now I deployed another version of that. So it means the previous one I had has been written. Interesting. Great. So where are we? Let me go back to my slides and talk briefly about the different commands that I have here. When you're working on your on your project and you want to get logs locally, you can run n p x wrangler tail. We also have several different wrangler commands that you can use as you're running as you're working on your project locally. I think the the the full list you can find in the docs, but these are, like, work to check on your workflow. If, for example, you're running a workflow and you're not sure what points the workflow is, you can use either of these commands to to see the progress of the workflow. And yeah. So let's briefly cover security and performance. Right? Talking about, like, the different things you need to do to ensure that your agent is safe, reliable, and fast in production. There are a lot of things on this slide. Well, let's call out a couple. So if you are I think you could already tell from the UI chat agent that I'm using streaming response. So if you'd love to improve performance with your agents, you can use the AI completions to avoid buffering. Currently, I feel like that's what everybody is using right now compared to before when you have to wait to get a response back from from from your agents. If you're using AI gates, we ensure that you cache your responses to to to to save your cost. And also, you can also use this for background board work. There are a couple of things here, but one thing I want to call out is underneath here, we have, I think, two docs right now in the developer docs that covers best practices. So whenever you're bidding anything related to car flare workers or durable objects, I really recommend you read that because then when when you're building, you can keep that in mind to ensure that you're building highly performance and a safe application. And finally, I also added a link here. I don't know if you're into skills, but we have several different skills that you if you're using tools like ClotCode and Corsa to to help you as you build out your application on the Cloudflare developer platform. Right? So we have a tool that consumes the docs mostly, but it's very handy to have because it has context about things like what the agent SDK APIs are and how to actually use it. And as she writes code, it makes it makes things easier. Right? We also have MCP servers as well, an MCP server for the docs, and so on and so forth. Yep. So those are, like, couple of best best practices to keep in mind as you viewed your agent on Cloudflare. So what did we cover in this workshop? We went through a couple of steps. We set it off with high level agent foundations. We talked about how to purchase dates, and also we spoke about the WebSockets, how to keep your clients synchronized across several different devices. We covered to calling, and we also spoke about the workers AI model. We spoke about AI gateway. And, of course, you can also bring your own model or use replicates. Right? Think the meat of the the presentation was workflows. Right? Showing the capabilities of what you can do with workflows, like setting up multistep ticket processing with automatic retries. And finally, you can also do things like human in the look like, Not just give your agent full agency, but interesting. Not just give your agent full agency, but you can also add in human approval. Right? You you you can review what the agent is doing and know exactly what it it does, either approval or reject it before moving on with the process. And finally, the MCP server setup is also something we covered. So I'm gonna leave you with the links. Everything is in chat already. But if you have questions I'm checking on here. Okay. So we see there's been couple of questions and my colleagues have answered. But if you have more questions, we also have our Discord channel, Discord server where you can come and ask you questions about anything related to the developer platform generally. Yeah. That's it from me. The the other thing I want to call out is a lot of things are being shipped recently around agents and the agent SDK. One of them that I covered is agents with workflows, but there's just so much coming out, from the agents as the key team. And the the best way to keep up with all of those updates is by either following our change log, changelog.cloudfeed.com, or checking out the github repo for agents. Right? So thank you, and I hope you enjoyed the workshop. Please, let us know how everything yeah. The QR code, will share. It's here. So the slides and everything that I've covered, if you scan the QR code, you get them. All the links, they're all there. Yeah. If we have any more questions and I'm not sure if we're at time, but if you have any more questions, you wanna ask, I can look through the questions, q and a, and see. But I think most of them have been answered. Yeah. Okay. That's it. Thank you so much. Thank you, everyone. Thanks for joining. It was great having you, and we have yeah. Have a wonderful rest of your day. I'm still here if you have questions, by the way. So you'll see we have four minutes. Alright. Okay. Bye, everyone. Have a good time. Have a good day.