Introduction

[00:00:00]
>> Brian Holt: I'm Brian Holt. Welcome to the complete intro to mcp. I'm very excited to get started with you all on this. This is kind of a new development for me in my career working on AI stuff. I'd kind of been around machine learning and all those kind of previous terms that we used to use, but no longer kinda just used cuz we all wrap it up into AI.

[00:00:21]
But specifically when I started working at my last company, which then got acquired by this company, I started working a lot on AI. So a lot of my biggest customers are the big agent makers like replit and V0vercel create same data button. All of them, they're big users of Neon, which is now owned by Databricks.

[00:00:41]
So today we're going to be talking about one aspect of that which is called mcp. If you don't know what MCP is now, by the end of this class you'll be extremely familiar. Then we'll also be doing some working with some AI, a little bit with agents, but mostly with the model context protocol as we learn to vibe code.

[00:01:03]
And every time I say that, I feel a little bit older. Cool. So first thing, I'm at MCP.holt.courses. That is the course website here. If you see here, I have a second computer. It's literally I have the same website open on this computer. It's just so that I can refer to my notes.

[00:01:24]
So you have all of my notes available to you. They are open source, they're shareable. So feel free to reference this later. Feel free to share it with people that do or do not have frontend Master subscriptions. Frontend Masters is really generous with them letting me open source all these materials.

[00:01:40]
Just a little bit of how this course works. It works like all my other courses, if you ever watched them before. So if you look up here, you'll see welcome, that's the section intro is the lesson that we're on. So if you ever need to jump around in the notes and you're like looking at my video, that's how you would figure that out.

[00:01:55]
So a bit of an intro. I talked a bit about myself, but AI has become a big part of my job. I don't think it's a fad though. I do think that some people kind of overblown what AI is and what it will do. We'll talk about that.

[00:02:10]
I have a whole section on that. But I do think that every person that's embarking on work in tech, whether that be designer, engineer, product manager, executive, is better equipped if they know how to use AI correctly, how to use it well, and also how to build with it.

[00:02:28]
So those are all things that we're going to talk about here and I'm just going to try and share with you all the experience that I have gathered working in this industry for a little bit. So MCP model Context protocol, it's not really that old. I mean, I think it came out in 2024, right?

[00:02:45]
Like mid 2024. It came from Anthropic, which is the maker of Claude, and there had been several attempts to basically, like, expose tools and capabilities to AI and AI agents via different protocols. Like GitHub had one called Participants that we built something for that as well. There was the GPTs and there was that ChatGPT was doing in OpenAI that didn't really work out as well.

[00:03:12]
And then all of a sudden Anthropic dropped MCP and everybody started using it. My company, we launched our McP server in six days after the announcement, and there's two reasons. One, we were just like, we're a nimble team. But two, they're actually really not that complicated. They're actually fairly simple to build.

[00:03:29]
We're gonna build five or six throughout the life of this class, and they're mostly just small modifications of each other. So you'll see it's actually a fairly simple protocol, but that combined with some sort of autonomous agent or LLM is going to produce pretty cool results. But that's really all the MCP server is.

[00:03:51]
It's essentially handing an LLM. Here's a set of capabilities that we're going to allow you to do, and we'll get more into what that means here in a bit. Who's this course for? I'm hoping it's for you. There's really no AI experience necessary to take this course. We'll be going over a lot of it.

[00:04:11]
This course is written in JavaScript and Node JS, so more coding experience is better, but also not necessary. I think you'll still be able to get a lot out of this course, even without a lot of coding experience. I work for a company called Databricks. As you can see here, as tradition, I wear a new hoodie every time that I come back.

[00:04:28]
I was at Neon, which got acquired by Databricks, so that one, I'm not going to count that one, because I didn't actually leave Neon. I just continued working at Neon, but I've been a product manager now for, I don't know, six years or something like that. Before that I was a devrel for a little bit at Microsoft, and then before that I was a NodeJS and JavaScript and front-end engineer for about a decade.

[00:04:53]
I've worked at Snowflake, Microsoft, LinkedIn, Netflix, Reddit, some other smaller startups. I was a VP of product at a brand new startup for a while. I've kind of been all over the industry. Please catch up with me on social media. I dropped my links in there. I am terrible at responding to DMs, so just be aware of that.

[00:05:13]
Where to File issues. There's two repos for this course. There's like a app repo that I built for the sake that we could build an MCP server for as well as the actual course website. And this is where you can open, pull requests, you can whatever you need to do here, file issues.

[00:05:34]
That's all there. So the reason why I asked you to do that instead of sending me a DM is cuz if you're having an issue, probably everybody's having an issue. So it's helpful that I can put those in the issues and refer people to them and or fix them.

[00:05:48]
Okay then I did show you that repo just now for the MCP issue tracker. Go ahead and clone that. We'll be using that kind of throughout the course. This is basically just like a GitHub issue tracker, just like that's all it does. And as always, please start the repo.

[00:06:05]
It makes it more discoverable, which is cool. All right, some setup notes here. You will need Node JS installed, I think. Yeah, I have 2218 installed. I think anything after 18 would work just fine. You'll see that I have funky paths for my node binary. That's cuz I use something called FAST nodemanager.

[00:06:30]
This is like NVM or N or one of those. Or Volta. I don't know why I chose this one. If you're asking me why. It has FAST the name and I like going Fast so we installed that one. It works fine. To be honest with you, I was totally fine with NVM as well.

[00:06:46]
So I really don't know. I believe this course would work with bun, but I did not try it. So buyer beware. I don't think it would work with Deno. Well, maybe recent versions. Extra buyer beware if you choose to try this with Deno. What tools am I using?

[00:07:07]
I just put this in here because I always get asked afterwards. I used to be a PM on VS code, so I did sign a blood oath with Satya that I would continue using VS code. So that's mostly what I use. I also use Cursor fairly regularly which is pretty cool.

[00:07:25]
Which is based on VS Code so it somewhat fulfills my obligation. I'm a Firefox person. Happened for a long time and I actually did start using Ghosty or Ghost Tty. That's from the creator of Vagrant and all those Hashicorp companies he left and he's just making a terminal so it's pretty cool.

[00:07:50]
Mitchell, very nice guy. I use the Dark+ Theme, I use MonaLisa. I actually got reached out to by the Mona Lisa people and say like we actually get a decent amount of people that come to our site and buy it because of you. So they gave me a code to give all of you.

[00:08:05]
I get no kickback on this by the way. I just really like the font so it is quite expensive. But I spend all day looking at this font so I like it. But if you don't want to pay for one Cascadia code right there. It is free, it's open source, it's from Microsoft, does all the same stuff.

[00:08:24]
I do have ligatures enabled, which is like when you put an equal sign and a angle bracket it combines into an arrow. That's called a ligature. I left some notes there on how to enable that. Then I have the VS code icons extension installed which is all the neat icons you'll see on the side terminal.

[00:08:42]
I use zsh, it comes on Mac and I can't be bothered to change it. Dracula theme, Starship prompt which is the nice looking prompt. Yeah, where it says you're on main and you have this package and you're on Node JS that comes from Starship. Then all these special.

[00:09:04]
Obviously JavaScript is not in the font package so you have to use this thing called a nerd font. That's what this is. Something else. This is an AI course. Generally when I've taught these courses before, I've been pretty careful to make them fairly minimally AI involved because I'm trying to impart to you not Claude's experience, but my experience.

[00:09:27]
But due to the nature of this course, this course was infused with a lot more AI. So I'm going to encourage you throughout this course to use Claude and ChatGPT to ask questions about this course. One thing I did for you is I put 100% of the notes into this one very, very long text document so that you can feed that into Claude or to ChatGPT and then you can ask questions about my course.

[00:09:52]
Makes it really easy. You can say like, hey, in this section, Brian was doing this and I can't understand why this isn't working. Can you help me? Usually it'll give you pretty good advice. It's like, I see that Brian did this and you missed this character, or Brian got this wrong or something like that.

[00:10:06]
It's done pretty well for me. If you're doing MCP stuff, that's not beyond what I'm showing you here. They also do the same thing here where they make all of their docs available as one long text document. You can see a lot of companies are starting to do this.

[00:10:24]
We do it at Neon as well. Stripe does it. As you can see here, this is a very long document. I think my course is like 1500 lines of text. This is I think 13,000 lines of code, which is bigger than Claude's context window. So you have to be kind of choosy of what you put in there.

[00:10:45]
But all this to say Claude doesn't. And as you can see, I mostly work with Claude, But I imagine ChatGPT is the same. This protocol is moving so quickly that it loses context really quickly. So I would strongly suggest if you start asking questions about mcp, that you put some of the docs in there so that it knows here's the most up to date information.

[00:11:11]
Otherwise, it will usually give you outdated information.