Name: Building applications using AI on the Cloudflare Developer Platform
Uploaded: 2025-12-04T06:31:04.878Z
Duration: 59 min 28 s
Description: Building applications using AI on the Cloudflare Developer Platform

Transcript for "Building applications using AI on the Cloudflare Developer Platform": Hello. Hello, everyone, and welcome. Welcome to building full stack apps with, AI, coming to you from from Sydney, Australia. Just a quick introduction. I am Filip Ryan, and my email address would be philipperyancloudflare dot com, so nice and easy. I'm a Principal Solutions Architect here at Cloudflare, and I focus on the AI products and the developer platform. And with me today, we have Dan Holben, who's my colleague. He, is in Brisbane. He's a solutions engineer. He's been kind enough to to join us here today and help answer any questions that you may have in the q and a. We have a jam packed agenda for you today, so I'm gonna go through this fairly quickly. And I'm gonna give you some advice as well in case you you feel like you've fallen behind. Don't worry. There's, there's there's a lot of documentation and instructions that you can follow on after this webinar completes. Just a little bit of housekeeping, we are recording, so this session will be available on demand later. Please mute if you are not speaking and if you need to ask a question or you just wanna chat, we've got that those facilities, in the tool as well. Quick checklist of what, we would expect you to have sort of ready to go on your on your machine, on your device. Obviously, a CloudFlare developer account. Hopefully, you have the the node ecosystem available on your machine. I like to manage my node versions and NPM and so on and so forth with NVM. And also, open up your AI enabled ID of choice, be that WinSurf, or Cursor, Copilot, etcetera, whatever you like. If you want to participate in our community MVP and Champs program, point your smart device, your mobile to the QR code on the left on your screen, and that will take you to a portal where you can learn more about the program and, join if you'd like. Alright. So like I said, we're gonna go through this, nice and nice and speedy. Let's talk about AI tooling and Cloudflare. How do you accelerate code generation, deployment, and operations when you're building apps with Cloudflare? Well, first things first. You may know that Cloudflare is a great place to develop MCP servers and host MCP servers. You may even have played with our agent SDK. But did you know that we actually make available 15 different Cloudflare MCP servers ourselves for you to use? And by the way, here are three that we're going to be using today. So the documentation one, workers binding to let you interact with our developer platform, and the observability one so you can ask questions from our, login infrastructure. The documentation one doesn't require any authentication. The other two do, and I'll talk a little bit more about that. And, just notice the pattern in the addresses. It's always, you know, mcpserver.mcp.co/ and so forth. So the only thing you need to change is docs, bindings, and observability. Don't worry. There's a little bit more information about this in the instructions if you, if you, forget. Now, like I said, some of these MCP servers, including the two that we two of the ones that we're going to use today, do need authentication authorization, I should say, and they will require a token from from Cloudflare. So this is how the configuration looks for Windsurf. Again, I have some of this in the instructions, which we'll look at in a second, so don't worry. But, just to give you a heads up. A word on tokens. So we will need a, an account, a token for some of the work we're going to be doing today, mainly to connect to MCP servers, but also to use some of the images. You'll see that in a little bit. So how do we create one of these tokens? I'll step you through it real quick. But mainly the the steps are you get into Cloudflare, you create a new account token, you select an appropriate template. And for the for the purpose of the workshop today, we're gonna add a few little scopes, mainly, the d one for the database and the Cloudflare images one. So let me show you how that looks really quick. So over here on my Cloudflare dashboard, you can see I've got a lot of information here. I was looking at a particular, worker. But what I wanna do is click on manage account at the bottom left hand side corner and go to account API tokens. And then I wanna create a brand new token over here. And like I said, I'm gonna use a template so I don't have to, you know, add all the scopes manually. And the edit of their workers once the right one to use. After I do that, I'm gonna add two more scopes. One is the, p one database, edit. And one more, it will be the Cloudflare images one, which is just down the list a little bit and edit as well. I can add a specific zone here and just do one that I wanna use, and the other details I'll leave up to you. Good practice to, enable a time to live so your token expires after a little while. You get a summary, and then if you click the create token button, you'll be actually given the value of that token, which is, you know, very sensitive. Is it secret? I'm not gonna click the button myself. But do go ahead and click on a button and make sure you copy and paste that token into a text editor of choice. Could be text edits or if you're on a Mac or notepad, if you're on a Windows machine, so on and so forth. Okay. Back to the presentation. So make sure you have that token at hand because we're gonna use it very soon. Now let's talk a little bit about the Cloudflare developer platform. Some of the things that we're gonna be using today. So first of all, for the front end and the back end, we are going to be creating a front end. It's based on React. It's gonna be very, very light and very, very simple, but it's going to be handled, for us by workers' static assets. Basically, the workers' product and service will take care of combining all the necessary static assets for that single page application in, also deploying that to the according, infrastructure at Cloudflare so you can enjoy CDN delivery so so forth. For the API back end, obviously, we're gonna do that on Cloudflare workers, and we're going to employ, an open API compliant set of APIs. And we're gonna use a framework called Hono, which is sort of a a lightweight, built on web standards, framework, somewhat similar to to Node Express, if you're familiar with that. And for our, database as part of this, full stack app three t application, we'll store data in d one. And d one is our managed serverless database, with SQLite, SQL semantics. Now a little bit more. We are going to use Workers AI to generate some images on the fly. That's pretty cool. And we are going to use, call for images just to to deliver those images. So we we can store images in a in a managed service that has a lot of functionality for the type of things that we we need to do. And finally, we're going to use the observability infrastructure, call for it, to ask ask questions about our website. Now what are we actually building here? It's a pet adoption service, and, we're gonna be leaning very heavily on our AI tools to make this a a reality. So ready for some really complicated architecture? Here we go. For the back end or the staff, we are not even gonna bother creating any sort of, you know, admin panel or management, for the app. We're just gonna issue, you know, direct, post requests, to the API and and create, create, pet entries. So the idea is, there'll be a list of pets, with descriptions of the pets, and then, people will be able to to select a pet, view more details, and then apply to adopt a pet. And the way this will work is when you add the details of the pet, we will ask GenAI to generate an image for the pet, based on the description of the pet, so be it a dog or, you know, a pet squirrel or so and so forth. The image will be stored in Cloudflare images, and then at the end, we'll store all the information into our d one database, including, the URL for, for the image. And on the end user side, we will look at, a front end this time around, of course, and that's gonna be, based on React and with the VIT, plug in and ecosystem. That's gonna be delivered to us, by the static assets, through workers. And that front end will call the back end APIs in Holo, and fetch information from, the d one, database. And the images presented to you, by the front end will just be sourced directly from Cloudflare images. So no no need for transformation or anything, for this simple example. Alrighty. Here's a mock up, a beautiful mock up that I was able to do after a lot of effort, and this is, something that we're going to feed into the large language model as well. Now my success rate has been, fairly fairly mixed with getting, you know, a a great result after just one interaction, but I think that's part of the exercise. And let's see what we what we can get, what happens when we what we can get done. Alright. It's building time. I'm gonna leave that URL on the screen just for a moment. Don't forget, this URL is also in the docs, tab of, the webinar, tool. So if you need to refer to it later, you can you can find it in there. But the idea is you go into that, GitHub repository, and then we are going to clone, the repository in a moment. Also, as part of the docs, you'll find information about all of the Cloudflare MCP servers that we make available, all 15 of them. If you find, you know, if you if you're wondering if we have something else that you could use, it will be in there also in the docs. Alright. Let me exit presentation mode for a second, and I will take you, to the webinar, repository, I should say. So here it is. Now the way this webinar repository is structured is a couple of things you need to pay particular attention to. First of all, there is a webinar folder here, and this will give you, the instructions that you're going to be following and also the mock up you saw a moment ago. Okay? I'll make that a tad bigger, my hope. And, the read me contains a bit of information, around the project itself. You know, it's it's it's an it's a website that the animal champions, wealth handle for profit wants to create, the tech stack deployment, and most importantly, some information on the the the APIs, the endpoints, and some technical information about the schema, which our large language model will use in a sec. Okay. Cool. Finally, with the repository, you have a number of branches in here. And as we progress through the steps, okay, if you just wanna sort of skip ahead to a step that's already completed, you can just swap the branch. Okay? I would suggest that you don't do this on your locally cloned version of the repository. Just go on to GitHub and and swap the branches just for simplicity, and you sort of stick to the main branch and do your development. Otherwise, it it gets a little confusing, a little bit tricky. Also, if you do skip ahead, there may be things that you sort of created on, you know, on the CloudFlare side or so on and so forth that, that may not be present. So you do need to be aware of what the step is actually asking you to do or or expecting depending on. Okay. Cool. So Now what you need to do is clone the repository. Use your terminal, do a git clone of that repository, and you will end up with something that looks a little bit like this. As you can see, I'm using our WinSurf for this, for the webinar today. I already have the instructions here on the screen. If you are a little bit uncertain how to get instructions again within the webinar folder, I like to right click and open preview so you can actually see the markdown. And, I have I have different sections here, so you just go ahead and expand some of these sections. Okay? So first things first, I'm gonna open a terminal and start going through step zero. So the first thing we need to do is get your account ID. It is possible that you have multiple accounts in your CloudFlare, organization, so it's kind of handy to just have your, account ID within your configuration. So I'm just gonna do that by writing a quick command here, but you can more than welcome to, to find this in your in your dashboard as well. Very, very easy to find. If you want to find it in your dashboard, let me give you a heads up. You can come over here to, workers and pages, and it'll be here at the bottom right hand corner. So that might be a little bit too small to see, but you can also get it from, actually, from the URL itself. Okay? So here is the one I wanna use. Let me just clear this. And in my regular configuration, I'm gonna go over here and go account. Add d. Oops. The daisies. And include that guy in there. There's a step later in the, webinar or the the build that asks me to include a environmental variable, environment variable, I should say. I'm just gonna include it here now just to save me a little bit of time, and it's called account ID, and I'm gonna do the same thing here. Okay. Cool. So a little bit of configuration. Now, remember how I told you to save, that token because you're gonna need to use it very, very soon? Okay. Cool. Let's use it now. If you create a dot m file, within your, code base, Cloudflare is smart enough, to basically not to basically use that for your local development, but understand that, you know, that's something that that exists just locally. So we're gonna do what we're gonna do now is create that locally so we can, you know, run some stuff locally, but we cannot also push it as a secret. We're gonna do that later. So I'm actually not gonna create one because, otherwise, you're gonna see, you know, all of my secrets, all my tokens. So I'm gonna try and copy one from another, another folder where I was practicing practicing this this webinar. And okay. Cool. Now I have a little m there. Cool. Nice and secret. No one can see it. And finally, I'm gonna install my, dependencies. So this will take a minute. And this will also give you an opportunity to catch up if you, you know, need to go back and get a token or something along those lines. Cool. So install the first dependencies. I should probably have just copied and pasted all these. Now you may notice that we have a dash d there for for v test and a couple of other things. That's just, indicating that those are development dependencies. You know, when we we push to prod, we don't necessarily need those. That's just a testing testing framework. If we, are doing well on time, I will actually go through the testing part of the workshop, but I'm intending that to be a little bit of homework for you. Cool. All of our dependencies have been installed, and now it's the bit around, MCP server configuration. Let me make this a little bit smaller. Okay. So if you don't have the Cloudflare MCP servers configured, and you are on Versus code, please look at this bit of configuration and instructions. Okay? So create a Versus code folder, add an MCP dot JSON file in there, and copy and paste it below. Of course, don't forget to replace your, your token here, the value of of your token with your actual token. Okay? So that's Versus code, folks. For the folks at Windsurf, a little bit more complicated, unfortunately. Best way to to get to where you want to go is, to do, shift command p on a Mac, or open the MCP marketplace. And then there's a small little icon, sort of up the right hand corner where you can actually configure the MCP server, sort of, manually. And here are the different configurations for Windsurf. And finding cursor is actually quite similar to Versus code. You create a cursor folder, add the m c p dot JSON file, and here are the, configurations. Again, don't forget to replace your, replace in your bare token. Cool. Hope you guys are able to do that. If you are using something like WinSurf, you would have an indication that your MCP servers are enabled by this little green light here. And also the numbers showing you, you know, the amount of tools and and other aspects of the, the protocol that are available to you. I'll give you a second. Alright. On we go. So step zero is completed. I'm just going to to, collapse this one, expand step one. So the first thing we wanna do is really to start implementing a very simple, API endpoint. And like I said before, we wanna use a whole new framework. So, let's just have a very quick look at how our website looks right now. So it looks a little bit like this. Obviously, just a placeholder. K? And this doesn't do much. It's local. And here from here, we can we can actually call, the local API and get a response. So how does that API look? Well, it looks like this. And for simple use cases, we're using a Cloudflare Worker to respond to a couple of, you know, endpoints or paths. This is this is this is sufficient. Right? It's no problem. But if you are building a full stack application, you really want a web framework, you want to be able to use, you know, proper logging, middleware, define your routes, so on and so forth. That's that's what HONO allows us to do. So I am going to use the very first little bit of AI, and I'm gonna ask, in this case, I'm gonna select Claude, Sonnet 4.5 because I was getting good performance in terms of, like, latency or or, time to first token and results. I'm gonna ask it to refactor this, you know, out of the box templated code, into the HONOR framework. Let's give it a moment. And large language models, by definition, they are non deterministic. So I've run, these sort of prompts at the webinar a few times. I've had success every time, but I cannot promise I'll have success every time. So let's see. Okay. This is exactly what I was expecting. I am going to review just quickly and accept all. What we have now is, a simple implementation. It does doesn't require, you know, manually passing a string to figure out if, you know, there's API in the URL path, and also provides us with a four zero four. So much much more robust. Right? And, of course, Claude is helpfully, giving me, an update here on what it changed. Now I would expect, our and if you didn't catch that, we have, a hot module reloading as part of the VIT, ecosystem. So if I refresh this, I would expect it to work exactly the same, and it does. Brilliant. Okay. Step one completed. Let's move on to step two. Let's implement the actual, API slash pets endpoint. Again, referring back to that read me. Right? And this is a much more involved prompt or much more involved task. And for this task, I want to adopt, some of some of anthropic's best practice, around the explore plan, code, and commit workflow. Okay? How are we going to sort of translate that workflow in a very simple high level way to the task at hand? First, we're gonna tell the, large language model, so so coordinate sense or SONNET, which files to look at, which files to explore in order to get more context about what we want to do. We're gonna we are then gonna provide, extra information in the form of the, the library that we wanna use, which is the ZOD OpenAPI HONO library. And finally, we will, make sure that we use keywords like think and must to signal, that, Claude should should create a plan before it does an implementation and that it must adhere, to the instructions that we provided. So here's a prompt at the bottom, and there's a little bit, a little bit of sort of copy and pasting here required. First, I'm gonna copy and paste this bit. Okay? I'm gonna put it here. I'm gonna skip a few lines. And now, I am going to go and look at the ZOD OpenAPI HANA documentation, which is here, because it's very handy in giving me some examples of how the library should be used. Okay? Now I am aiming for speed here, okay, and for an MVP. So I'm gonna click the raw button, and I'm gonna copy all of that information because it's already beautifully, tagged as, as markdown. Right? And that's exactly what larger language models, like to see. So I'm gonna go back to my windsurf, and I'm gonna paste all that stuff in there. Alright. Now the outcome I want is, for the, the set of APIs I'm going to be creating to become more and more robust. One of the things I wanna do is make sure that there is, you know, a forward slash doc endpoint that will document all the APIs, that are available in this app as I go ahead and and continue to create more and more of them. I also wanted to make sure that any API calls and responses adhere to a proper schema, again, as part of the open open API, framework. So because I added the word, the keywords think, Claude sometimes jumps ahead and starts, you know, implementing, after it planned, but often it will sort of pause and say, hey. Here's the plan. Do you wanna do it? So I'm gonna say, yes. Implement. And that is the explore and plan part of my best practice, done. We are now at the coding stage. And of course, I would then review it. And if accurate, I would then commit the code to my, code versioning tool, which is more more often than not, it's it's it's Git. Right? And then for GitHub. So the schemas dot t s file has been created. Now, some refactoring of the index of the worker back end is is being done, and, we have it completed. And this looks exactly like I would expect. And same thing here. So I'm going to accept all changes. And as you can see, we now have a route defined for us with the associated schema, making sure that that adheres to the schema. We have the actual implementation of the route, which as per the, the prompt is just hard coding, you know, two pets. So we have some dummy data in there. And now, like I said before, hopefully, we have that forward slash doc, endpoint as well for, for, API, REST API discovery. Cool. Alright. So that's most of step two. Let me see. One last little bit. Because we are using workers assets and we are basically creating a single page application, we are determining that through, the regular configuration file. You need to add a couple more configurations just so, CloudFlare understands that if particular, paths are are requested, it should direct it to the worker and not try and respond with the static asset. So just copy these two lines, or you can copy the whole thing if you just wanna sort of paste over it. I find it easy to just copy it like that, and I'm gonna go into my Wrangler. And over here, I'm just gonna add that little bit of information. Now if you hadn't done that and you try to, you know, hit those API endpoints, all you're gonna get is the front end back again. Now if you need more information about that, right, if you think like, oh, well, how does that how does that work again? Like, what what what was that? Don't forget, you can just ask Claude in this sense. Right? Because it's going to, communicate with the cloud side documentation MCP server. It's gonna use, you know, retrieve augmented generation pipeline behind that. You don't have to worry about that. But it's the your large language model is gonna be given the right context, and it's gonna come up with a with a high value, a high quality answer for you because it's anchored in the CloudFlare documentation, which is which is really helpful. Alright. Cool. So now we have a little endpoint. Let's, let's talk about database shell. Cool. And let me let me collapse this just so it's a little bit cleaner to read. Alright. Cool. Okay. Now we would like to use, a database to store our pets and, obviously, we want a local database. We want a database, on CloudFlare, later as well. Now I could go and use the Wrangler command line interface tool, the Wrangler Wrangler CLI, or I could go on the dashboard and create a database, you know, if I wanna do it, on Cloudflare. But, hey, I I'm just gonna do it through through, the MCP server. Why not? So, this is what I want. I'm gonna go over here. I'm gonna create Petzl two. Okay? So don't don't be alarmed. This is if you seem a little prompt here because I already have a Petzl one, in Calcutta. I don't want things to get mixed up. And now what this should do is identify the fact that I wanna create a new database. And I'm being very explicit here in one MCP server tool for it to use, so I have a high level of confidence it will work correctly. And in a moment, I'll have a database created for me. Okay? Cool. So that that database now exists on Cloudflare. It does not, however, necessarily exist locally. That's okay. Because the next step is for you to add, the details of this database as a binding to your, Wrangler configuration file. And the moment you do that and you spin up Wrangler or spin up your your app, Cloudflare will create a emulated version of the d one service locally so you can continue deploying. And, you know, local development is something that we're very passionate about. We wanna make sure that people can can have a great experience. So Claude actually already helpfully asks me, like, hey. I got the details of database. Do you want me to add to your Wrangler configuration? I'll say, yes. Please add. Or I could just, you know, make it look a little bit like this and sort of copy and paste it. Now in a moment, Claude will add that to, Wrangler. Just keep in mind that because we are using TypeScript, we want to make sure that our code understands the typing of all of our different bindings. Right? So I'll just wait for that finish and double check that it's yep. That looks perfect. Accept. I'll go back to my instructions, but let me stop the server for a second. I could have done this by creating another terminal. I wanna keep things simple. I'm gonna run this thing, which is, type gen. It's just gonna regenerate all the types. Right? So we'll look at things like my my dot m over here, because it's basically like a local environment environment variable. It's gonna look at my Wrangler, and it's gonna create and modify, the types that are available for me here. And you can see there's there's pretty much nothing in there now. But once I run this, you can now see that we have, you know, that environment variable that I declared, account ID. We have the token, which is in dot m, so it's not presented here. And we have a DB, a variable within the the environment, that we can access our code can make direct access of. So very, very helpful. Cool. So we now have a database. Let me just double check. We don't have anything else, missing. Okay. We do have very important part. I hate writing SQL queries by hand, especially when it just, like, creating schemas and inserting data. So I'm gonna ask Claude to do that for me. And we have a schema for this data already available. Right? We had to create this for our open API. So we can say with a high level of confidence that, Claude should be able to create a a SQL schema or database schema that adheres to the schema that we expect. So, again, I'm going to refer to a specific file, and Claude will create a schema dot SQL file for me that I can execute. Normally, you'd wanna do this sort of, like, database transformation, using some something called migrations, which is obviously, we support at, at Cloudflare. Migration is just a way for you to to track changes, you know, sequentially. It's obviously best practice. This is just just a workshop and example, so we're not not gonna worry too much about that. So I now have a schema. Let me close a couple of other things. I now have a schema file. And, most times I run this, you get some, some dummy data as well that, Claude acquired from the, from the read me, examples. Okay. Cool. So over here, let's actually do two things. First, we are going to run that SQL query locally. You can see that I forgot to refer to the correct, HADs database, which is all two. Notice the flag local, so that's affecting the database that I'll be using for my local development, and this is remote, which will be affecting the database on Cloudflare itself. So it's giving me a little warning that it's gonna, you know, be doing schema changes, so it might lock the database for a bit, but that's totally fine here. Alright. Cool. Done. Step three. Let's go to step four. Now step four is a fair bit, more involved. The first thing we're going to do is to refactor the API for pets into a real API that reads information from a database. Right? Because right now, it's just giving us, basically, dummy data. Right? The data that's hard coded. Let's just run that for a second just to illustrate what I'm talking about here. So here is my website as it looks right now. Still looks exactly the same, but I do have, as an example, a docs endpoint. Right? That's the open API self documenting endpoint. And I do have an endpoint that would give me a list of pets. But, again, this is hard coded. Right? So let's tell Claude to look at the right areas of the code base, so the index, which is our API back end and the read me and the schemas, and refactor the only API endpoint we have right now, to actually query the database instead of returning a hard coded response. And let's hit go. Now you may be jumping ahead and noticing that the next step is actually to, implement all of the other API endpoints, right, which are, you know, few details about a particular pet, you know, the one that responds to, the button that will be able to help people adopt a pet, and finally, an API endpoint to create a pet. So why why didn't I just say implement all the API endpoints? I could've, but helping the large language model understand the context of how to implement those APIs by providing a well implemented example first will just add to that little bit of marginal success. So I just broke that step into two, which again is, something that you should do and a lot of the thinking models will do for you these days. But in terms of, you know, making sure that you have a successful implementation, it's it's a good thing to do. Okay? So I'm going to have a quick look at the code. I was about to blindly accept it, but I'm gonna have a little look at the code. This is this is problematic, and I'll I'll tell you a little bit later. But we can see how it's changing a few things. It's removing all of that hard coded information. It's then using the, the database binding here. Right? That's how it looks when you're using, HONO. It's doing a select from pets, so on and so forth. Right? All all of this stuff looks looks pretty good, so I'm happy to accept it. Now it is defining, the type for the the, the AMV context object here that's that's presented to us, by the worker d run time. I actually don't want this to happen. Okay? Because it's going to ignore, the other types that exist in here. It's gonna be problematic later. So this is something that will be captured in testing. Right? But let me just double check that I can just comment these guys out. And as you can see, I don't I don't have any you know, TypeScript is not complaining me. I don't have any linting errors. So I've seen Clog do this before, and it's it's fine, but it can cause problems later down the track. Okay. Now let's ask it to create and complete the rest of the endpoints, and the language is slightly different. It does use a keyword, master and think. Oops. Every time I double click, it does that. Excuse me. So once again, it may stop and sort of plan things first and then ask, my go ahead. So let's just keep an eye on that one. Now we're going okay for time, but not fantastically well. So I may actually, gloss over the the testing bit of, of the webinar, but it is there for you to to enjoy. You can, as an example, skip ahead to, you know, step five, and it will, show you the the files and and the information you need to, you need to, complete to get the testing done. Now why did I include testing as part of the webinar? Look at I think it's really important. And, again, it just increases your success rate on any project that is, heavily dependent on AI cogeneration. If you can ask, your large language model or your coding tool of choice to perform, to run tests, which you have manually created, initially, and then adjust implementation based on the results of those tests. And then further down the track, once you have a high level of confidence that it's doing what it needs, ask the large language model to create new tests for edge case scenarios and run through those as well. So, really, it's best practice in any code base, but I think of particularly importance if you are trying to get, the best possible outcome of your large language model and your, AI enabled IDE. So this may take, a minute or maybe half a minute. And after that, we will go into the, AI image generation, which is which is quite cool. As we wait for that, it'd be nice to run a poll around, which IDE, you folks are using. It'd be interesting to know if are you all on, you know, straight up Claude code, which is, you know, almost not really an ID. It's a server neo ID, or if you are using some blank Versus code and so on and so forth. I'm seeing some votes coming in. Versus code in the lead so far. Oh, Versus code on autopilot by far the the number one result here followed by clogged code but trailing behind and then cursor and, windsurf. Yeah. Behind, but not not that behind. Versus code in autopilot far and above the the most, common option. Interesting. Okay. Very, very cool. Alright. So that implementation has finished, and we can see now basically that that sort of pairing of, a route and then the implementation of the route. So now we have, the API pets, and then implementation. We have the detail of the pets, so on and so forth, all the way to the create. That's great. Okay. Cool. So that was, step four. Let me just triple check it and miss a, a part of it. No. All good. Step six. Now the AI image, generation. This is gonna be fun. So right now, you have, dummy data in your database, you know, two pets, just like description of the pets, you know, this particular type of dog, this particular breed, and it's big or small, it's brown or or white or black and white and so on and so forth. But there's no image. Right? Maybe the organization behind this, you know, wasn't equipped with with phones or so on and so forth or, you know, not a good environment to take photos. So how do we get AI to generate a a picture for us on the fly? So let's add another binding, and this is how easy it is to, you know, enable your application with with a bit of AI. I'm gonna add it to my Wrangler. So you can put it anywhere, really. I'm just gonna put it down here. Okay? Now the instructions do tell you to add your account ID as well as a environment variable, but I already done that. So if you haven't done it, just just add something like that. Okay? So that's the first step. We are going to run our, type gen again. Because we added a new binding, we want to make sure that our code and and TypeScript understands that, that type. And now we're actually gonna, put a secret here in our, in CloudFlare itself because the moment we deploy this production, right, we don't have access to the dot env with with the, with the token. Right? So we're gonna create a worker secret. So this is the command. Okay? And I'm gonna do a bit of a bit of black magic here. I'm gonna obtain my my token from another screen. Really, it's not the end of the day if I expose this because it's got a twenty four hour time to live, but just in case. Alright. It's going to ask me, hey. You know, it doesn't seem like you have an app of this particular name because we haven't deployed it. Right? And I'm creating a secret that's particular to this specific app. So don't be alarmed. Just just say yes, and it's gonna create a a dummy, you know, Cloudflare Worker, app for me just to create that associate that secret. That's totally fine. Alright. Now there is some of there's an official example in the documentation how to generate an image, and then upload it to to, to call for images. Sorry. How to generate an image with, workers.ai and upload it to call for images. You can go and have a look at that. But, really, what you need to do is, refactor the create pet route or implementation of that route. Okay? And what you need to do is get the right context for the prompt, which comes from, you know, the the JSON object when you try to create a pet, and then you need to, get a URL after you created and uploaded the image. So I'm gonna get this little bit of code here. I'm gonna go back to index. I'm gonna go to my create pet route implementation, and I'm gonna add this guy right here. I see a little, you know, little little bit of complaining here from the IDs because, there is a helper function that I that I that I created to just to keep the code a little cleaner, and here's the helper function. So just copy and paste that one, and I'm just gonna put it somewhere in here so keep it nice and nice and clean. Just one little bit that I, wanna highlight is, you might want to change this to your account ID. That's just, the way that the call center images, service works. So I'm gonna add a variable here and, whoopsies. It's gonna be my account ID. Okay. And the token I'm getting in from my environment as well, and that should be good to go. Cool. Now let's let's give this a quick crack before we we progress. Let's say let's clear this. Let me do two things here. Let me first run the application locally. Okay? That's, up. It's it wants to know which account I'm going to use in order to work as AI can run locally, of course. It has to run on our edge network, making use of our our accelerators, our GPUs. So the moment you try and run your application locally and you have an AI binding, it's gonna say, hey. Which account do you want me to to go and run this for you? That's why I got prompted it. So here's my local locally running app. And, in my, other terminal over here, I'm going to post to the create endpoint. Bear with me as I edit some, some code here on the fly. And I think it's 1573, isn't it? Is that the port? Yes. It is. Alright. Fingers crossed I didn't break anything. Looking good. This is the it's taking a little while to respond because it generated an image for us on our edge network here in here in Sydney. Cool. Now I don't have a UI to view this, but I can still see that image. How can I see that image? Well, that's the ID I got. Okay. So I should be able to do some of this, I believe. Here is my image for that pet, which is, I think the data I had was a giraffe or something. Oh, I may have gotten to ah, I forgot a crucial component of this implementation. Silly me. After you generate image sorry, folks. I should have done a better job of adding this to the, the documentation or the instructions. As part of your, refactor of the create endpoint, make sure to replace the the dummy data for the image with the image you've just created. Alright. Okay. Cool. I won't do that again because it it might take a little while, and we are pressed for time, so I'll keep going. But don't forget to to edit this a little bit here. Okay. Cool. Now this is where I don't get a lot of success. So what I'm gonna do is I'm gonna let this run, and I'm gonna show you, two things. I wanna show you a, a final product, and I'm gonna talk about observability for a second. Okay? So, I didn't give you a prompt here because I want this to be a little bit of homework. I want you to, you know, experiment and and go through a little bit of trial and error. Let me see if I can do this on the fly and see what kind of results I get. Look at the mock up file and implement the UI accordingly. Make sure it's responsive and, use a light color scheme. Alright. Now this is gonna go away and and do its thing. Like I said, I had limited success with this. Now, let's go back to the Cloudflare dashboard for a moment. And while you are waiting for me to have a look here, why don't we, ask you guys, which back end language do you usually implement your APIs on? Reason I'm asking this is Cloudflare workers loves TypeScript, and we do have support for Python and Rust and WebAssembly, but we also introduced a container service, couple of months ago. So if you do use, let's say, Go or Java or dot net or something else and you like to deploy back end using a Docker file, you can do so on the on CloudFlare today. And it's very, very exciting, quite frankly. So this is, a app, a pet adoption app that I've prepared earlier. So it looks a little bit like this. Right? Like I said, according to the mock up, and you can see there's a lot of information here. Frank, a lot of repeated information is because I'm hammering this with a bit of load testing. Okay? So, let's let's look at this. I actually don't know what the same meeting will look like. I haven't haven't checked. Okay. That's actually not too bad. And we have, you know, the associate information. Right? It's a cat, so on and so forth. I can click to adopt. Hey. Great. You've adopted this pet. Right? Now how does this look in terms of observability? Well, here is some of the data that we are getting. You can see when I've started hammering this, with some with a bit of a low test. Right? So it was it was today clearly. And we can see the top level, metrics that are important, requests. You know, it's gone shot through the roof, of course, because it's a very synthetic test. Interestingly, we can see all the different invocations and associated wall time and CPU time. So you can see that most of the time, our worker CPU is basically not doing anything, and the CPU time is the only amount of time you will pay for. Okay? So wall time is input and output. You know, you call in API somewhere else. You you you don't pay for that time. So anything here that is, let's say, above, I would I would hazard a guess, a second is probably a post, and it's probably, because it's it's generating a, an image through our workers' AI product. So let's try and add a filter here just to give you a sense of how that looks. Let's go wall time, and let's say it's greater than one thousand milliseconds, therefore a second. Maybe I need to add a bit more time. Perhaps I have bungled up my filter. Okay. No matter. I'll go back to that in a bit. Another thing I wanted to show you is, traces. Now traces is basically a way for you to understand what part of your request is taking the longest. This is a new feature introduced, about a month ago. And, again, you can see that, some of them are are much longer than others, And you can tell that the proportion of time here is is quite clearly our workers AI generated that image. Here, you can see, a fetch, and you can you can see the proportion of time that's, you know, allocated to the d one database for for a for a query. And a lot more information here. Okay? So if you, wanna run traces, open telemetry, so on and so forth, there's a lot that you can do in here. K. Now back to my attempt at implementing a UI here. It's it's done something. I have very little hope that it's done something good, but I can certainly have a have a little look. And, actually, hey. I'm eating my own words. Doesn't look too bad at all. Look at that. I can't see an adopt button. I need to scroll a little bit, but that's that's not too bad. The first two are the dummy data. Right? So there's no image. The third one, I I screwed up, so there's no image either. But if there was, you'd see something like we saw a little bit earlier with the cat. Now let me ask something else here of this, through the observability. The name of the app where I've been hitting, with some load testing is actually the webinar o one. So let me refer to that as I ask this question. Which region in the world is, most of my quests coming from for the oops. That should be good. Let's see. Hopefully, you'll be smart enough to understand, I mean, the Cloudflare observability MCP server. Yes. It is. So it's listing all of my workers first using that tool. It's gonna find webinar dash o one, and it's gonna give me an answer. And as we wait for that to come up, it really is sort of the the end of the, the build and the the coding part. And, yeah, I wanted to have a quick quick look at some questions and see if I can help you folks with anything else. Let me just wait a couple more seconds for that to come through, hopefully. There we go. That's exactly what I expect. Most of the requests are coming from Europe, Belgium, and, also The United States from Chicago. 53% from Europe, 47% from North America, and a minimum amount of traffic from a Strad and APAC. That's fantastic. Right? Not having to even look at that console and the login to just figure out a really important question of like such, and you can go a lot further with this. Alright. Back to the presentation. A little bit of information about the repository that I covered earlier, and we stop the questions. So let me let me have quick peek here at all the q and a and pick a couple of questions that we can, help answer. Do you use a Figma MCP, and do you get better results in building UIs? No. I have not used the Figma MCP. I know it exists. I also know that, Canva has a bunch of MCP servers. Very excited to give this a go, actually, because, as you can very well tell, I am horrendous at creating front end or attractive designs. Do you have recommendations to build custom interactive UI components, anything libraries? Look. I do like the, the material UI library of components. I have read recently about a very non opinionated library of components where you kind of vendor the the just the components you you need into your code base. And by vendor, I mean, you you sort of literally just copy and paste the component you need. So it it just adds transparency into what you're doing with your code base. I can't quite remember the name now. I apologize. But if it comes back to me, I'll I'll return to the question. I've got a question here around, I wanted to get your opinion extending on the topic of best practice. We have examples of leveraging tests. Yes. What about for instructing an LLM to ensure dependencies it introduces is free from vulnerability supply chain attack. That's really a fascinating one. Look, you know, thinking about this question on the spot here, I would probably say that a large language model is not your best bet if there is there isn't any more sophistication around how you ask that question. I'm seeing a lot of the industry now, standardizing not standardizing is a strong word, but being interested in basically out of date dependencies. Let me let me explain this better. I'm seeing the industry say, if you are building a new application today and you use a package manager, we will have some intelligence on our development environment to restrict your your dependencies to anything that's, let's say, earlier or newer than ninety days. I think that's a really interesting one. And there's a lot of tooling around around vulnerability, and, you know, shift left in security. I'm sure there's, there are large language models or AI tools or IDEs that make use of AI tools to understand attack vectors and so on and so forth. Let me see what else. Do you recommend using better or for authentication? Sorry. My colleague has already responded to that one. Yep. I think better auth is great, by the way. Very popular. So most of these, these other questions, my trusty colleague, Dan and the other folks have already answered. So I think I think with that, we can, most likely come to come to a conclusion. Thank you. Please feel free to reach out to me, philippe ryan at cloud flare dot com. Feel free to participate in the, the cloud flare MVP and champs program, and, I thank you for spending your your time here with us today. Thank you, and, have a great day from Sydney.