Full transcript of “5 Claude Code MCP Servers You Need To Be Using”. Click a timestamp to open the video at that moment. Need another video? Use the YouTube transcript generator.
0:00 All right, the comments on my last MCP video were pretty wild. And shout out to the guy who said he doesn't understand how my channel isn't bigger. You the real MVP. But times have changed. More MCP servers, more capabilities, more fun stuff for us to get our vibe Cody hands on. So today, I'm delivering exactly that. my top five clawed code MCP servers that will not only help you develop faster and better, but also avoid some critical vulnerabilities that can tank a SAS company overnight. Now, I've personally used every single one of these in production. And these are not your basic GitHub MCP server type of
0:49 tools. So, make sure you stick around for all of them because they are all pretty cool. That being said, let's dive in. So, quick 15-second refresher for anyone that is new here. MCP stands for model context protocol. And the way to think about this is to think about the way the internet used to be because the internet we know today is not always what the internet was. It used to be, for example, as an analogy, if you were on a Mac, you could only talk to people on Macs. If you were on a Window machine, you could only talk to people on Windows. And that all stopped when they created a unified way for everyone to be able to talk to each other. And then boom, funny cat videos everywhere. Well, that's what coding with AI tools used to be. And now MCPs have stepped in
1:34 and unified the way that those tools and models can communicate with each other, which is driving the explosion that we're seeing today. You can kind of think of it like an app store to an iPhone. Pretty big gamecher. So, first up on the list, we have a tool called REF, which is an MCP server that allows you to pull in up-to-date documentation on any framework or library. Meaning, gone are the days of a language model making up functions that don't exist or making up patterns that don't exist and just breaking your app, leaving you with a bunch of bloated code that you don't really understand. But I need to address something right off the bat. Context 7, which I talked about in my last video, is still a pretty solid choice and it gets the job done. But here's the
2:21 annoying reality. Context 7 loads the entire source documentation into your context window, which is very inefficient and can be costly. Think about using a tool like Claude Opus, for example, or Claude Code, which can be quite expensive. You do not want to load up a bunch of context that you don't necessarily need. Now, Ref completely flips this approach. So, instead of going out and downloading the entire documentation, it can intelligently go out and only find the functions that are relevant for what it is that you are trying to do. Let's look at an example. So, let's say in this project, I'm working on building a chat component that is powered by OpenAI and I need to understand the latest parameters for making the chat completions and streaming responses back so I can have that streaming effect inside of the chat
3:07 interface. If I was using context 7 to do this, I would be loading a ton of context into this window. Now, when I make this request for ref, we can see that it is going through and it is intelligently searching and pulling specific documentation based on what I need. So, it's pulling the chat completion APIs. It's pulling the response streaming APIs. It's pulling some APIs involved with again the completions API. And so it's intelligently querying the specific sections that I actually need from the documentation instead of just loading in massive context. And so once this finishes up, we can see we have the entire relevant chunks of the documentation that we need to actually
3:52 implement this. And so the result here is pretty astounding. You go from burning through API quotas in a few hours because of these massive context windows to intelligently using only the things that you actually need. Now, according to their own metrics, REF reduces documentation related token usage by up to 85%. So, it keeps you in the zone by giving you exactly what you need, nothing more, nothing less, and for a lot cheaper. But even with the best documentation, you may inadvertently introduce kryptonite into your project. And that's why my favorite new tool of the year is tool number two. And so tool number two is called Simgrip. Now, let me hit you in
4:37 the face for a moment with the harsh reality. Most vibe coders know absolutely nothing about security. We're focused on building all this cool stuff super fast. But the idea of it being a secure application is a serious afterthought, if it's even thought of at all. I've seen my own projects slap together security vulnerabilities that would make Sam Alman weep. But again, here is the reality. According to recent data, up to 74% of applications have at least one security vulnerability, and that's with people that are trained software developers. So, when you're moving fast, you are most likely creating security vulnerabilities that you are not aware of. And SEM grip
5:23 changes that. So, Smrip has a database of over 2,000 security rules and can scan millions of lines of code in a few seconds. But more importantly, it understands the context of your application, not just the syntax. So, let me show you what I mean. So, last week I was building a user authentication system and wrote what I thought was pretty standard code, just a simple clerk integration for this React Native app that I'm building. But what I did was I came through and I asked Seigp to scan my project for vulnerabilities. Now, after it ran its scan, it found a few problems. No rate limiting in place. We have wild cards that are allowing requests to be made from any host. And there's some ambiguity around whether or not my database password is being stored
6:10 properly. So, three potential security disasters just lying in waiting to happen. But here's what I love about it. It doesn't just tell you, yeah, what you did right and what is wrong, but what specifically you need to fix. So, it's not just saying, hey, you don't have rate limiting in place. It's saying, hey, your code is structured well, but you need to integrate Reddus. It's not just saying, "Hey, you're allowing requests from too many hosts." It's saying, "You need to restrict the allowed host field." Right? So, it's giving me actual practical implementation guidelines that I can just give the language model and let it implement those things for me and all accessible via a basic oneline MCP server command, which is awesome. So, when you are shipping fast, having things like this built into your
6:55 workflows should be a nonnegotiable. So tool number three is called pieces and it solves one of those problems that drives me absolutely crazy in vibe coding workflows which is that we're working in so many tools experimenting with different technologies trying to do all these different things that we often forget how we solved specific problems in the first place. Now, I will say this is the one tool on this list that I do not run inside of Claude Code because it has its own desktop app, which I will show you in a second. Now, if you vibe code often, odds are you find yourself forgetting specific solutions to specific problems, which is why you find yourself debugging the same problem over
7:40 and over and over again. Now, pieces creates what you could call a developer memory graph, meaning it not only remembers the problem that you ran into and the solution to that problem, but all of the steps and errors that you encountered along the way. So, here's a perfect example. For whatever reason, cursor utterly fails at doing basic Tailwind CSS configurations inside of vanilla create react apps where everything should be pretty straightforward, but then you just hit this same post CSS configuration nightmare every single time you try to kick off a project. So, the thing that is really cool about pieces is that it keeps track of everything you do inside
8:25 of your IDE, inside of your terminal, or even inside of anywhere else you configure it to watch on your computer. Now, the thing that is really cool is that in this timeline, we can go back to specific problems that we had and we can actually chat with pieces about that problem and how we solved it. So now we can again start this chat and say what was the exact error we ran into and then what was the solution and it documents everything that happened right so the exact error why the error happened and what the different solutions were that actually led us to that solution and so we can just copy this solution now next time we run into it and give the context of that solution to Claude. Now, if your brain is running on this one like mine
9:12 did, this is helpful beyond just the scope of solving problems. This could be used for how you architect solutions, how you think about different features, how you do certain product design, UXUI. The sky's the limit in terms of how you could actually use this thing. So, where it gets really powerful is that pieces uses AI to connect related concepts across your development history. So, if I, for example, were to come in and type in Tailwind, I'm going to see a timeline of every single time I've run into a situation where I was dealing with Tailwind problems or post CSS configuration problems or whatever it might be. So, it's like having a conversation with every version of yourself that has ever run into a situation and solved your way through that situation. So the time savings are
9:58 massive, but more importantly, it helps you build on your past discoveries instead of constantly reinventing the wheel. But even then, sometimes we need to solve a problem that ultimately lies outside of the context of what claw code or cursor we're actually trained on, which is why our next tool is exasarch. So, ExoArch is basically a competitor to Perplexity, except in my opinion, it does a better job at answering developer oriented questions and understanding the real context of what it is that you want. Now, I use this most for staying up to date with development best practices and patterns. For example, if I was going to try and build in a Gentic feature into this app using Crew AI, I would want to make sure that I have
10:45 up-to-date documentation on Crew AI and that I understand modern best practices for building an agent. Traditional search tools are optimized for general queries, which means there may be a result that is very relevant to what you're asking that is just buried somewhere. Google is engineered to show you the most popular result, not necessarily the one that is going to answer your question the best because those two worlds are not always the same thing. So, Exa is specifically optimized for developer queries. It actually ranks the results based on technical relevance and recency of the page. Here is a perfect example from last month. So I'm building an agentic lookup functionality for a project I'm working on and I need to understand the current best practices
11:31 for a gentic rag implementation. Now this idea of a gentic rag is like kind of new kind of bleeding edge and it's changing a lot. Now if I were to Google a gentic rag best practices I get a bunch of generic AI articles ads basically marketing content. Now this is not helpful when I need architectural patterns and decision-making guidance. But now when I use exa search to research and understand modern best practices for agentic rag focusing on architecture patterns and implementation using crew AI, it immediately surfaces more technical details, technical blog posts from engineers who have actually built this type of stuff. recent GitHub discussions, detailed implementation
12:17 guides, uh even academic papers. So now the real power comes when we can take all of these search results and pass the context directly into cloud code before it starts building out that agentic functionality. So instead of cloud code working on potentially outdated training data, it's working on the most current technical discussions and proven implementation patterns. And so this creates this great workflow where Exa can find the most up-to-date documentation and then Claude Code can work on implementing that to the best of its ability. And so the result is that we get code that's project specific that is also up-to-date with best practices instead of us being 6 to 12 months behind the curve. So again, Exa is built for developers. It excels at answering
13:02 questions that are technical in nature, which makes it an awesome weapon to have in your arsenal. But even using all of these amazing tools, what if your UI looks like crap? Well, it won't with tool number five. So, last but not least is an MCP server called Playright, which is critical to a process that I call AI graded self-improving UIs. So, here's the problem. When you're vibe coding and you are developing things fast, there's not a really good systematic way to ensure that what you are building meets those fundamental guidelines you had for your UX and your UI. You might think that your new layout should be looking better, but is it really? And even if you do have feedback for the system,
13:47 simply describing in text what is wrong and what should be fixed doesn't actually work that well. And so, Playright helps us change this fundamentally. Here is how it works. So, Playright can actually take screenshots of your UI at different points in time and then feed those screenshots into the language model and have the model grade itself based on how well it conform to standard UX and UI guidelines. And it's a bonus if you provide those guidelines yourself. So in this video we can see this as a basic process where we have this dashboard interface and after each major change that we make playwright can open up the browser automatically take a
14:33 screenshot and then grade the results of that screenshot against our UX guidelines, our UI guidelines and our style guide. And this is where it's really cool. The LLM is not just critiquing. it is first grading itself, giving a an evaluation of its work and then moving on to actually optimize the outputs. So it might actually grade it and say something like the navigation hierarchy is unclear because the primary buttons don't have enough visual weight or the form layout is creating too much cognitive load because of how you grouped your fields. And now even better with claude code, we can set up playright to do this automatically using claude code commands. Now I go through that in detail in the video that I will
15:19 link somewhere around here. So the result is that you have this continuous feedback loop where your UI is being constantly evaluated and improved by a senior product designer. I've been using this approach for a while now and the results are pretty dramatic. My UIs come out more polished, more accessible, and they overall just feel a lot better. So the time savings are huge, but more importantly, it helps us create apps that are not just functional, but actually look nice and feel good to use. So when you are vibe coding, this type of intelligent feedback cycle stops you from making UIs that are functional but kind of suck to use. So there you have it. Five MCP servers that will help redefine your approach to producing
16:05 productionready code. So to break this down in terms of impact, REF is going to help you cut down your token usage when you're dealing with documentation by 85%. SEGP is going to help you avoid those critical security vulnerabilities that can completely crash and tank your project. Pieces is going to help you turn those hours of debugging into minutes of context retrieval. Exa is going to help make sure you have the most up-to-date relevant context as possible. And Playright is going to help you build an autonomous UI improvement system. So the big theme here is building systems that help you maintain the vibe coding flow while building more secure, more polished apps. So drop a comment and let me know which of those
16:51 tools you're going to actually integrate into your workflow and that you are excited to use. That is it for this video. I will see you in the next one.
