I Did Everything Wrong So You Don't Have To

Hey guys, I'm Angel. I'm from ImageKit. So, raise of hands, who uses MCPs in their daily development? Fantastic. I was going to encourage more of you to do so, but before you actually finish development. So, here I have a website that I made using a cursor and I put all my images in there. And I go ahead and I refresh. And I notice, dang, these images take a long time to load. And I'm, so, one of the things I want to show you guys is how you use ImageKit's new MCP to actually fix your images and video performance within your React websites. And so, one of the places you can go to here is actually our, you can actually do it locally or through our API and also use this thing called Chrome Developer Tools, that they also developed a new MCP recently that we can go ahead and try out.

And so, the first prompt I'm going to be using is to use the Chrome Developer Tools MCP to record a performance trace of my website and tell me the three biggest performance issues of that website. And then we're going to identify the issues and tell me what specific URL images are causing the issues. And then we're going to generate helpers to fix the problem. And then we're going to update our performance. And then we're going to verify to make sure everything was done correctly. I'm going to just run through one of these just due to the time. And we'll just take a look, quick look at what the image, what the website looks like right now. You can see that the images are loading very slowly.

And then when we run all our fixes, everything will be much more smooth as we load. And so, let, so, when we're doing this manually, we have to go over to our docs. We have to check out, okay, like, I need to think about how to actually do lazy loading, how to resize my images, how, what kind of quality do I want to have, what's the format I want to have it in. There's a lot of things going into making sure your images and videos are actually optimized the best way possible. Normally, you go into image kits docs and figure out how to do it. But with the Power MCPs and your favorite cursor, IDE, you don't have to do that anymore.

So, I'm going to run one prompt to show you guys how we've done. I got it started a little bit earlier. So, we're just going to run the tool just so you can see what's happening right now. So for context, it's running the first prompt and figuring out what actually is wrong with the broken React e-commerce site. Let me just run through. It opens up the site on its own. It's going to go through and identify all the problems. And so, what we're going to do is hop over to the presentation. And I'm going to highlight a few things. So, typically, as I mentioned, performance is an afterthought. We build our website and we have our images on the page and it's working perfectly. Or so we thought. And we finally refreshed our page and now we're like, oh, what's going on?

But we don't want to do it manually anymore. We want to use our AI to do it for us so we don't have to. And so, exactly what are these MCPs doing? So, we have to answer two questions. What's broken? How do I fix it? The Chrome developer tools has a few tools we're going to use. It's going to navigate the page. We're going to do a trace. We're going to do a performance analyze. And we're going to take a snapshot as well as list the network request to make sure we understand exactly what's happening through our website.

And then we're going to use image kit to search the docs using the agents and we'll execute all the changes. Image kit uses one URL to fix all the authorization issues. So, our first URL is going to be just a basic URL that has all the just default image. And then with our URL, we're going to change it so that we change the width to actually 1,200 pixels. We have the quality at 80%. And our focus is going to be auto. And that will change our image to go from 3.28 megabytes to only 47.5 kilobytes. And overall, that will bring our website down from 68 megabytes all the way to 1.84 megabytes.

So, my overall urge to you guys is to not wait to after post development of use MCPs during your development. And please check out image kit for all your image and video performance needs. Thank you so much.