Inside Maestro: How to use MCP as a separation of concerns layer

Speaker 0: Ready? Yep. Speaker 1: Okay. Hello, everyone. So my name is Ady. I flew from The US a couple weeks ago or 3 weeks ago, whenever the last 1 was, and I got to meet a few of you. Oh. Speaker 1: So we can Yeah. Yeah. I thought that. TTS. Speaker 0: 1, 2, 3. Speaker 1: Okay. Is it better everybody can hear me? Speaker 0: Yes. Speaker 1: Okay. Hello. My name is Ady. I flew in in The from The US a few weeks ago just to come and be a part of AI Tinkerers Dubai, last AI, and I was part of the AI fair, which was amazing. Met a lot of good people. Speaker 1: And then today, I'm presenting, like, on the main stage. So I encourage everybody to do the Date, and, kudos to Prism. This is, like, PII, personal and identifiable information. It's a sensitive topic. And if it doesn't have any place on the chat, it should not be sent, like, up to the cloud. Speaker 1: So I respect what you guys are doing. And I learned a lot today, like, with, like, chain of draft. So, I've been doing this for 25 years. You know, I'm gonna show my age, and today AI learned, like, 2 or 3 new things. So I highly encourage that you never stop learning. Speaker 1: You never stop at the end of the day. So what I'm gonna get you into is my crazy word at the end of the day. I use a lot of AI Science, not AI coding, AI assisted coding. And while I'm doing that, you know, and who else is doing AI, thinking coding? All of Google code right now that is being written, 75% is written by AI. Speaker 1: So we're gonna go from being developers to being orchestrators. That still Scene we need to know what the AI is doing, but we're not gonna be able, like, writing 1 line of code, like, you know, author the other. We're gonna direct it. Like an orchestrator, you have to know all the instrument MoE you can, like, listen to the music and make sure it's right. So while I'm doing that, 1 of the tools that I use Pandini build this for myself is, like, a way to capture a screenshot, put it, like, you know, inside of Claude Jun Day, Claude, can you, like, recreate this design or something like that? Speaker 1: But when I do that, usually those screenshots on a Mac, they are, like, you know, 63 megabytes or anything like that. So imagine author TTS megabyte being converted into a base 64 inside of, like, your context that you're trying to protect. That is Jun, like, crazy. That is just crazy. MoE, imagine going from 63 megabytes to 425 kilobytes prevent less if you wanted to. Speaker 1: So if anybody wants to test this particular project man, I'm getting so Folder. I need now glasses. You can all go Speaker 0: to Speaker 1: where is it? I had it OpenAI somewhere. I swear to Ngom. APIS Zoom Yeah. Right here. Speaker 1: So if you are good, if you Ngom in there, you can have the project open. It's, it's done on web based API, the web canvas. You don't have to download anything. Everything stays local to you. Okay? Speaker 1: So how is it being used? So it is this is a show, not Excel, AI of Science. So let's show how it is done. This Zoom Chrome is right on top of my main. Get out of here, man. Speaker 1: CSK, can you come help me get this thing out? I think this is good for the youngsters to take care of. I have no idea how to get rid of it. Speaker 0: Can I hide it? Speaker 1: Hide showing meeting controls. Yes. I can hide it. Speaker 0: AI fear. Speaker 1: Okay. It was just on top of my navigation. I'm like, I cannot see anything, man. What are you doing? Anyways, MoE, let me come here 1st. Speaker 1: Where is it? Inside my so there you go. Speaker 0: So Speaker 1: we're gonna be everybody can see APIS pretty nice. Okay. So MCP is the same. Pandini doesn't know about avatars. It doesn't have to know. Speaker 1: Avatars don't know about locales. Who here knows, like, about the concept of separation of concerns? Separations of concerns. Day? So separation of concerns, basically, for people AI I'm I'm I'm a user interface designer 1st and foremost. Speaker 1: In our use case, we use the MVC AI, you know, pattern. Like, you have Model. They only deal about data. The view only Live only only lead about, like, how to display the Run, and the controller is the bridge between the model and the view. But whenever you are doing model code, you only do data code in shared. Speaker 1: So you Claude separate those concerns. Okay? So what we're trying to do here, I have a project that is called, like, Maestro Avatar generator, which create this, like, life-sized, lifelike characters. But be when we are building TTS project, when we are building this avatar, we have to create the Avatar, give it a name, give it, like, you know, a character, give it, AI, just like a cartoon or a film like character. You know? Speaker 1: In order to do that, the 1st layer that I have is the Avatar, like, generator right here. All of these people you are seeing are, like, you know, actual avatars. And the other thing that I use is how what how do they speak? Do they speak English? Do they speak French? Speaker 1: Do they speak Arabic? And that's another package. So I'm separating the different concern in okay. This is where I have the wardrobe. That's my package for just the wardrobe. Speaker 1: What does it look like? What does it sound like? And then I have another package about how does it speak Arabic? How does it speak AI French? So those are very clearly separated. Speaker 1: So coming back to here, we're doing that for Pandini itself. What we do, and I'm gonna go very fast, like, for the sake of AI, you know, my screenshot was poisoning my agent context because they were too big. So what I did with Pandini is I have a browser only compressor, 60 megabytes in, 400 kilobytes out. Okay? 0 Institute, 0 API Claude, 0 server. Speaker 1: And you can test it right now if you have used that thing. You can take any of your screenshot and drop it in there, and you soon you're gonna see it doing it live. And it's for you to keep. The AI Tinkerers community is the 1st 1 to have City. So, you know, that's what you get from coming to this type of, meetups. Speaker 1: So the code Shaun. How many of you knows about the browser APIs in general? Yeah. So any web developer here, you have probably, like, run into what we call the browser APIs. And 1 of my most favorite, like, you know, City that I highly recommend everybody who's doing web development and browser, API, anything related to the browser-API-only. Speaker 1: You know? Bookmark it today. Look at the example. Try to use them. And 1 of the thing we are using is the Canvas like, API to do some of this stuff. Speaker 1: Okay? So that's a good resource to have. Alright? So we are using the Canvas API here, and, basically, the whole compression is coming up here. We are, like, catching, like, the element. Speaker 1: Everybody can see that, or should I blow it up a little more? Good? We good? Maybe a little more? Well, it doesn't go any more than that because this is a a good slide. Speaker 1: Okay. So you have, like, you're getting, like, the elements, Canvas. So you're creating a new eliminate. We're assigning it a width and a height. And with the Canvas now, we can take the file that you have uploaded Jun then put it on the Canvas and do all the work that we need to do. Speaker 1: Okay? So you Scene, I'm gonna go through the code real quick. Find me in the science fair if you wanna go, like, in detail. And this is where the the the downscaling is happening, basically, because we take, like, the input as a blob, basically, and then the output becomes which here is 10.8 megabyte. Okay? Speaker 1: And before I do that, let me cancel this. Go back to my download folder. Okay. So leave me alone. Get out of here. Speaker 1: Alright. So let me go to my download folder. Community, download folder. And this small 1, I'm gonna just move it to trash. We're gonna do a brand new 1. Speaker 1: Okay? So let's go back here, and let's grab this 1. MoE, everybody, you see that it's Date 10.8 megabytes. Okay? Let me open it. Speaker 1: And it's asking me, Day. It's Date 10.8 megabyte. Do you wanna make it smaller? You know? What is the quality ceiling? Speaker 1: I could cancel APIS, and here AI can go, like, 10 times smaller, 48 dependency. You know? But let's have the 10 that that's where that number is coming from MoE you guys have a reference. I can make it a JPEG. I can make it PNG, web p, or auto. Speaker 1: You know? And then here, I can Post, like, the width and the height that I want. But let's say I'm just gonna go with the default, and I'm gonna go with, NBA 2026. Entry AI, 10.8 megabytes. Let's open it handle then start the reduction. Speaker 1: And you will see live here, it will go ahead and say 10.3 now became 9 77.8 kilobyte. You know? So it's AI 8 times smaller. So it's trying every single time not to lose the quality. So it's done. Speaker 1: We can download it, save it, and then open it. And when we open it, what is very cool is it's gonna be very hard to the human AI, at least, to see the difference. And to the LLM, it doesn't matter. The LLM only needs of the the, what is it Claude? The structure and being able to run an OCR. Speaker 1: So are you gonna send to your LLM 60.3 megabytes, or are you gonna send it, like, you know, 977 kilobytes? It's up to you. If you have a lot of Model, like people who are paying $500,000,000 for LLMs, go for it. But, anyway, so, prevent, Day. You have, like, the thing. Speaker 1: I demoed it AI, I demoed it like AI. I'm done. Thank you. No. I have more to show you. Speaker 1: So the avatar, that's 1 part. And, now let's go to my avatar generators. And here, let me walk you through 1st. Okay. This is 3000 Day ago. Speaker 1: I, put together Fatima, a couple Day Ngom. And, basically let me do so there you showing the back, I Use the replicate, like, API to make calls and use Google Nano Banana 2. If it fails or if it is, like, overloaded, I'll use, like, Google Nano Banana Pro or I'll use Flux. So there's, like, a loop in, inside there where we make sure that it's File safe. You know? Speaker 1: And it creates the avatar and creates 16 wardrobe for the avatar, you know, depending on the on on on what we have said, who Fatima can be. You know? You see that, like, it creates that. And if I go to the edit mode, you will see here that I can put, like, her name, what what what what is her display title, her Agents, and then the style note here, Fatima is a hijabi, soft spoken, very warm Jun welcoming. This MoE this becomes AI a part of your system prompt. Speaker 1: But when it comes to a part of your system prompt, how do we save all of that? We have, like, a YAML file that is created at the end. So the YAML AI, let me go down a little because I don't see. You'll Live, YAML file that is gonna be created. I can export it, but that's not what we wanna look at right now. Speaker 1: So next step and you see here, I use, like, character reference sheet. So we're done. Okay. Alright. I'll wrap it up. Speaker 1: So, the last thing I wanted to show before wrapping this up is the locales 1 is AI consuming the main packages, but the only job of the locales 1 is to, like, do the languages. You know? So if I open Fatima here handle please workflow your time. There you go. So we have, some phrases that she can say in English. Speaker 0: I'm Fatima, and I'm excited to assist you today. Okay. Yeah. Speaker 1: Jun how about the Arabic? Speaker 0: Where's Arabic? Speaker 2: This 1? Speaker 0: Yeah. Speaker 1: MoE my Arabic is not good yet. I'm gonna need, like, your help. It's the Zoom thing that is that is coming up. Speaker 0: Go back to Go back to Lead. Use have an option to share your audio? Yeah. Yeah. There's Jun 1? Speaker 0: There's no 1. Don't worry. Don't worry. Yeah. Muted. Speaker 1: Okay. That's fine. They they heard it. Speaker 0: Mhmm. How do I Share Scene here. Yeah. Okay. There you go. Speaker 0: That'll okay. Got it. We'll we'll we'll you. Yeah. Speaker 1: That's fine. We'll learn for next time. No worries. Speaker 0: Yeah. Jun shared. AI sharing. Mhmm. Yeah. Speaker 0: Okay. Now you don't have to point the mic. Speaker 1: Alan Wazahalan Speaker 2: was well fed. Speaker 0: Mhmm. AI Jun played shared audio? Speaker 1: Yeah. I just played it. Speaker 0: It plays on the on the Zoom, I Speaker 1: guess, but not here. Speaker 0: Which audio are you playing? Speaker 2: This Jun. Okay. Speaker 1: That's fine. Let me let me we can we can talk about it in the science fair. So I'm gonna finish, here. Let's AI, video panel. Let's hide, floating teaching control. Speaker 1: So let me finish here and go very quickly to the rest of this. Every package has the same shape, you know, And we have, like, you know, Maestro Avatar builder is the main project. The main project Use AI avatar locales. And then whenever I'm doing prompt with images, I'm using Pandini. AI can stop it at that for Jun. Speaker 1: And then, like, anybody who wants to learn more about the code and how this is set up, we can we have the AI 1st for that. Thank you so much. Speaker 0: Thank you so much for this amazing demo, Zoom. AI just have a question. What's the main difference between your application and other, or online, services that does image, image resizing? Speaker 1: Mine is free. I'm not asking you for any money. Speaker 0: Okay. Speaker 1: AI, okay. Yeah. I mean, I mean, honestly, though, that that that's a good question because I went to tiny Pandini, tiny JPEG. Speaker 0: Yes. Speaker 1: That's when I Event. But it has a limit of 5 megabytes. Anything beyond 5 megabytes, you have to pay. Mine, you don't have to pay. You can bring a 1,000 megabytes. Speaker 1: I don't care. AI, you know, so if you go to tiny JPEG, I have been using tiny JPEG for more than 10 years. If I if I can remember, that's the panda. So if I come here Jun I say, let's take the same image that I was trying to to to to introduces, And that's this 1. Okay. Speaker 1: Open. You see? It will force you to, pay. So I was like, can I do this in 1 afternoon? Yeah. Speaker 1: And I wanted to learn too about, like, the Canvas API and stuff like that. That's so that just became, like, a side project. Speaker 0: Alright. Thinking you so much. Speaker 1: Yes. You're welcome. Speaker 0: Right here. Speaker 1: Or AI shared. Okay. And then him. Speaker 0: Thinking for the demo. Not really a question. Just 2026 maybe just an inquiry. For example, if I upload, you know, the the images to Claude desktop, for example Mhmm. Is it handle, AI, have you have you seen maybe from your Science, is it handling the compression? Speaker 0: Are they handling the compression on their server AI? Or Speaker 1: Yeah. They do they do something similar. They're using the Canvas API too. And before sending them to their server, they will reduce your file size 1st talk the way to the point where it's still, like, viewable, but the quality will be down because Claude doesn't need the quality. And at that moment alone, it will send it to the server. Speaker 1: You know? So if you think about it, whenever you do it in cloud, desktop, if you open the file that you just uploaded, you will see that the quality has been torn down, And they're using the same process. Speaker 0: Got it. Got it. Thank you. Speaker 1: Mhmm. Speaker 0: Right here. Hello, guys. Mhmm. Yeah. Have you used another app called? Speaker 0: It's like a clipboard. Basically, I was thinking, like, is there a way to remove the, like, middle step, which is accessing the website? And instead, when you, you know, click the shortcut on your keyboard, it automatically compresses it based on the set of key AI. Speaker 1: Yeah. That's the that's the that's TTS that's the that's the actual, like, next step. This was built in an afternoon. Okay? So the next step, if I had time, I build show you, like, how I use Fast API for almost everything. Speaker 1: So you will put it in fast API as, like, you know, just an API layer. You will put fast MCP, which is the easiest way to do MCP, like, you know, on top of it. So now whenever you have those 2 combined, if you're on the web, it will, like, just Day, like, what the what this gentleman was talking about. It will compress it before and then send it. And if you are inside of Claude, it will understand, oh, I'm dealing with I have access to Pandini MCP Jun then I can do the same. Speaker 1: MoE, yeah, that's the that's the next step. Speaker 0: MoE would this workflow AI an API or File it be a separate API? Like something you have to install? Speaker 1: So what you do is AI Use would, use Fast to have it as a wrapper on it. System MCP takes 1 AI, FastAPI 1st because FastAPI gives you a restful API Jun Fast MCP with 1 line of code turn your, like, FastAPI server HINTS, like, an MCP server. Speaker 0: Okay. Speaker 1: Makes sense. Speaker 0: Thank you. Speaker 1: Right behind Use. If, like, chief Artist lead me do it. Speaker 0: At the start of the talk, you mentioned something about base 64 separation. So, like, is that also part of the AI process? Speaker 1: Yeah. Because, every image, whenever you have an offline image or an image that you're, like, pushing up, most likely, you know, they will convert it to base 64 1st. But base 64, the more the the bigger the image is, the more text we have. And then, like, it's gonna count against your Context window. So if you reduce the size, then you have, like, you know, a smaller, like, a footprint with the text. Speaker 1: Yeah. Yes, sir? Speaker 0: I'll talk to you. You're completely ready for the next part. Yeah. Mhmm. Speaker 1: Yeah. So what I was saying is I Use, Fast API is AI a a a AI, a AI, like, you you need to if you're gonna use Fast MCP, there's AI there's a package called fast MCP. Speaker 0: Okay. Speaker 1: If you use fast API, you know, so for example, in the avatar generator, which you can see at local host 8,000 blocks, this is your, this is your typical, like, fast API, you know, talk end and with the RESTful API, like, you know, verbs in there. That's a Python package that allows you to have this. Now you will use the MCP class and say, okay. I want you to turn this into, like, now, like, a Fast MCP. And when you do that, you can exclude some. Speaker 1: Let's say you say, I don't want this this thing to be part of it anymore. In the setup, you can Day, show everything or exclude these these functions. Speaker 0: Okay. Speaker 1: It's a very fast setup. That's why they call it Fast MCP. Speaker 0: Okay. Thank you. Speaker 1: Yeah. You're welcome. Alright. So, any more question? Let's lead let's let's, do it Inside science fair. Speaker 1: Alright? Speaker 0: Thank Speaker 1: you so much. Any final? No? Zoom.