
Lesson Description
The "Vibing with Claude Code" Lesson is part of the full, Complete Intro to MCP course featured in this preview video. Here's what you'd learn in this lesson:
Brian Vibe codes a Todo application using the MPC servers added to Claude Code. After reviewing the application, Claude Code is instructed to add a dark mode feature and submit a PR to the repo.
Transcript from the "Vibing with Claude Code" Lesson
[00:00:00]
>> Brian Holt: So now in my directory I have this big old prompt and I'm going to say Claude here and I'm just going to post that business in there and say, yo, Logo. Now this might take a while because it's got a lot of stuff to do. Also, be mindful that Claude code uses a lot of tokens.
[00:00:28]
So if you are on, if you're paying for this right now or you're on a PRO account and you don't want to burn all of your tokens, don't follow along with this part because this cloud code uses a ton of tokens by default it uses Opus, which is a much bigger and much more expensive model for you to use.
[00:00:46]
But it does make cool stuff. So you can see here, I'm just fascinated by this tool.
>> Speaker 2: Just a heads up, Brian. It defaults to Sonnet if you're on the plus plan and Opus if it's Max.
>> Brian Holt: That's good to know. So, yeah, it's gonna start asking you questions.
[00:01:09]
I mean, I don't know if we're going to sit here and wait for this to happen because this does take a long time. But yeah, you can say yes. You can say yes and don't ask again because that's probably not a bad idea. Actually, it's a terrible idea.
[00:01:21]
But I just always say yes because I mean, if we're being super honest, I'll just say go and then I'll start doing something else on my computer and I'll come back. Yeah, sure, whatever. Cool. So let's go ahead and open this. We let this run for a little while and I answered yes to a lot of questions and didn't really read them.
[00:01:42]
I was vibing, as we say, and we ended up with something like this. So it came up with its own instructions. Let's close this of how do you run it? What other things do we need? It used Neon. It used Neon Auth, which is Stack Auth, which is a different company that Neon contracts out with.
[00:02:08]
It came up with its own TS config. You can see here's some of the packages that used React, Tailwind, Zod, next Eslint. It's all TypeScript based. It's fairly well laid out, the code makes sense. It's all really cool that it's able to use like Stack Auth. Okay, cuz it's a fairly new piece of technology.
[00:02:37]
Again, I'm pretty impressed with the stuff that it puts out. It's all usually pretty readable, but now we have all this done. Let me remove, because this is all tied to a GitHub already. Or I can just have it do that. So let's open our Ghosty. Where am I?
[00:03:02]
Make sure I'm in the right one. Okay, I am. So I'm gonna open Claude again. Let's say Claude MCP list, make sure all my stuff is still working. So Claude, and then I'm going to say use Playwright to make sure the login works. Okay. So it's going to make a plan for it.
[00:03:39]
It should eventually spin up Playwright, which should open Chrome. It should get back some screenshots from it. Yeah, sure, I don't care, whatever. So it sees that the server is running, it's going to spin that up. So that is our app that it generated. So you can see here, it's actually running stuff behind the scenes here.
[00:04:34]
Test user. It's putting in a password. This is the power of mcp, right? There's a Playwright MCP server that it's interacting with to actually be able to test this. Then it's getting screenshots back and evaluating. Did it do what I thought it was supposed to do? No, it's Chrome.
[00:04:56]
Why would I want to save that? Pretty cool, right? It's cool that my agent is testing itself. So it's signed up, it's gonna test, log out, all that kind of stuff. I'm going to stop it now because I don't really care. But we'll get back into this and say, file a GitHub issue for dark mode, wax poetic about it and make sure that everyone knows that dark mode is critical to business success.
[00:06:07]
I think I've already connected this to a GitHub repository. We'll see. I think I did. So it should be able to come to Bthold/Todoer. We should see one in here. You can see it's able to commit for you. It's able to push, it's able to open pull requests.
[00:06:26]
We're doing one thing, which is filing an issue, but it can really manage your entire GitHub experience. Then again, I love the fact that I can say, go create this issue. Go create a plan of how to solve it, then open that issue. And then later I can come back and say, okay, now open a pull request that fulfills this issue.
[00:06:41]
And it just goes back and forth. And so you don't end up, like, not really interacting with Claude a lot. You end up, like, leaving comments on issues and then telling Claude to go do that. It becomes a much more human way of Interacting like a way that we've already been interacting with Claude.
[00:06:59]
Yeah, here we go. It wrote a manifesto according to it. My God, the Dawn of Darkness. I'm thoroughly enjoying this. As you can see. It's just straight up made up statistics. I just love that you could really just say, okay, now go fulfill issue number two from GitHub and open a pull request.
[00:07:35]
It's gonna go do that. It's going to go pull that issue. I'm going to implement dark mode for it and it's just going to go do it. Gives you the plan goes through and does it? Yeah. So with Neon, I would just say like, hey, I need to add this to my database or I need to add 10 more test users to this.
[00:07:58]
It's all stuff that the Neon MCP server can handle for. Yeah, sure, whatever. I don't care for the context 7 1. It's just useful for, I'm working with this bleeding in feature or something that's like very prone to get wrong. Like MCP is actually a great example of something that Claude code is actually very prone to get wrong.
[00:08:21]
It's like, hey, make sure you're using context 7 when you're coding this MCP server to make sure that you're using the most up to date information. Yeah, look, it figures out that if there's already dark mode CSS variables, it goes and does that. It's going to go and end up opening a pull request.
[00:08:39]
Sure. I'm, like I said, thoroughly impressed, particularly for something I just need to get done and get done quickly. I was writing a campaign website for one of my friends that decided to run for city office. What's hilarious is I was on the call with him for like 30 minutes.
[00:08:58]
Let's just talk about what he wanted to do, what he'd put on his website, me a big doc of everything that he was thinking about. And I just like threw that at Claude code with all these MCP servers and just said go. And by the end of our conversation, I sent him the website for what he was thinking about and he's like, what is this black magic?
[00:09:16]
I was like, this is me being profoundly lazy, that I don't actually want to go do this myself. I just let AI write all of this and it turned out really well. Jury's out, he's still running. So I don't know if he's going to win yet, but I at least fulfilled everything that he wanted out of it.
[00:09:33]
There you go. Addressing the Critical business need Retina friendly.
>> Speaker 2: This is more of a general question, but there's versioning for MCP servers. It looks like it's semantic versioning was that anytime there's a new tool you would bump up. How does versioning work for an MCP server? It's considered a breaking change since an LLM is gonna prompt you for the input it needs anyways.
[00:10:05]
>> Brian Holt: I would just treat it like you treat APIs right? Just judging on, if you had an agent relying on this shape to exist previously then I would do that and just kind of rely on patch minor/major. So if you're just adding something or fixing something then patch it.
[00:10:24]
If you are just adding something but not breaking anything then it's minor. And if you're removing or deprecating or something like that, I don't know if any of them are actually going to observe the semantics of it because people are so unreliable about versioning anyway. I guess really the answer to your question is this is no different than normal API versioning or SDK versioning.
[00:10:53]
I don't think that the LLMs have any particular logic around how that works. I think it's actually more for humans. But the more important thing is that it changes so that the LLM knows to not use the version that it has that it needs to go get it again.
[00:11:06]
This is pretty cool though, look, put screenshots on this. That's something I wouldn't do. I'm way too lazy for that. It added a drop down menus, theme toggles. Looks very reasonable, right? All right, very cool.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops