Vibe Coding Tools

[00:00:00]
>> Brian Holt: So Vive coding is really just adding a bunch of MCP servers to some sort of MCP client that has the ability to access the local file system and just saying, go, get it done. That's kinda what vibe coding is. So I'm gonna give you some options to get started here.

[00:00:16]
We are going to use cloud code today because it's the one that I've used all these quite a bit and I know it's blasphemous to say that it's not VSCode, but cloud code is very cool and it works really well. But Cursor can do this. I use Cursor at work.

[00:00:30]
Windsurf is awesome. Zed has some cool features that if you haven't played with Zed, but there's a ton of them out there now for doing this. Since I wrote even this page, which has been out, I don't know, I wrote this like two weeks ago. It was very recent.

[00:00:42]
There's one called Crush that came out that I'm kind of enamored with as well. I've only briefly played around with. It's very Claude Code esque. And if you're into Vim and all that kind of stuff, Crush does some really cool stuff as well. So obviously Claude code is very tied to Claude.

[00:01:04]
There's also one for Gemini's I think, AI Assistant or something like that, right? That does it with Gemini instead of Claude code. Crush is one that can do it across a few of them. So feel free to try any one of these, but let's go ahead and try it.

[00:01:20]
Well, I'm gonna do it with Claude Code. Yeah, what is AI Toolkit? Yeah, this is another one that you can try out as well. Again, not all of these are free, so I was pretty cognizant of which ones I tried to choose so that most of this could be free to try out.

[00:01:46]
But today I'm going to be using the GitHub MCP server so that I can be able to create issues, open pull requests, do all that kind of stuff. I actually really like Linear for project management kindastuff and its MCP server is definitely state of the art as well.

[00:02:02]
So definitely try that one. We're going to be using Neon. I have reasons that I like Neon, mostly because I work on it. But yeah, just to very transparently disclose, this is what I work on at work. You don't have to use this one. There are other great database MCP servers out there that are slightly inferior, just like a little bit.

[00:02:26]
But feel free to be the judge of that, you can be wrong. Though I try to rank these a little bit in terms of the impact on my work. The GitHub one is huge or linear. You can basically what we were talking about before, where you can say, create an issue on this.

[00:02:44]
Save this here, open the pull request here, read this pull request, criticize this, do these things. It's this extended memory and knowledge of what's going on in your code base, how people are working. It interacts in there like a human. Because you're kinda telling us, all right, open this issue, put these steps in there, very cool.

[00:03:08]
The Neon one is probably next. Just because it allows me to say, go, read this from the database. Create something that looks like this and interacts with this table. Hey, pull this out of here. Tell me what this data looks like. Hey, go grab me the first 30 rows out of this so I can see what it is.

[00:03:28]
I'm going to give you probably two more times before this course is up. Be cautious with this because it has access to your database. So if you're giving it access to production, with write access, agents will do stuff. And it can be scary, right? And in particular, if you're using a lot of MCP servers, if someone like supply chain attacks one of them, they could get nefarious code in there.

[00:03:52]
They could like dump your database, they could drop your table. Just be very cautious of like how you combine like the Neon MCP server with other MCP servers or with agents, right? I'll throw out here. It's a really good idea if you're working with agents, to work with orms.

[00:04:13]
I used to not recommend orms, but ever since Prisma kind of came on the scene and they modernized orms, it became a good idea again. My favorite now is Drizzle. Works extremely well with Neon. They actually let us directly commit to it. So the stuff that is Neon in Drizzle came from us.

[00:04:34]
And it's not just us, there's other companies that get to contribute as well. If you do do that, add things like do not modify the migrations directly, only use Drizzle. You have to put in there several times. Use Drizzle, don't do it yourself. The playwright one is very cool because you can say, hey, go open this page and make sure that it works, or write an integration test that makes sure this works.

[00:04:59]
It's very cool that it can pop open a browser, do a bunch of tests, and then close itself down. So that's a very cool one. Context 7. This is from our friends at Upstash which does Redis as a service and stuff like that. They basically made a rag database of everyone's docs and they keep it very, very up to date.

[00:05:21]
So this is basically just like a superpower for an LLM to go out there and grab all the most modern docs. We talked a little bit about this earlier, like Neon Auth is a really new feature for us and so it hasn't been really picked up in the training data for like Claude and ChatGPT, but it is in context 7.

[00:05:41]
So like if you're working with something really new, it's really good to say, hey, use context 7 for this feature to make sure that you're getting the latest, most up to date things. I really wanted to show you Figma. The Figma MCP server is so cool, but it is not free.

[00:05:58]
So I'm not gonna show you that today. But you can basically load your design system in or load any design system that's open source in there and say, okay, code this, follow this design system. And then I have this mock that I made for you that looks terrible, that looks like a child drew on a napkin.

[00:06:15]
But make it cool looking. And now go and with the Figma MCP server plus Cloud code, it works really, really well. So if you have some time and you're okay paying a little bit of money, this is very cool to play with. So I left the docs there.

[00:06:33]
There's several deployment targets that have MCP servers. I work a lot with Vercel and Neon works really well with Vercel. They don't have a streamable HTTP one at the moment, so it didn't work with Claude code very well. So we're not gonna show you that today. But that's another one you can go play on.

[00:06:58]
Yeah, yeah, and you can definitely say like, hey, I don't have a Vercel MCP server, please write one for me. And it usually does a pretty good job.