5 MCP Servers For Vibe Coding Glory (Just Plug-In & Go)

Shout out to the haters in the comments who say I take too long to get into the videos. So today I'm just going to get straight to it. Here are the top five MCP servers that you should be using if you like to vibe code.

For each one of these, I'm going to talk about what it is, how to actually access it, and why is it valuable. And so we're going to see if we can do this in 10 minutes. And if so, it will be my first ever 10minute video.

And hey, if it flops, I can just reuse the concept to make a longer form version. Similar to my video earlier this week, I'm going to keep this high enough level that we don't get in the weeds of implementation and how to download these things. We're going to look at them.

We're going to talk about why they're valuable, how they work, how you can use them. But I'm going to be publishing a long- form 1 to2hour version of this video inside of my free school group which you can go and look at if you want to learn more about these specific topics. That will be done in early May.

So a quick primer. What is MCP? Well, for the uninitiated, MCP stands for model context protocol.

And the too long don't read of that is basically this. MCPs are a standardized protocol that allow different AI models and tools to talk to one another seamlessly. So imagine for a second that you have a Mac computer and one of your best friends has a Windows computer.

Then imagine if you weren't able to actually talk to each other when you're using those devices. That's actually how it was back in the beginning days of the internet. And that's kind of what these beginning days of AI have been like.

But MCP steps in and it breaks that barrier by creating a common way for these tools to communicate with each other. And so MCPs are this ecosystem of different tools that are now really starting to grow like wildfire. In fact, they're kind of like an app store.

And so let's take a peek at some of those apps right now. So the first MCP up is called Context 7 by Upstach. One of the biggest problems with AIDE like Cursor and Windsurf is that they're pretty bad at writing code around newer stuff.

Meaning if Superbase, for example, were to come out with some new APIs for something, it would be pretty bad at coding solutions with it. And so you see this type of stuff a lot where you ask it a question and it hallucinates APIs and functions that do not even exist or it gives you an answer that's based on a really old package or version of that app and it just doesn't apply anymore and it doesn't work. And now that's further kind of complicated by the fact that the builtin way of doing this, the built-in way of using documentation inside of tools like cursor and windsurf are really bad to be honest.

uh they don't always index properly. They're bad at scraping those docs. They're bad at taking the context properly that you need from those docs and using them the right way.

And so in steps this tool context 7 where we can pull up documentation and code examples whenever we ask it to. And so for example I could come in here let's just say this is an app and I could say make me a user table with superbase use context 7. And so it goes out and it pulls the superbase documentation from its own library of documents.

And then from there it pulls those full docs through into the app's context. And then it uses that context in order to do the thing that you have just asked it to do which in this case would be making a basic user table with superbase. And so we can see now it is moving through.

It's creating the SQL scripts that are going to do everything we are asking it to do. And bam, there it goes. And so that's pretty cool.

And it actually pulls it from their website. So if you go to context 7. com, you can see all of the available libraries.

You can also add other documentation in here. So pretty awesome tool and that's why it is the first one on the list because it is pretty valuable. And so the result here is much faster time to reaching a correct solution to a problem.

Meaning a lot less of those pull out your hair frustration moments where it is just not working when you're trying to use some third party tool. Particularly with the speed of development in the AI space and all the amazing new tools that are coming out so frequently. You absolutely have to have some sort of tool like this that allows you to ingest that new stuff and use it practically in your app very quickly.

And Context 7 allows exactly that, which is why I think it's really cool. And so up next, MCP number two is Clawed Taskmaster. Easily my favorite new tool of the year.

And so if you've seen my other videos, you know that this is now a critical piece. It is my step four of the vibe coding system which by the way I will be dropping a long form tutorial on inside of my school group in the coming week or two. But again, this is a critical tool that I use now inside of that process as the final step.

And the reason it's so critical is that the hardest part of actually vibe coding non-trivial stuff is that you need to take a ton of time to plan things out extensively. And so the first major steps of that process, planning things out extensively, well, you have to get a really clear idea of what it is exactly that you're trying to build, what the tech is, what the requirements are, what the main features are. But if you've done that, well, what you need to do, you're basically left with this really detailed list of features and requirements of those features, but you do not yet have a stepbystep plan that can effectively be given to an AI and have it actually implement all of those steps.

And so in steps claude taskmaster which can take an existing feature specification document translate it into its own version of a PRD and then generate intricately planned tasks to help you execute the entire project step by step. And so once we've initialized it into our project, I can say, "Help me create a PRD based on these features. It will go through process this into a format that it can actually work with and then once it has done that, it will turn them all into individual tasks in order to complete the project.

and it will sort those tasks by complexity level. Once it has done that, it will determine if it has enough context to actually effectively answer this question or solve those tasks. And if it does not, it will expand on them and break them down into more granular tasks so that it can actually code this thing in one shot.

Now, the cool part that I really like about this is that it as it builds your solution, it self-corrects and updates the task list to account for what you have just built. And it has a ton of other awesome features where you can analyze the complexity of certain features, break them down into really granular subtasks, expand on tasks, remove tasks. You can do like a lot of really cool things with it.

So instead of saying something like, "Hey Claude, hey Replet, go build this really cool awesome dream app I have and then being upset with the type of output that you get, we can move toward this world where we're giving very meticulous sets of instructions based on a very concrete vision we have to a system like cursor and have it actually build the thing out for us in a way that makes sense and actually works. " And so I'm really excited to see how things get developed further because I believe tools like this one are what will really enable people that really deep down in their heart of hearts like want to develop stuff and and build cool companies with these types of tools or build things for themselves. It's going to really enable those people to actually do it and build things that are cool and that work and that are done well.

And so out of anything on this list of five that I'm going through, this is probably the one that I would recommend most people start with or really try to do. So number three on the list is Exa Search by Exa AI. Now, sometimes you really need some added context in your workflows.

Maybe it's as simple as something like you're building a landing page and you want to integrate real statistics into it. or maybe you're hitting a recurring issue or bug with the tech stack that you're using and you need to start finding better solutions to the problem that are maybe documented somewhere. Whatever the case may be, having a programmatic search tool is an absolute must.

Now, a lot of people love perplexity and I'm not going to say not to use it, but in my experience, Exa AI actually has a much better development experience. they have much better results and they have much more features that you can actually use. So, like most of these tools, using it is going to be really simple.

So, I've been in the process of vibe designing a new uh landing page for uh one of my SAS companies and one of the things I really like the design and some of the things that they were able to do, but I do not like how it hallucinated a bunch of stats right here. And so what if I wanted to update these? Well, I could come in here and I could add this section in as context.

Oh no, I failed 10 minutes. It was supposed to be 10 minutes and I went longer. Forgive me.

Forgive me, Lord, for I know not what I do. Let's see if we can get it done in 15 to cursor. And then I could say, use Exa AI to find me actual provable statistics behind these claims, give me new stats that are real.

And so running an AI coding process or any process for that matter really, it comes down to ruling the context like having a really strong control over the context that you're passing the system. If your context is bloated or even if it's too sparse or lacking, your outputs are always going to miss the mark. And so Exaarch is a tool that allows us to hit the mark more regularly, more precisely, and more accurately.

And so we can see here it's kind of recursively doing a search, gathering the results, doing a search, gathering results, doing a search, gathering results, and it's continuing that process until it has effectively answered what my my query was. And so, as we can see, it's now pulling through a bunch of different statistics that would back up some of these claims. and I could just tell it hey now go integrate those into my app.

So number four on the list is knowledge graph memory by model context protocol or anthropic. Now, oftentimes we run into this issue where we need to maybe swap context windows, right? Where we're going from one chat to a new chat in order to have fresh context or maybe we did something really valuable that we want to be able to remember in an entirely different project we were working on and we want to retain that memory of that thing.

This could be a specific way we learned to debug something. It could be a way to store relationships between different pieces of data in our app when things become complicated. Or maybe we want to be able to dynamically update our prompts based on other things that have happened in the past.

Maybe we have our own homegrown version of Claw Taskmaster where we paste in our task list and we want to be able to keep track of our progress on that thing and how it's progressing. So, there's honestly a ton of different problems that a tool like this helps us solve, but let's just take a really basic example here and show how we can give the system memory. So, here's an example inside of this app.

Something that was becoming a little bit of a recurring problem is that it kept switching like color palettes oddly. It would change colors when I added it to make new features. So we could say something like take the light mode and the dark mode versions of this app and store them into memory.

And so what this is going to do is it's going to go through and it is going to create new entities in this memory store to store that information. And so now if we were to look at what it actually created for the light mode theme for example, it goes through and it creates these observations. So it's saying, "Hey, anytime it uses a white background, here's the variable it's using.

Text colors are this one. Headings are this and so on. " And it goes through and basically remembers what those color themes are.

And then what it does is it creates a relationship between those. So we can see how those different entities that it just created are actually connected to each other. And so I'll give you another really good example of this.

I have a project where I am building an an AI personal trainer for myself. And so in the context of building a fitness plan over like a year or twoear period, there's a lot of different relationships between like the database in this case where you have macro cycles, right? longer term overarching goals which get broken down into smaller and smaller and smaller cycles.

Within those cycles, you have uh set schemes, you have rep schemes, you have workouts that need to be done, you have all of these different pieces of information that it actually becomes very complicated very quickly. And so what I found was that the systems were not properly remembering the relationship between all of those entities. And so when it would go to build me a new program, it wouldn't honor those existing relationships.

And so using a tool like the knowledge graph memory, I can tell it what that relationship is. And then when it goes to make requests that have to do with that, I can make sure it's referencing its memory so that it knows the precise structure of how everything needs to be related to each other. And so this is great because when we start like dropping in and out of coding sessions, maybe a few days go by, maybe even a few hours, but we were doing something really complicated, we can start to retain important memories about things when we solve a problem in the moment and need to remember that for later.

And you're going to know best what that is for your actual project. But managing complexity with this type of system becomes a piece of cake. And who doesn't love cake?

So last but not least is a two for one. the Magic UI MCP or 21st Devs Magic MCP. And they sound very similar and it's kind of confusing considering they do a very similar thing, but I guess they both wanted to be magical.

And so I talk about it a lot on this channel, how a professional design actually imparts authority. It is a subconscious signal to customers that you are an authority on something and that you should be trusted on something. So having an MCP server that's dedicated to design obviously would be a huge win.

And so I personally I use a lot of magic UI. I love magic UI especially for landing page design. So, this landing page that I was showing you guys earlier, uh, much of this, the entire thing really was built with I still have their footer down here cuz I haven't finished this.

Built with Magic UI and you've probably seen this in my other videos if you've seen them. And so, 21st Dev is somewhat similar. I find that they actually have more components that are for actual app UIs.

And you can find through like their premium store and and creators and templates and collections, you can find a lot of really cool like packs or starters for doing specific things. So, for example, you can come in here and find this cult UI and they have just a lot of their own really cool in here to be honest uh that you can come in and get access to. Now, what is a use case for this?

So, both of these tools, by the way, do have an MCP server. But let's say like I really like this flickering grid from Magic UI. And let's say inside of my app here, I wanted to add it somewhere, right?

So, let's say I came down here and I wanted to make this section have a flickering grid. Well, what I can do is I can come into this file, pass it in as context, and I could say, use magic UI to add a flickering grid background to this section. And now, boom, we can see it.

uh obviously needs to be dialed in a bit, but pretty cool how it was able to just do this using that MCP server and kind of like immediately know how to read the documentation and what to do. So, I would go in here now and prompt it to like fix the opacity, make it a lot more subtle in the background. I really love the direction of these designoriented MCPs because to be honest right now it feels like there's like Figma, which is only really helpful if you already are a designer or have one on staff and they built the thing in Figma and now you want to like bring it into the tool.

But if that doesn't describe you, well then it's like it doesn't do me any good having Figma as an MCP. And so I really love these companies that are focusing on like helping you integrate their UI components and libraries and ways of doing things into your app. If you ask me, an MCP dedicated to mobile app design would be amazing.

And I don't think there are any out there that I've come across yet. So if you have heard of one, please drop it in the comments because I would love to check it out. And so that is it for this video, guys.

MCPs are a major leg up in the arena of vibe coding. So, make sure to find some servers that work really well for you and really start using them. Again, if you want a fuller exploration of some of these topics on some of these servers and how I use them in practical workflows, I'm going to have a longer form tutorial coming to my school group in May.

So, check that out. It is free. But that is it for this video.

I will see you in the next one.