S-Tier MCP Servers for Developers

Welcome to Syntax. Today, we're gonna be talking about s tier MCP servers for developers. These are going to be MCP servers that work really well in general development flows to help you build stuff, to make things, to vibe code, any of that. And by no means is this an exhaustive list or anything like that, but these are a handful of MCP servers that I've used personally that I have really enjoyed and that have made my time working in code a lot better with agents. My name is Scott Tolinski. I'm a developer from Denver. With me JS always is Wes Bos. What's up, Wes? Hey.

Stoked to talk about this. Feels like we've had a bazillion MCP episodes, but there's just, like, this never ending well of stuff to talk about, especially Node, like, OpenAI just announced a whole bunch of their agents SDK. We'll have a show on that, but it's it's never ending. Yes. It's never ending. And one thing that I've personally felt

is that, like, yes, MCP to me always seemed like an interesting idea, something that could be really advantageous to to use, but we have sort of reached a point where MCP servers are doing so much and so many good things. They've gotten really good that I I'm finding their utility to be more and more, something that I rely on every single day when I am using agents to code. I actually we should have Kent c Dodds on the show. He's been doing a ton with MCP servers, and he and I chatted a whole bunch at the the Versus Code Insider Summit about MCP.

And his his thoughts on MCP overall had, like, really, shaped how much I've dove into adding these tools into my workflow, lately, and it has really paid off.

So before we get going, let's talk about Century. This show is presented by Century, century dot I o forward slash syntax. Sign up again two months for free. What is Century? It's the perfect place to fix your bugs.

Make sure your application's running smooth. I'm gonna talk about a newer MCP server that they've released recently beyond the just the already awesome Sanity MCP server that is, like, awesome s tier development tool. So that that's not even gonna be part of this sponsor read.

Right? That's gonna be part of the normal episode because it's that good. It's just good. Yeah. It's just good. And, I I more and more rely on Sentry's tools to, fix my stuff, man. Seer is their AI thing that that goes through and finds the root cause of your bugs, and I've had just such good luck using that thing. So check it out. Century.i0/syntax.

I have two months for free tasty treat. Alright. Real quick. Before we get going, two things. We need your web development horror stories, and we Scott a meetup in San Francisco on October 27. So if you have a horror story for our yearly Halloween episode where we tell stories of people who have you've dropped the database by accident. You deployed a fix that DDoSed yourself. You wrote a bad React hook. You accidentally forgot the where clause in a database. About the wherewith clause.

Oh, man. These stories are awful. I wanna stick my head. Like, I'm so stressed out reading these stories every year, but it's so enjoyable. Please please send them to us. Go to syntax.fm/spooky.

Submit your story or send me an email, Wes.

Send me a DM, wherever.

We would love to read. We make everything anonymous. We're not gonna say who you are, but we'd love to read them off. And then, also, October 27 in San Francisco, we are doing a meetup, and we want to invite you.

We are at bare bottle brewing in San Francisco. Go to syntax.fm/meetup.

You can grab some tickets. We're gonna have some merch there. We're gonna have some brewskies there. We're gonna have Scott there, myself, CJ, the whole team. It's It's gonna be a hoot, so come on down.

This is the end end of ad read. Let's talk about Wes tier MCP servers. Now the first one that I have on here is the Sentry MCP server.

The Sentry MCP server is great because you're if you use Sentry, which is again for tracking errors and all that stuff, you wanna be able to integrate and, use this tool to use your Sanity from your agent, from your CLI in terms of, like, cloud code, whatever you're using. All these examples that I'm showing you on screen today will be done with cloud code. But if you cannot see, you're listening on the audio, you're not missing anything.

We're mostly just kind of showing what they they how they work. So, and And we should say, before you even get into that, for anybody who who hasn't heard, these these MCP servers are a way to surface additional tools to AI. Thank you. And that could be coding, right, via cloud code or or Vercel Node or cursor. It could be via via chat, a chat app, and it could be by simply making straight up API calls to a, like, OpenAI or or anthropic, but you provided additional tools to do things that it it it might not be able to do, might not be able to access specific things.

Yeah. You're providing the AI with specific tools to do specific things. So, I've loaded up the Sentry MCP, and I've looked at the tools. There's 19 tools available from find teams, find releases, get issue details, get trace details.

You can create a team through this. You can create a project. You can update a project.

So what that means is that oftentimes, when you are in the past, you're working with Century or any of these types of services like this. What do you do? You go to their website. You create a new product project. You maybe you get an API key or a Deno in Century's, case, and then you run through the wizards or you Century has a CLI that does it for most platforms. And the docs are great, but you're going through in your Scott and pasting stuff from docs. You're getting set up. You're having to click around.

With this, you can create a project directly from here. After that project is here, you can then search through issues. You can analyze issues with their SEER AI platform to help fix them.

And, ultimately, what that means is that you're spending less time leaving your tools, which is cloud code, your editor, whatever, anywhere that you're using this MCP server, Versus Node, cursor, or whatever.

You're you're spending less time leaving that to go to Century's UI to do things and more time just staying where you are.

As somebody who's allergic to Scott context switching like that, it's made a big impact for me. So that is the CenturyOne because, again, we use those tools. For me, this this works so well. But they also released a a newer MCP server, which is the spotlightjs, spotlightjs.com.

Basically, this is like a local development tool where, like, Century, primarily, I'm using it mostly for production bugs and things like that, where Scott is something that's collecting your errors.

The MCP server in regards to this allows you again, you're getting local errors. You're getting local logs, traces, get events for traces. And this is still brand new, but if you're working in local debugging, I know me personally, I'm oftentimes having the MCP server or, the the agent having to run the process to then read the console to then or maybe even look into

Chrome DevTools MCP to read the the console logs, where this is just copying things. Pasting it like a sucker, and then there's no Copying and pasting additional context on top of that in terms of, like, how often did it happen, what's the most common error.

Yeah. This is awesome. Yeah. So if you have this set up, you could say, you know, read this error or whatever, and you'd be able to get that error directly from the MCP server without having to, you know, instantiate other tools or or, you know, run additional process. So I've really liked this. And on top of that, there's also, like, the Scott UI that you get.

So it's not just an MCP server. There's also this UI for being able to debug your app. So, this has become a Like a local century.

It's a local Sentry for sure. And I I've really, really liked this.

And they're working on it pretty hard because, I gave them some feedback on the install process. And sure enough, this landing page has changed since I've done that. So, shout out to the Sanity team for knocking this thing out of the park.

Look. Can I talk about the Eleven Labs SDK, or the Eleven Labs MCP real quickly? This is not necessarily something that you'll do, but if you are the type of person who's like, I don't really see that the the point. I don't really see the purpose in this type of thing. What I did is I took the Eleven Labs MCP server, which Eleven Labs does, like, voice text to voice, voice to text, but they also have, like, an agent's SDK, which is able to kind of spoof, like or or make a phone call. Right? You can queue up an agent with a whole whole knowledge base. You can give it a bunch of tool. You can give the agents MCP servers as well, which is crazy.

I guess that's like your MCP server can have MCP servers inside of them. Totally. Yeah. But the crazy thing was JS I had a bug in my Node, and instead of, like, asking I had it set up in Cursor, and I said instead of, like, asking Cursor to fix the bug, I said, call Wes and ask him how to fix the bug.

And it literally rang my phone Oh, yes. Asked me what I would do in this situation. I replied on the phone with what I would do.

It transcribed it, put that back into Cursor. Cursor then parsed the whole transcript and then applied the fix. Jeez. Obviously, a stupid thing to do. It's so funny. But that just goes to show how and I'm often just shocked at how you don't have to write any code for for any of these. Yeah. They just all work together. Like, so much of my career has been wiring things together.

And with these MCP servers, it's just most of the time, just work together. Yeah. Yeah. Exactly. So I thought that was that was a pretty funny and, like, just like if if you haven't seen the benefit, try that. Like, it's it's eye opening as to, like, how these things can work together. My cursor

called me on the phone. Cursor called me on the phone. That seems like a, a nice little, like, dev horror story. I was trying to fall asleep, and Cursor called me on the phone.

Alright. So next step is a class of, tools that I'm calling, like, docs type of tools Wes you are getting the the documentation for various context seven is the big one for this, and context seven works super well because what you do with context seven is you're basically saying, give me the documentation for this library. Like, use contact seven to give me the documentation. And what it does is it goes off and it gets the ID first, and then it goes and gets the the docs.

And that way, it has that in its context. So the agent is able to, in it in the context of what it's working on, able to take in the documentation of the project that you're working in. Now this can sometimes lead to context bloat or it's bringing in a lot of too much context, and I I have some solutions for some of that here. But I found that this is, like, one of the the best things to do when you are finding that the agent or the AI is writing code that is not in adherence to the actual library.

Because if if you say use context seven to get the up to date docs or whatever, it's going to be able to have that in its context and actually, work on it. One thing that I've been doing lately is anytime I I have a library, whether that's like I I wrote the, zero Svelte bindings for zero sync. I threw that on contact seven, and it's been so nice to be able to be, like, contact 7 to make sure that you're using the documentation for this.

It it's so key, especially for, obviously, for libraries that don't like, the the AI doesn't know about or it's just hallucinating it. Especially like, sometimes it just hallucinates method names when Yes. It clearly has access to the types, which drives me nuts because, like, you shouldn't maybe you shouldn't even need docs if the types are good enough. Yeah. Maybe. Yeah. Sometimes it's just for best practices or, yeah, a more general workflow. Of of, like, how to how to configure it and whatnot. That that's really good as well. But, like, even just like AI still writes old Tailwind all the time, and it's so frustrating. Yeah. It writes old everything. Yeah. And you have to, like, explicitly tell it, use these features. And, like, that's a bit of a like, we're kinda stuck in this, like, 2023 version of coding things unless you explicitly tell it to use the newer version of something.

And, like, I I worry about, like, React, all these new React features we talked about last week. Yeah. And, like, it's Svelte. Yeah. It doesn't know, but it's Svelte too. Yeah. There's just so much of this stuff. You know? I I and and for me, it's, like, not even that. It's CSS. Man, like,

the amount of things that I have to throw into my my context or I have to have special CSS agents to write good CSS because AI models today, all of them. And people that I hate that when they leave the comments. They just say AI, but they don't even say which model. Well, that's usually because it's most of the models. Right? They a Scott a lot of them have the same issues. They all write dog shit CSS. They all add background color to stuff that does not need a background. Right? You you this is you may you set the background of this input to be the exact same as the background of the container. Why? Yeah. They don't need that. That's just making this unmaintainable.

Or you used transform translate instead of translate.

Gosh.

That's the MCP server I need is the do not ever use transform translate. Use translate already. Gosh. Wait. Yeah.

What does contact seven have for, like, modern CSS as well? Because, like, we've been blessed with so much new CSS in the last, like, two years. You know? And I don't see a lot of it having having huge uptake. And I think, partially, that's because, obviously, browser support. I think, also, partially, just because, like, the AI just loves to absolute position everything instead of use popover and anchor positioning.

Let me throw an ass ton of JavaScript in here when you could use the popover API.

Like okay.

I Node. I I've been working on something for this, Wes, personally. I because I'm just so fed up with the CSS that, it writes, and I have my own, like, CSS systems. And you could obviously train it on those systems, but I want it, like, a fundamental, like, CSS fundamentals.

Because, obviously, the the models are all trained on dog shit CSS because most people write bad CSS. So it's a it's a it's a problem. But I I I personally wanna solve this problem because it's a problem. Now addition to context seven, there's something new kind of popping up where libraries are doing their own MCP servers. I have the MCP registry from, GitHub pulled up.

We'll link this in the show Node. Github.com/mcp.

One thing that you'll see on here is there is a Nuxt MCP server specifically for Nuxt itself, working in Nuxt. And I haven't used the Nuxt one, but it is by Antfue. So I'm gonna put it in s tier just based on that alone. But the one that I have used in this regard is the new Svelte MCP. This is their official MCP server, from the Svelte team. It's in the svelte.dev.

And all of their libraries and projects need to take note of how stinking good this thing is because one really cool tool that it has besides Git documentation you know, the big problem with Svelte is that they decided to release a completely new syntax for everything, like, the the day before, you know, models were released. So none of the like, even modern models, anything that comes out, GPT five, the Newsona four point, they're all bad at Svelte still. They're not they're not terrible. They're getting a little bit better, but they're still bad at Svelte five. So this fixes that problem because you can say use Svelte MCP, implement remote functions. It's gonna go off. It's gonna get the documentation for remote functions specifically, and it JS going to use that to to work on it. So it always has that context. The same thing that you'd have with context seven, but this one's very targeted. It's gonna know the exact feature that you're asking it about. But one of the coolest features in here is the auto fixer.

The auto fixer takes in a string of an entire component, and then it returns what's wrong about this component. That way, the the agent, the AI, whatever you're working in, can then use that information to update your thing locally. So this is sending a string of your component, and it's saying, hey.

You used on colon click instead of on click. It it fixes the component.

That rules. I think a lot of these things need that. How does that work? Is it

is it just, like, providing, like, a prompt to the AI, or is there literally, like, a linting server hosted somewhere that it's

it's linting against? Oh, man. That's a great question for the Svelte team. I think I think it's providing a prompt. It's sending your string of your component to a prompt somewhere. I don't know. Well, let

yeah. Because it it also could be, like like, running it through, like, this. Doesn't Svelte have, like, a Svelte linter Wes it will, like it'll flag stuff that is is maybe Bos possibly a bad practice Yeah. Yeah.

Along with how to fix it.

Let's see. Claude, use Svelte auto fixer MCP to lint.

Let's find a dot Svelte component.

Let's find the, let's do menu here, and we're gonna see what it does really quick. Basically, what it's going to do is it's going to, like I said, take a a string of that. It's gonna send it off to the MCP server.

The docs for this, say, it uses static analysis to provide suggestions

for code. So Cool. What it is Thank you for looking that up instead of just getting run all of that through

a, like, static analysis Wes it will look at all of the Node. And there's there's likely things in that as they they loop through the tree of the Svelte code that say, I noticed the on colon click.

Yeah. Let's let's throw a warning for that as well as a suggestion of how to fix it. Yeah. Returns in our, an object with issues and suggestions. No issues found. Just runs it runs it locally. So most of these MCP servers are simply just spinning up, like, MPX commands in the background. Some of them run Docker containers.

Some of them are hosted externally. And This is a remote one. To run it. This is a remote one. Okay. Yeah. Cool. So I I think, other,

frameworks, libraries should take note. That rules I know people don't have necessarily the resources or whatever, but, like, the auto fixer thing, man, I love that. I would love that for CSS. I would love that for, people who write React code to do something that one line of CSS would do. Like, hey. Have you considered learning CSS before I install on something? Hey. Maybe this is

this is outdated or or just like like a MCP server full of dead simple examples that can then be projected on your code base, especially for a lot more of the modern CSS stuff.

One MCP server I love or or probably 15 is the CloudFlare has, like, 15 different MCP servers for each of their products. So they have one for docs, which is good if you need docs on how how workers run. But then you can also use it just like an API to, like, spin up a container or Yeah. Create a binding to a a database in this project. So where you might have previously had to, like, figure out what is the, like, Wrangler command that I need to type exactly to make this work, it's so beautiful just to be able to type you know, spin up a new d one database and and put it in my Wrangler bindings.

Yeah. I love that. Because, again, otherwise yeah. Having to navigate the Cloudflare UI does drive me nuts sometimes. I don't know about you, but, like, as I I use more and more of their tools, I'm just like, man, I feel like they could they could rethink some of this

stuff. They're having the same problem that Amazon had years ago, which Wes, like, initially, Cloudflare was, like, dead Scott simple. And then as more products get added, it's just like, where where do I even go for the like, I was looking for my tunnels the other day, and I just it took me, like, five minutes just to find the links to find where tunnels were. But their search was actually really good, and I ended up just typing in Yeah. Tunnels into the search.

So I happen to feel like it's a prank. They're like, we have a tool called tunnels, and we're gonna make you go through countless tunnels and mazes to actually get to where you're trying to go.

Yeah. I don't know that I could design a better version of that. Like, that's where, like No.

Proper application designers come into play because, like, trying to keep things simple but also still surface all the knobs, for when people want them is a very hard thing to design around.

Yeah. Yeah. For sure. That is tough.

Next one here is the Chrome DevTools or Playwright MCP servers. I've been using Chrome DevTools, over Playwright MCP servers for doing the same type of task now since they were released. So this is a brand new one. If you haven't heard about it, Chrome Dev Tools have released an official MCP server.

It show on it. We did a show on it last Monday, so you you should have heard it. We, if you're listening, we should have heard it. This thing rules.

Again, this one is running in just an npm command, and it is firing this thing up. And, let me tell you, I've had such good luck with getting into loops where I'm saying Wes this in the Chrome, dev tools MCP server. That way, it can find console logs.

It can find, like, visual things that are off with it. It's taking screenshots.

It's doing all kinds of stuff, and you can see it work too. So it's not just, like, happening blind in the background.

Yeah. Like, emulate network, list console logs, click, drag, fill form. I mean, there's 26 tools here, getting performance. So if you want to evaluate performance, finding animation issues, or or key frame Yeah.

Or, key key frame?

Frame drops. Yeah. Yeah. There's key frames too.

I don't know if it's accessible via the the tools. But you know what is one move that that I really like in this JS if you're working with an API that doesn't have types and you don't know what the API response looks like, normally, what you do is you just console log it and take a look at it, and then maybe you copy paste that object out into some converter and convert types for it.

But what you can do in this case is simply just say, hey.

Run the fetch, console log it, see what you get, then write types for that, then, change it to be, like, an error. Like, make it intentionally break, and then look at what the response for that looks like. And then all of a sudden, you have, like, these these beautiful types, and and you can write a whole function that will go ahead and and fetch everything for you. Yeah. And people who are

allergic to AI stuff, like, you gotta be able to see the utility in that. You know? You're doing that anyway. You're doing that anyway. Also, that's, like, such a bad waste of time. It's something that you need, but you're like the the process of you going to do that, like, that's not helping you. So, like, use the tool that just goes and does it for you. Verify, validate, all that stuff, but you can use the use the tool. It's great. This is this one to me couldn't be any more s tool, s tier. Wes tool s tier, Chrome Developer Tools MCP.

Here's one that I used recently the other day, that I was just blown away by is the Stripe MCP server.

My gosh. I told Stripe to create a product, add it to my my code base or whatever, make a buy now button just for fun. And, man, it went through and just instantly, it took no time at all. It made the I got all the every single thing right about it. I've used Stripe a lot myself, so it's not like, something that I'm just like, oh, okay. We'll see if this works. No. I I told this to create this product in this specific way. And within, you know, a minute, I was I had a a working product in my sandbox, and I was just, wow.

Okay.

This, to me, saved me so much time, again, of going back and forth, hot potatoing things from the UI to my code, adding IDs, whatever.

And the end result couldn't have been better. I found the Stripe, MCP server to just be shockingly super good.

You know, another neat thing like, of course, this is good for for development, but I'm thinking about, like, the amount of tooling, like, internal tooling I've written against Stripe for, refunds, partial refunds, taxes stuff, payment, you know, being able to change somebody's address on an invoice, all of that.

So much, like, crappy internal tooling as well. You know? Like, it's not it's not great UI. It works, you know, and and my assistant knows how to use it. But I just look at this and think, like, how sick would that be just to give her a chat box instead? Or don't even have a Vercel.

You know? And, and, like, of course, you just approve these things, but just, like, before like, as the request comes in, just queue up the chat and propose refund $6 in in Canadian or something like that. And it just, boop, hit the button, and it will go off and do it for you. It's just all that wiring up time

is sold on with a lot of stuff.

Yeah. And and even, like I said, you can create products, create customers, list customers, create prices, invoices, finalize invoice. You can do so much stuff with this.

Create coupon.

This the entire Stripe dashboard is essentially here as an MCP server, and I found it to be just just top tier, excellent, worked really well. If you're working with Stripe in any capacity, throw this in. You won't regret it. I I found this to be just really, really great.

Last one I have here here is less of an MCP server and more of a platform.

Maastra Maastra, however you say it, folks, this is a tool that allows you to build, like, orchestration pipelines of potentially tools talking to other tools. But the cool thing about Maxtra and, the cool thing about it is you can expose and create MCP servers with this.

So I can make my own MCP server that maybe I'm writing with just straight up JavaScript to go and scrape pages or do this or that, or perhaps I wrote a tool that scrapes a page. That tool then uses another tool to save it to a SQLite database.

And then I have another tool that's exposed as an MCP server to use information from that database that I'm then able to call for my application.

So, like, I I built a tool that was scraping MDN and putting the things that I wanted to have from it in a SQLite database. Then I could then use MCP from Claude Node to say, go go grab this, MDN doc. It looks it up from my database, looks up the URL, then uses web search to load that page, then read some of that information. So you can really get totally customized with this thing. The MCP, again, the the server that you're writing can just be stripped of JavaScript. It can be the result of an, an agent. It can be the result of other tool calls, and you can build these things all up and then expose it as an MCP server. And this isn't like a brand new tool. It's new ish, and it's really super good. Another thing that some people might like about this is that there is UI in all of this stuff. So as you're building it, when you're testing these things, you can click around. You can see the results. You can see the returns. You can, you know, run things in parallel branch loop. I mean, it's very powerful tool. Even if you're not using to be its most powerful, features, this thing rolls, and I've been having a lot of fun building my own stuff with it. Yeah. They OpenAI

actually just released something yesterday, a thermal recording, that's very similar to this as well, which is just wiring things up. You know? You can click and drag things together. I still think, like, if this and that kinda drop the ball because this this was their game.

You know? But, yeah, this is this is really cool just to be able to drag and drop and and click things together as you need it. I was I was looking into this as Wes. Because a lot of people are thinking like, okay. I need something like this for my business.

And OpenAI is trying to, like, get you to to bring that into chat GPT or you can host your own. They release this thing called chat kit, which kinda seems similar to this.

But, yeah, a lot of people wanna build these custom flows for themselves, but also give them to possibly the nontechnical audience that they can just

wire things up. Yeah. This to me feels like firmly a dev tool, but then you can expose it as an MCP server to then connect to whatever application you're using it in. So there there's so much here. This thing is really pretty neat. And I found working with it to be generally, you know, there are some iffy things here and there in the docs. It's some new stuff here and there. But, like, in general, I found this to be especially for, like, developers to to feel like, wow. This is a really cool tool. I've I've been really I don't know how much you've had to deal with this, but I I've been really getting into context management.

People call it context engineering sometimes.

And it's like, how do you give the AI enough context to do its job but not too much? Because the more and more you pollute that context, the more and more you get bad results, hallucinated results. You fill up the context, and then it has to summarize. And then, man, I I Wes doing so much with agents and sub agents that were first calling and reading, large MD documents, and then it just, like, wouldn't be able to do anything because that context window would fill up so quickly. So, yeah, Scott of interesting stuff here. These can solve some of those problems, probably worth an episode of its own.

Folks, is there an MCP server that you use in your development that really, really, really helps you out? Is there something that we didn't talk about that you feel like is necessary in day to day development? I wanna hear from you because, man, every single time I find a new one of these, like TypeScript one that makes me, really that excited, I just like, man, this is a this is a really cool place to be where I'm no longer having to go learn and explore some UI. I'm now getting to interact with it in the language. I need a product. It needs to look like this. Give it to me now. You know? Love it.

Beautiful. Alright. Thanks so much for tuning in. Catch you later.