Name: Build and Deploy Remote Model Context Protocol (MCP) Servers with Cloudflare
Uploaded: 2025-08-13T09:03:21.007Z
Duration: 1 h 36 min 4 s
Description: Build and Deploy Remote Model Context Protocol (MCP) Servers with Cloudflare

Transcript for "Build and Deploy Remote Model Context Protocol (MCP) Servers with Cloudflare": Hi, everyone. We'll be starting in a few minutes. Excited to see so many people join. Hey, everybody. Alright. So, hello, everyone. Good morning. Good afternoon. Good evening, wherever you are from around the globe. Welcome to the Cloudflare MCP workshop. I am very excited here today, as we dive into the hands on session where you will learn how to build and deploy MCP server using Cloudflare. Whether you are a seasoned developer, engineer, or just curious about Cloudflare capabilities, this session is a bright match. Congratulations. You are in the right place. We have a lot of things to cover. So I'm gonna pull up the next slide and talk about what we have today. So we will do a brief introduction to the model context protocol. We will talk about, the concepts of MCP, what it is, why it matters, and, we will also walk you through how to build and deploy, first MCP server using Cloudflare tools. And the the third point that you see on the slide is actually the hands on session that we are going to run today. And we have three use cases that we have built so far already. But out of the three, we are going to use just one use case and build it live in front of you. And to do that, we have a poll. So make sure you participate in the poll and, the use case, which will get maximum vote, will be picked up. And our speaker is going to be building that, that live in front of you. So make sure you have your laptop ready, your enrollment ready. Make sure you have your prerequisite set up on your machine so that you can build it along, when it is so that's gonna be there. And then we will also have a step by step building to complete the deployment. And so make sure you follow along. Make sure you also complete the deployment, by the end of the session. And do submit your project, to win exciting goodies. We have a QR code that I'm going to show you by the end of the session. And so you can scan the QR code, submit your finished, project, or a use case, and then we'll review and, award you with Cloudflare goodies. Moving to next, so hi. My name is Tanmay, and I'm part of the community team at Cloudflare. I have with me Gif Tekvenu, who's the senior developer advocate at Cloudflare, and, she'll be the expert workshop expert for our session today. I also have Ajay, Ajay Sassy Kumar with me, who will be moderating the q and a panel along with me during the workshop. So make sure you post all your questions in the q and a window. Do not use the chat window. You can still keep an eye on the chat window, so that, you know, if there are resources, links, important links that we are gonna share, all that will happen in the chat window. But make sure you post all your questions in the q and a. We wanna make sure all your questions are answered, and we wanna make sure that all the questions are, in the same window. So please use the q and a. There are couple other housekeeping items that I would like to share before I start the session. So, yes. We are recording this session, and it will be available on demand later. So if you have your friends, colleagues, not able to join today, you can share it with them later. Make sure you are on mute, and use the q and a for questions. And do submit your finished project by the end of the session to win rewards from Cloudflare. I will go to the next slide, and let's talk quickly talk about the checklist. I hope you all have installed these on your machine. Make make sure your involvement is ready. And, if you don't have any of these prerequisites installed, you can go to the Cloudflare documentation and install them right away. It won't take much time, while we are talking while we're talking about the concepts. You can still, in parallel, go to the documentation site and make sure you install all the prerequisites in advance, so that, you can follow along when we are building. You can also build on your machine and take a look at, by the end of the session, how it looks. Very quickly, before I hand it over to Gift, I would like to, you know, take a moment and introduce you to the Cloudflare MVP and Champs program. This is a fantastic, initiative for individuals who are passionate about giving it back to the community by sharing knowledge, by actively forums, or helping others to solve technical questions. If you enjoy doing that, if you enjoy helping fellow members, love contributing to forums, Discord, or maybe, you know, love going to meetups, attend you know, educate people in the meetups, This program is definitely for you. So you can just scan the QR code, bookmark these posts for later reading, after the session, and, you can get to know how you can be, one of the entities and champs, that you already have in the program already. So that's it from my end. I'm gonna invite Gift and Venu to start the workshop. Gift, take it away. Thank you. Thanks. Thanks so much, Sami. It's really ex I'm really excited about this workshop and just essentially sharing what MCP is and building together, MCP servers on cloud flavor. First, I'm very curious. Is anyone here familiar with MCP? If you are, we currently have a cool tab on the platform. You can go ahead and just, select an option. If you're familiar with MCP or, you currently use it, I'm curious to hear what you use it for. But, yeah, what is MCP? This is like a buzzword that has been going on in the, you know, tech world recently. MCP is essentially an open protocol that standardizes how application can provide context to LLM. So you can think of it as a language that both your AI and the two can understand, making integration consistent and predictable. Without MCP, you will find that with your LLMs, you probably not have enough context. So, essentially, what the MCP is is a standard that lets you connect external tools, APIs so that you can have more granular, responses from your LMS. Right? So I like to use this analogy. You can think of MCP like a USB c cable. It's one standard connection for all your tools. Just like the USB c cable standardizes how you can connect different devices, your chargers, your, you know, USB c hub. MCP also standardizes how AI connects to capabilities. And with MCP, you don't need a custom API format for each tool. One protocol works for many integration, and we're going to see that in the workshop today. I would like to also share this MCP architecture. Essentially, what this is is how typically you would connect to an MCP. So there are three terminologies there that I would like to call out. The first one being the MCP host. What is this? So you can think of your MCP host as your, you know, AI assistance. For example, Claude is an MCP host or COSO if you are familiar with these applications. These are applications that you would possibly assess, to connect to your MCP server. This workshop is essentially showing you how to build and deploy an example MCP server. So you can think of an MCP server like, for example, Century. This is a remote MCP server or, file system. This is your local MCP server that you have on your machine so that you can ask, for example, Claude specific things about files on your system or even a database or API tools. Right? This is an example of an MCP server. And then the clients, an MCP client is basically embedded with your MCP host, and this allows you to connect to different MCP servers that would invoke tools that you've created so that you can then assess the connection that you have from your MCP server. So this is a high level explanation of essentially what MCP is. You have the MCPOs, the client, and the server. There are two types of MCP. First, we have the local MCP architecture, and then we have the remote one. If you probably have tried out MCP already, you'd know the difference. But first, with the local MCP architecture, this runs on your local machine. Right? And it's useful for personal tools. If you want to connect to, like, a local file system, you can also use a local, MCP architecture. Comparing this to a remote MCP, which I'll show you an architecture here, the difference is clear. With the remote MCP, this is hosted on a server, for example, on Cloudflare, and it's probably used to connect to external tools. For example, a travel API endpoints, you know, public APIs that you can connect to production deployments. You can do so much more with, a remote MCP. At Cloudflare, we have two different ways you can connect to a remote MCP. We have the oh, I think I missed something. I'm supposed to share my screen. But once I'm done with this slide, I I will show you, the two templates that we have. So we have the auth MCP server that you can use to get started, and we also have Otless. So what this basically means is with the Otless, MCP, you essentially don't have any authentication. You just connect to an m p MCP server directly. But with Otts, Cloudflare acts as the middle, you know, man connecting your MCP clients and the tools they are trying to connect to. So we have different authentication method that you can use. We have Google auths, GitHub auths, and so many other you can even bring your own auths like auth zero or other authentication services. So I hope this explains the difference between local MCP and remote MCP. But for this workshop, we're going to be focusing on remote MCP architecture. And I'll give it back to Tanmay to talk about what we'll be doing for this workshop. Alright. Thank you, Gift. Alright, folks. So, as I said in the beginning, we are going to run a poll to decide which use case we wanna build. We have three already in place that we have built and available on GitHub repo. So take a look at the poll nav on the right hand side. You will see a red dot. Please do participate, and let us know which use case you would like to see. We'll pick based on the one which, gets Max's vote, and, our gift is going to, you know, build in build that use case in front of you. If your use case is not picked, don't be upset. We already have these use cases ready in the GitHub repo. So there is link already there, weekly workshop repo you can go to and, take a look at all the three use cases that we have built, for this workshop. So let me just go and see which one is getting the max votes. And we'll pick up based on that. Okay. If you're not able to see the poll, can you do you see the poll now on the top right? Hey, Tim. I'm trying to speak as loud as possible. Can you hear me? Yeah. I think the pool is up. It's in the next tab after messages, or I don't know why it's not showing up on the screen. Yeah. It's right next to the messages. So we have more people voting for the meeting summarizer MCP. Okay. Equal votes now for the real time travel planner. So let's see what we end up with. Okay. So are we good gift on the one which is selected? Yeah. So we have the real time travel planner with 45, so I think we can go with that. Okay. Cool. Yep. I just have one more slide to share, before you go ahead and start the hands on gift. Mhmm. Can you let me just share my last slide. Yep. Okay. So, this one is the QR code. You can probably take a picture of this. I will also be displaying this by the end of the session, but, make sure you finish the hands on, the use case that we are building along with you. You know, make sure when gift is building, you should also be building and make sure you finish it. And once you're done, scan the QR code. It's a Google form, and you can submit your, your project. And we'll review your project. And based on that, we'll reward you with goodies. So, yeah, please do that. You can also go to bitly/mcpworkshop, which is the short URL for this job. So, yeah, that's it from my end. Gif, you can begin with the workshop. Thank you. Thank you, Tammy. Okay. So let's get started. Because this is going to be a live workshop, I would love for everyone to follow along as I go, but I can always imagine it's not totally possible. That's why the GitHub repo has everything that I'm going to be doing. So you can also follow through with that. If you want to find the link to the GitHub repo, it's on the docs tab here on on the platform. So you can also click that. So to get started, I'll sorry. I'll walk through a few instructions that I already set up for this workshop, and we'll get started with the MCP fundamentals. I already covered what MCP is and talked about the different tech technologies, so I'll skip that part. But for the MCP application we are building, we are building a real time travel plan now. And what is this? This is supposed to be a way for you to plan your trips. So we'll be connecting to, travel APIs that you can use to schedule flights and schedule hotels, and we would use this to test out how MCP or how you can build and deploy an MCP server. So I'm just going to skip and go over to the next slide, which is getting started. For everyone following with following through with this, we have some prerequisites. You will need to have a few things already installed on your machine to get started. So I have everything in the GitHub repo, so you can just click the links to make it easier for you. We'll be testing with Claude desktop app, but you can also use the Cloudflare AI playground as well to test your MCP. So moving on, I would skip over to because now I know the specific MCP server we are building. But if you want to check out the remaining ones, it's also on the the completed branch. So if you click on the GitHub repo, you can see a completed workshop branch. So you can also see and go through with them to see how they work. So we are going with the real time travel planner. So this is essentially an MCP server that you can use for flight searching, hotel booking, travel planning using Cloudflare workers, and some travel API tools. I would like to show you how it works before we get into building it. So I'll head over to Claude and kind of ask Claude to plan a trip for me. To make this easier, I already have here some prompts that I can go ahead to to ask. First, I would like to try to use the flight search tool that we'll create. So this is essentially a way for me to search for flights for my trip. Right? So if I enter that in code, I would get a response back that is going to help me search for flights from JFK, New York to London using the search flight tool. I already implemented and deployed this. So this is what we'll be building. Right? So what it does is it uses the flight API, in this case, aviation staff that I'm using to search for flights and then gets we get the response back. The same applies for the different tools that we have. I can go ahead and show you how you can see the tools. So I have here my travel planner. I will be building out eight tools. Hopefully, we are able to complete that during the workshop, but we have a tool to check flights, check hotel, book a trip, and so much more. So let's move on. I'll go back to the beginning of the read me. So this read me essentially is a step by step process that you can follow to build out this m p MCP server. So like I said, we have different tools. We have eight tools organizing four categories. The flight tools, will help you search for a flight and book it. The hotel tools will help you search for hotels and book it. We also have an integration with your Google Calendar to check if you have any conflict on your calendar during the time that you're building or booking your trip so that you would know, to reschedule or something. And then this part is optional, but you can also combine, planning for a trip. So booking a flight and hotel together using a single prompt. So let's get started. You would need the aviation stack API key. This is what I'm going to be using for the, flight API. I already have my API keys, But I know it's going to take a bit of time for you to, you know, sign up and get your API key. So you can already get started with that. We would also be using rapid API, for getting information about different hotels. This both APIs are free for you to use. At least the first one has a thousand requests per month, but it should be good for our use case. And finally, we will call for our calendar API. So I'll get started. The first thing I need to do is, yeah. Just one second. So this is a fresh project, and in each use case directory, we have the different MCP servers we'll build. So I'll see the into travel planner. And MPM install, which is going to be the first step. To make this easier for me, I'm just going to move this to my other screen so I can follow along with the reading. So I so after installing the project, I can open up the folder to show you. This is essentially using the Cloudflare MTP auth templates. I spoke about this earlier where I said that Cloudflare offers you two different templates for you to build your MTP server with. One without authentication. This one, you don't need any, login required, and then one with authentication. With this one, you can integrate Google auth, for example, which is what I'm doing here, auth zero or GitHub auth, whatever, authentication you want to use. And I already went ahead to set up the project. So it's already set up. You just need to follow along with the instructions in the repo. This right now, if I run npm run dev, basically has if I go to the index dot c s, file, has a simple add two. So I can run this locally by using, the MCP context protocol inspector. So, if I open a new terminal here and run MPX at module context protocol just to test out what an example tool would look like. I can then go ahead and change the URL here. So the URL of the app that I'm running currently is locals eight seven eight eight. And for every time that you're using a remote MCP, you have different protocol that you can use. In this case, I'm using SSC, and I need to also pass that to my URL and click on connect. So this is what I mentioned earlier. Because we are using Google OAuth, it's going to prompt me to authenticate, my user. Right? So I'll approve this and, yeah, we're running into interesting. I think the reason is because right now, I in the Google dashboard, I only use my deployed URI for the auth callback. So that's why this is failing. We're going to skip this because of time. But if you want to fix this, I can show you how to do that. In your Google Console, right here where you have the auth ID, I just need to pass in the local host callback here, which I currently only have for the deployed version. So for this demo, I will first of all deploy before I test out this application so it's easy for me to walk through. So let's, maybe close this out and move on. Well, what I was going to show you is this simple this is a server tool. This basically just adds two numbers and gives you the results in your MCP client. Now we're going to follow continue following up with the instructions in the reading. So the next thing I want to do now is to create my dot dev device file, which currently I already have here. You can see my API key, which is fine. I'm going to deactivate it after this demo. But what you need to do is after creating the aviation stack API key, you need to copy, the example one that I have here and paste the API key you get from a vision stack and rapid API. And, also, when you go ahead with your Google or all the instructions is in the readme. When you create a an app on Google Cloud Console, you need to get the client ID, client secrets, and, add that in here too. I already have this, so I'll move ahead with the the steps. And one extra thing I need to do because for every time I authenticate, I'm saving the access token in k v storage. So, essentially, I would need to then create a k v namespace for this so that whenever I try to authenticate the talking is stored on kv. So for this, I would run I'll run the command I have here, which is wrangler kv namespace I'll pass in demo here because I already run all of this before, so I don't want to create a duplicate kv storage. So what I'll get back is a kv binding and an ID. I can go ahead and copy the ID and put that in my wrangler dot JSON file. So, essentially, the wrangler dot json file is where you set up all the configuration needed for your wrangler for your Cloudflare workers. Right here, if you open it up because I'm already using an existing template, it already sets up, durable objects, which is what we're using to connect to the MCP, and we already have the caving in space here. So I'll change this over to demo, and add my key. If you're following along, you don't need to do the demo part. I'm only doing this because on my account, I already have this set up. So I'm just creating a duplicate version, but you can follow through with the readme instructions, and that should be fine. Okay. So the next step now is I'll go over to my index dot c s file and update this with the actual, information that I want for my MCP too. So the first thing we have in this file is an export class my MCP. This is essentially how you start up your MCP server. You need to specify a name and a version. Typically, you can leave the version as zero point zero or for every time you deploy your app, you can change the version. I will go ahead and copy what I have in the readme over here and walk you through what I copied. So what we currently have here is I've changed the name over to travel planner MCP, and then I've created a register all twos, function. I can do my tools like registration in this file, but because I have a few tools and I don't want to, make this file too long, I have abstracted this over to a register all twos, directory. So I'll show you how that would work. And then for the other bits here, the export defaults new OAuth provider. So because we're using Google OAuth, under underneath, this is using a Cloudflare OAuth library that helps you to connect to any authentication, points on server you're using. So in this case, I'm using Google handler. Later, you can go through the Google handler, to understand how this is set up and workers' auth details is this is already, set up with the template. So depending on the auth version you choose, maybe for GitHub or Auth0, this will be different. But, yeah, we're using Google for this. So the next step is I will go and create my tools directory. So this is where I'll be defining every single tool that I would want for my MCP. For example, I showed earlier that we have a flight tool. We have hotel tools and and so so on and so forth. So in this directory, I'm going to be creating the different tools that we need so that then when I call the register all tools, this is already set up to register all the tools for my MCT server. So I'll create tools and then create an index dot g c s file in that directory. And in here, I would register all the tools by specifying which ones I have registered. So I have flight tools, hotel tools, calendar tools, and travel plan tools. I haven't created this yet, and that's why you're seeing these quickie lines, but we'll build up on the workshop as we move on. So, obviously, the next step here will be for me to create each of these two files so that I can then start implementing the tools. So I'll go ahead and do that. Let's see. New file flight dot c s. This is going to be easier if I can tell because I'm using Windsoft, but I don't want to have to go back and forth with the cascade tool. So we have the flight dot c s already added. I'll just go ahead and create everything. The second tool that we'll be creating is hotel dot c s. I hope everybody is following along. If you have anything on your stock, you can always ask questions, and, we'll help you in the chat. So creating the next two, which is the hoteltwo, and I have the book.cs. Actually, I called it travel plan. Yeah. And finally, I'll create the calendar too. Calendar.cs. So now that I have all of that set up, for the first one, we'll use we'll copy over the flights too, and then I'll walk you through what that code is doing. So right here, I've abstracted the two calls to this tools directory so that for every tool that I create, I can have it leave, like, separately. So it's not all in the index dot c s file. Oh, yeah. We have, also abstracted, the functionality of the tools to to a service directory which will create in bits. Essentially, what this does is you need to add a name for your tool, which I'm doing here, search flights. You also need to add a description. This is important and one of the best practices when you're building, an MCP two. You need to add add a very descriptive, description. This is because when you're calling the two in, for example, Cloudflare, you need to give it a bit of context to what that is doing. So that's why I added description there. So essentially, this will help me search for flights between airports with the dates, passenger, and class preferences. And then we're using Zord. So Zord is like a schema you can use within your project to, add validations for each of the items that I have, in my tool. So I'm checking the origin. I need the destination and a few other, things that I've added there. And then the async function here is where I'm then passing, over all the params that I have for my flights to the flight service. We haven't created this yet, so that's why you see some typescript errors. But this essentially would then pass everything that I'm going to tell my NCP clients. So for example, I want my NCP clients to build or to book a flight for me from Amsterdam to London. So I need to pass in all these details, and then it should call the API and return, the flight details. So that's basically what this file is doing. The second tool I have here is the book flight two. For this specific, tool, I have, gone ahead to mock the response that will be returned. The reason why I'm doing is doing this is because when you want to book a flight, in this case, for this workshop demo, I would need to have partner API keys with some flight booking, APIs, which currently takes, like, obviously, longer time. I'll need to go through some verification process, and I'm not, going to do that or have everybody do that during the workshop. So that's why I mocked the response. So, basically, whatever response I get from the API, I'm going to, like, act as if I actually went ahead to book the flights. So we have the book flight two. It asks for your personal details, your passports, nationality, and a few other things, and then returns a response that the flight is booked. Right? As if you were actually connected to an actual, flight or flight booking service, you can just go ahead. In in this case, if you're going to use this in production, replace what I have here with an actual call to an API. Right? So let's move on. I would go to the next step, which is to create my hotel dot c s file. So I already created that. So I'll go ahead and paste the tools that I have. It's pretty similar to what I have in the flight tool. So I have search hotels, as well. This connects to the hotel API that I'm using and then I'm returning the response. And I have book hotel. I have the name of the two, the description, and then I am also mocking these parts as well because in order for me to connect to booking.com to book the actual hotel, I'll need a partner API key. So this workshop is basically to show you the possibilities of an MCP server. But, obviously, if you want this to be in production, you have to go ahead and use the actual API case for these parts. Okay. Moving on, we have the next two, which is the calendar.c s two. So I'll copy that over here. Basically, this is what connects to Google Calendar to check if I have any conflicts on my calendar. Right? So because I'm using the Google templates from, the Cloudflare MCP, this kind of already lets me connect to the Google Calendar API. For my use case, I have done two things. First, I'm connecting to the Google Calendar API, but I'm also creating a fallback just in case, the calendar service doesn't work. I added a fallback to just return an example conflict implementation, which I'll show you in a bit in the services. So the two the last one is the travel plan two. I will copy that over here as well. And we have, I think, three tools in this file. The first one is going to create a travel plan. Say if you're planning your summer vacation and you want to go to Greece, you can just tell it's the the location, the date, and normal of travelers, and the budget, and then it goes ahead to plan the trip, book the hotel, and do everything for you. Right? So let's move on to the next part, which is now to create the services directory. The services directory is basically where all the actual calls to the actual calls to the API leaves. So I'll create a new folder called services, and then I have to create individual files here for each tool. So the first first one will be flightservice.cs. We would also add calendarservice.cs. Let me just ensure that I'm checking the chats. Okay. Good. We also have, if I just check here, hotelservice.cs and finally travelplantravelplanservice.cs. Okay. Now, over going over to the readme, I would first copy the flight service and explain the code to you. So like I said, the service directory is abstracting the calls to the actual APIs that we're using. Right? So in this case, for the flight service, we're connecting to the aviation stack API. If you haven't, gotten your API key, you can follow along. And then towards the end, get your API key and add it to the dev dot vase before we deploy so that's, that's not taking too much of your time. Right? So the services that I have here, I have the search flight service. So this is what connects me to the API for searching flights so that then I return the response. And I'm just transforming the flight's data because the data that I get from the API is a bit chunky. So I'm transforming it to how I want to display it in my, MCP clients. And we have a few other functions that I've added here, calculates the duration, estimate the price, and I've also marked some flights here as well just in case the API is out and probably not connecting, then at least we get something back, when we query the MCP server. And then I have get flight status as well. So this is essentially all the functionality for the flight service. I'll go ahead and copy the next one, which is, hotelservice.cs. It's quite similar to what I just explained. It connects to the hotel API. And then I am using for the hotel API, for the rapid API, rapid API is like a place where you can get different API. Some are free, some are paid. So I'm using the hotel.com API, and then the endpoints I'm using is hotels slash search. So this will search for hotels and return a few details. So I've gone ahead to also transform the data so it fits to, what I want. And then I'm mocking the hotels, just so that in case the API doesn't work, we get something back at least. Finally, we have travel plan. So we have the calendar service. So I'll copy that over as well. And this is what connects to Google Calendar, and checks if we have conflicts in our calendar. If we do, it will let us know and probably ask us to choose another date for our trip or, yeah, actually tell you that you don't have any conflicts. Right? And then finally, we have the travel plan service. So I would copy this over as well. And, yeah, I think that's all for this. In this travel plan, like I mentioned earlier, most of it is being marked just because this is like a demo application. But if you want to actually have real data coming back, you would need to apply for, like, the booking partner API, which, I have commented out, like, where you would, replace it if you were going to deploy this application. So now we see a lot of reds in my application. Let's go ahead and fix that. This is simply because I I haven't added all the necessary tools yet or necessary files yet. So the next thing I need to do is to add a type definition. So this will fix a lot of the errors we're getting. In my source directory, I'll create a folder called types. And in there, add index c s and copy over the types. So this is types for all the tools that I I have created. So at least we'll get, a lot of the errors that we're getting fixed. One more thing I want to do is because I added the API keys to my the dev diverse, I want Wrangler to have an idea of it. So I'm going to run npm run c f type chain. So this is going to generate the types that I have in my the dev diverse, file. So now that we have that, let's move on to the next the next step, which is to deploy this application. Right? You can actually try to run this locally using the MCP protocol tool, like, inspector tool that I shared earlier, but you have to go through, connecting locally first on Google or OAuth's, console, which I showed you earlier that I haven't done. So in order to skip a lot of that, I'm just going to go ahead and deploy this. So npm run deploy. Yeah. I actually need to do one more thing. I already have this deployed, so I'll just change the name so it deploys in deploys a new app. Because I already have travel planner deployed. So I think to do that, I can specify here demo and then run npm run deploy. Okay. So we still have a few errors, and, this is type errors. So I I need to maybe check them to see let's see. The Bluetooth service. Okay. I I I I need this booking service, so I need to fix that. Let me run the CS check type check so that I'm sure that there are no errors. Okay. We have one last error. Import register calendar tools from calendar. Cannot find module calendar. Yeah. Could we spell sterile soldiers? This is the part that you you will have to, you know you can actually avoid when you're doing live demos. You have to run into a few a few blockers, and let's try that one more time and hope it's fixed. Okay. Yeah. So that's fixed. Now I can deploy this npm run deploy. So this should deploy my worker to a, specific domain because I've changed my name, travel planner demo. And with this URL now, I can use this to connect to my MCP client of choice. In my case, I'm going to be using Cloudflare. So I'll go ahead and copy the deployed version of this. And then in Cloudflare, if you've not used Cloudflare to connect to an MCP server previously, the the steps to do that is you go to Cloudflare, check settings, and under developer, you have this config file that you would have to edit. As you can see here, I already have a few MCP servers that I've connected to Claude. So I'll edit the config to add my new MCP server, and we should be ready to test it out. So, yeah, let me just copy this over because it's basically the same thing except the name. Yeah. And in order for you to trigger your new MCP server that you have added to Claude, you need to actually restart it. So restart Claude so you can see the two show up. Okay. So if I go on to check, we have an error, and I think I know why that is. I missed one extra step. I did not upload the the secret, so the the death of us is running locally, but I need to also have a version of that deployed to my workers. So I'm going to run this command to do that. Wrangler secret bulk dot depth of us so that this would add all my where where we have this, this will add all my API keys to my deployed worker. And I would actually can try using the AI Playground to test it out to see if this works. So we have travel planner demo as our deployed worker. And if I click connect, I need to do one extra thing. Yeah. I need to add the authorized redirect URLs for my new deployed version. So I'll do that as well. Oops. Didn't move my URL. Okay. I'll just copy this over. I'll call this demo. We did the same here. Because because we're using, because we're using the Google OAuth, we have to go through the authentication step. For the other MCPs, you don't have any login or authentication required. So it's pretty straightforward if you're connecting it. So let's try one more time. So I will do travel planner demo connect. Just refresh this. Still the same issue. Okay. I'm going to log in to my, CallFire dashboard to see my deployed, worker just so that I can see because I have observability turned on, I can check the logs and see the errors that I'm getting. Interesting. So this has to do with the Google auth authorization server that we have set up. It's not letting me authorize with the Google with Google. Interesting. What do we do? What do we do? I'll try one last time with Claude. If it doesn't work, I would I think in the in the readme, I have a few troubleshooting guides. So I'll go through that. If we're not able to fix it, then I'll I'll probably do this fix it offline, update the repo with the correct code just so that we don't spend too much time, debugging on the live, workshop. But I would also go back to the actual, travel planner demo that I have deployed. At least I know this states this one is working and compare and see where the problem is. So let's try with Claude one last time. So I go to settings and developer. So I'll confirm that this is actually my URL. So we have Channel panel demo, and then I'll restart cloud. No. We still have let me check the logs and see what the issue is. So you can see the logs for your MCP server, and this is the one that I have here. I know it has to do with the Google OAuth thing. Okay. Yeah. Yeah. This is yeah. It's sad. So I would fall back to my deployed version so that I can actually show you what this does, and then offline, we'll try to fix this, issue. Or I'll just go through my code again and see. Probably, I'm missing something that I did not add in the reading to make this work. Well, as I understand, everybody's following along, so it's not it's not ideal if you have issues as as well as I I have right now. Let me see the chat. Yeah. The universe doesn't cooperate. We it operates when you're doing live demos. So let's try out my travel MCP server that I already deployed before the workshop so you can actually see it in action. So I have I have the travel planner connected. And as you can see here, it has all the tools that I have created. Right? So I'm gonna give it a prompt to let's see, can you book a flight for me from, Amsterdam to New York for September. So this should trigger first the search flight two and then follow-up with the book flights, book flight two. So first, we have the search flight two. You can see it already passed in based on the prompts that I gave it. It already passed in the two the details of the flights that I would like to book, and then I get a response back. So it found two direct flights from Amsterdam to New York, and we have the details yet here. So if I would like to proceed with the booking, I'll need to provide it, information. For example, my name, date of birth, and so on. So I'll see, yes, book the flight, but with a generic user information. For the book flight portion, you probably see that, like I mentioned in the quote, that I marked these parts because I am not connecting directly to, for example, an actual flight booking like, I don't know, booking.com because you would need to have access to their partner API. But, yeah, we get a response back that the flight has been booked successfully with information about the flights, and a confirmation email has been sent. And this has been added to your calendar. This would work if this was actually, an actual email. Right? And the calendar the calendar conflicts too, we can also test that out. Can you see if I think I have a prompt for this. Can you check if I have conflicts for I mean, I don't actually have any conflicts for this specific trip, but let's see the results. So it found a potential conflict with the December 15 trip, and this response that I'm getting back is based off of the mock data that I added as a fallback, to to the calendar service, calendar service endpoints that we have in our code. So, yeah, ideally, for the workshop to, you you know, go as expected, your demo would work, and then you'd see it. But I'm glad that I have prepared, like, a fallback for each of the the service that I'm trying now just so that if connections to the API is not working, at least we'll get a response back, which I have done for a few of them. But, yeah, this is ideally the steps you would take if you're building an MCP server or Cloudflare for this specific use case that we selected for this repo. We are using Google OAuth, and I feel like that's where currently have the blocker with my deployed version. But no worries. I would you know, outside of this, it's working in incognito mode. Interesting. Oh, that's for something different. Okay. Yeah. That's pretty much what I wanted to share with the workshop. I would go ahead and check the chat to see to see what people are saying. So everyone has issues with Google or it's not the best for demos. I know, but, yeah, that's one of the use cases we have planned. If it helps, I can also show you just quickly quickly quickly show you an example, that doesn't actually use Google Ads, and you'd see here. Just go to my repo. So I have use cases. I have two other examples that I've built that doesn't use Google Ads. One is the meeting summary and restaurant reservation. So we can actually try out the restaurant reservation one and see how it works. Obviously, I won't build it out, here, but I would please, ask that you look at the code in the repo just so you see how that would also work. For the restaurant reservation server, I'm using Yelp, and I have access to an API key and clients. So I can test it out so you see in Claude. Right? This I already have here, restaurant's reservation. It has six tools. So I can search for restaurants. I can check the availability, make reservations, and so on and so forth. So let's actually try to do that. And then later, you can go on and see how I or I can actually show you high level how this works, but it's very similar to what we just built. So I'm saying find Italian restaurants in downtown. Well, I'll change this. I'm based in Amsterdam, so I'll change this to Amsterdam with at least four stars. And let's see what that returns. So this is going to trigger the search restaurant too that I've created. And we okay. We can see this is working. So it found 17 Italian restaurants in Amsterdam with four star ratings, and it's asking if I would like to get more information about Yes. So I'll say yes. I need more information about one of the restaurants. So I'll go with Bossier. So this is going to trigger another tool that I've created, gets restaurant details, basically calling the API endpoints from Yelp that returns information about the restaurant. So, what we have here is the description, the reviews, how expensive it is, if it's, a luxury restaurant or not, the location, and so on. I can then try to make a reservation. So, yes, help me make a reservation for tomorrow at 6PM. Yes. So some of the the expected params for this tool is that I need to know how many people are coming. So two people and then the details. So I would ask you to use generic contact information because so now it's using a different tool to check if there is, booking for availability for that date, and then it goes ahead to make make the reservation. So for the make reservation too, if I go back to the code here, I make reservation. Okay. This is well, this is in the completed repo completed workshop, branch. So choose reservation. Yeah. So for this part, I marked the response that I get back when I make a reservation just so that I don't actually make an actual reservation to this restaurant. But to replace this, the same applies. You just use the actual API to make a reservation. And for this, you have different APIs that you can use. Right? Resi is one, but these APIs, you need to have partner access to use them. So that's why I'm mocking most of the response. But the restaurant reservation follows very similar, layouts like we have in the travel planner. The only difference is we're not using authentication here. So that's why you see I didn't get any prompts to log in, and I'm getting response back. So, yeah, the travel plan I've got working on the Cloudflare program is not working there either. I didn't try or code. Yeah. Yeah. I think the the problem is with the Google Ads part. If we can maybe fix that part, I'm sure you would have access to the to the, yeah, to the main tools in the MCP. Yeah. Interesting chats in the comments. But, yeah, this is what I wanted to show, during this. The goal is to have something working for the workshop. Well, I'm sad that we're not able to get the Google part working. But at least I showed you, like, the different ways that you can build, MCP servers on Cloudflare. You can take the base idea that I've shared in this workshop and, you know, run with it. If you have any idea, to build an MCP server with probably a tool that you already use that has an open API, you can use the auth templates, auth list templates in this case. Well, it depends on what you're building. So the reason that I'm using we have two templates. The reason why I'm using the auth template for the travel planner is because I want to connect to my Google Calendar. For that, I kind of need to have, like, the Google OAuth, connected. But, also, if you have if you have an idea for an MCP server that you don't just want to be publicly accessible, so you want to put, like, a layer of authentication in there, you can choose between different MCP, auth stats provider that we currently have. I know I showed you the Google one, which sadly did not work, but we have other examples that you can check out in the docs as well. In the docs portion of this platform, you see a few links. So a link to the docs link to a GitHub repo that basically shows you the different MCP servers that we have on Cloudflare. So I can quickly show you that. I'm using the wrong link. So this is the link. So we have built wrong link again. One second. I will get this right. Yes. This is the link that I'm looking for. Okay. Yeah. So we currently have over 13 plus MCP servers on the Cloudflare platform itself. For example, the documentation server, this lets you add the Cloudflare doc server to your MCP client of choice. And, for example, as we're building out this, if you don't understand a specific concept about something in the docs, you can actually just ask, like, prompt your you know, MCP clients, and it will fetch the data and information from our docs. So we have different, MCP servers that are built out for different, Cloudflare products. So, yeah, I'm going to hand it over to or have Tanvi join me so we can just talk briefly about what's going on in chat. Even if there are any questions, we can then answer them during this session. Yeah. Oh, it works? Okay. I'm I'm happy to hear that. Great. Thank you, Gift. If you can also share the link of the MCP servers that you are displaying right now, this link in the chat for folks who just go to Yeah. It's in the chat. So if you go to docs, I think it's the second to the last one, the GitHub Cloudflare open source. Yeah. Okay. Cool. Yeah. Do you wanna take a look at all the chat messages just once? Yeah. We also have the q and a, tab, which I am checking now. Sure. Yeah. Okay. AJ, thank you so much. AJ has done a good job and tell me of answering some of the questions for let me see. I'm more than happy to take questions. So if you have any questions about what we spoke about, you can what's in the types dot c s file? So those are, like, types that you because I'm using TypeScript, I specified for my application. So in the types dot c s file is where you define or have types definition for the different, things that I'm using in my app. So for the environment variables for the tools, I'm typing everything so that, yeah, I don't have, type errors when I deploy. But, yeah, that's answering your question. Okay. I should demo the meeting summary. Do we have time for that? Yes. Go ahead. Okay. So let's look at that, the meeting summary MCP. Okay. New chat. So, essentially, what this does is the idea is to let's say you join a meeting and right now, AI can do, like, a summary doc with Google Meet, and you have that document, but you also want to add, tags to your project management tool of choice, in this case, Jira. So the idea is to upload a Google Doc, and it would use AI to summarize it, but also check for the key items or the things in that document that you need to follow-up on. So you need to create tags on, and then it's going to connect to Jira to create the tags on Jira. So let's see how it works. Because I was last minute having the same Google problem, I switched from using Google Docs to just using a local, documents in my, computer. So I would demo it now. I think I have a prompt. I have a doc here. So I'll upload the doc file and see, can you summarize this stock and also create tickets for the action items? So let's see. So it's using the first tool that I've defined, which is summarize doc. This is using workers AI, specifically the llama model to summarize because it's a huge huge document with a lot of content. So it's going to first summarize it before then checking if there are any key, or follow-up items from the documents. So let's see. It's taking a bit of time. Okay. So that worked. So we have a shorter summary here of the actual document. So the next thing it's doing is going to check my Jira. I'll show you the code board. I connected to Jira, and I have a Jira board for this specific project. So it's first checking if I actually have a Jira project which it which it found, and then it's checking my issue type so that it can specify the issue that it will assign to the task that it will create. So these are all different MCP tools. And one thing that I find interesting is it doesn't wait to like, with the model that I'm using, Cloudsonnet for, it's really smart to know the next step in the process. It doesn't ask me or prompt me to, you know, give it more information. It just goes on with the the the next tool that I have in this MCP server that it knows will do the job for me. So, yeah, it uses the create Jira tags from docs too. So it's, oh, no. I'm having I'm having some errors with Jira. Let me see. Okay. It worked. So the Jira task was created. And if I go to my Jira boards, I will check if we actually have something there. It should actually give me the actual URL. So let me wait for it to complete. So because the the doc that I added has a lot of items, it's going through, like, each of them to create the the tax or the tickets for it. So I'll wait for it to finish, and then it will give me a link that I can then open to see it in action. Yeah. It's not really possible to flip no odds and odds like you're asking because there are two different templates, that I've used. Right? Of course, you can, go back and remove the bits of the auth that is not required. But, usually, when you're building an MCP server that has auth, it's recommended to use the auth templates because that already has, the auth library setup, which if you want to change that, you have to uninstall and do a bit of work. So, specifically for this MCP server that I built, I built it out with Google Docs at first. But Google, Docs API had something where if I needed to turn on the scope to access my Google Doc, I need to have my app verified, which, obviously, I couldn't get done in, like, because this was yesterday. So I swapped it over to just use a local document. So what I did was I deleted the the application because it was already using the Google auth templates, and I created a new one with the auth list templates. And, yeah, hope that answers your question. So I think we have all our tickets created. It's not giving me the link, so I'll just go to my Jira and show you that too. So I have this, and I have, like, a few items here. Let me see if I can show it in a different timeline. From here, one this is one of the tasks that he created. Right? He created 10 standard action items from the doc and basically collected well, this is not formatted properly. Well, We'll basically collect them, like, the summary of what that topic is about and, the the people involved and other things that, you know, is required from that part. And because I have, like, a lot of things going on in that document, you can see it went ahead to create tickets for each of them. And, let me quickly show you how the code works, and then we can wrap up this session. So for the meeting summary MCP server, I'm using the auth less templates for this. So there's no auth required. But, obviously, I'm connecting to the only API I'm using here is Jira. So I have here, Jira based URL email on API token that I got from my Jira accounts. And if I go to source, the base index file, this is where I register all my tools. And in the tools directory, I can see each tool that I have. So I have the local file too. This is what gets, like, transforms the documents that I upload and summarize it so that I get, like, a shorter, response back. I also have something to validate the document content, which I didn't really show, but this is also a different tool we have. For the Jira tools, we have the first tool that I have here is to create Jira tags from doc, which you saw in action. And what this does is basically connects to the Jira, take the summarized portion of the the the documents that I have and connect it to Jira to create the tickets. Right? And I have something to also list all the issue types that I have in my Jira. And then the services is where I'm implementing most of the functionality. So for the summarized service right here, I'm basically taking whatever is in my documents, passing it to workers.ai. And then I created a fallback, right, just so that if workers.ai is not working, you can just summarize it using a few functions that I've added. But then, I think he used Cloudflare Worker's AI for that part. And here, I'm using the AI, the AI dot run method to call the meta well, this is an older version of the meta model, but this is what then takes my documents and summarizes it and then passes to Jira and so on. So, yeah, that's basically the meeting summary MCP. You can still go through by trying them out yourself because everything as it is in the readme of each in the readme of each, MCP server, there's a step by step process of how you can do this out so you can do that in your free time. Yeah. Okay. I think I'm done, Tommy. Let's I'm just checking the chat to see if we have any questions I can address. Yeah. I can see one or two more open questions in the q and a. Garrett, if you can just take a look. Q and a. Okay. Let me see. Is that supposed to use the already deployed? How do I share this? Let me see. Yeah. Is there support to use the already deployed MCP on GitHub devices? Okay. Yeah. So to address this, I mentioned earlier in the presentation remote versus local MCP server. Right? How can I make you to build remote server, which in this case uses either the, SSC protocol or I think there's a different newer version of that that you can use? Right? It's basically here in my let me see. If you're thinking of using the I'm not sure how to pronounce it, but studio s t yeah. S studio, then that would mean that you're actually building a local MCP server. Right? So that's the protocol for that. So in this case, you would not use the the Cloudflare the Cloudflare MCP templates that we have here because it's specifically for building remote MCP servers. Let me see if there's any other question. What's the cost evolving deploying MCP servers? Okay. That's already answered. I think most questions that I see here has been answered, and that's great. Okay. I have a slide that I wanna share if if I can if you allow me to share my screen. Yeah. Sure. Okay. Let me share this one. Okay. So what you see on screen is the QR code that I was talking about along with the link. Make sure you submit your project. You are finished use case by the end of the day, to win exciting Cloudflare goodies. We're gonna review your submissions and reach out to you. Top three submissions, will get a reward. So we're gonna announce that very soon. Make sure you do it by the end of the day, and that bring bring us, to the end of the, session today, the workshop. Thank you so much for joining. I can already see some great comments in the, chat and messages. Thank you so much. We're glad happy to, instantly see the feedback. We make sure that next time we come, we'll, you know, make, we'll bring more exciting use cases, exciting workshop, topics for you to attend. Don't forget to submit your project, as I said, to win exciting Cloudflare goodies. The link is already in the chat. And if you have questions in future, you can also post it in the forum. You can go to community.cloudfly.com. You can even go to, discord.cloudfly.com. We have two different platforms where you can post your questions and get answers from the experts. And, yeah, until next time, take care. Happy building, and thank you for attending today. Bye bye. Thank you so much. Yeah.