📱

Get Our Mobile App

Take your business learning on the go!

Download on the App StoreGet it on Google Play

How AI Actually Connects to Your Code

Rafael Negron15:58

Transcription

The famous Carpathy post. Let's go ahead and dig into some more terms of things that we'll discuss today. So, MCP, LSP, SLcomands, and IDE integrations. Workflows is there because I just couldn't get around to not tiling that one while highlighting the others. So, let's go ahead and start with MCP.

Okay, what exactly is MCP? Well, MCP is the Model Context Protocol. Okay, now this is not the same as the Master Control Program from Tron from 1982. Although a lot of people, including a lot of my colleagues, sometimes seem to confuse both of them. And I'm sure in AI you may have as well. So MCP is a shared standard that lets AI connect to tools, data, and workflows. It removes custom integration work. It makes AI more capable, and it allows AI to take real actions and not just chat. Like USB standardizes device connections, MCP standardizes how AI connects to different systems.

So, let me go ahead and explain this in a drawing. Earlier on in a couple of videos ago, we talked about tools, right? And this is just the way that I see it. Let me actually start from the left-hand side here. So, tools, the way that I understand it, are just the, let's say, individual entities, the smallest, the smallest unit of work, like a function that the AI can use. So something might be, you know, get logs or update PR, let's say, right? Or something like read document if you're reading from some internal document maybe hosted in Confluence or something Atlassian, right? So if we continue in this case, we also learn about something called a plugin. Okay, now a plugin is really just a collection of all these different tools. So you can imagine that you have something like a Splunk plugin. So this one coincides with the get logs. You might also have something like a GitHub plugin. So this exposes all the tools from GitHub. And then you might have something like read document, right? So this is the Confluence plugin. Okay, so it exposes all these different tools.

Now, the way that I understand it with MCPs is MCP is just the protocol. Okay, it gives agents the ability to talk to these tools externally. So you can have a couple of different servers, for example, each that implement MCP so that your agents can talk to it. And you can imagine again, you have the Splunk MCP server, right? So let's, let's just say Splunk MCP. You have the GitHub MCP, right? MCP. And then you have the Confluence MCP. And the cool thing is now you can have your agent in here talking to all these external tools. So, just right off the bat, you've given, you've extended your agent now, and it has all these new capabilities. And furthermore, you can even extend this and create like a custom MCP that maybe interacts with whatever data or other external tooling that you want. So in the same way that something like, I said earlier, USB might standardize the way that we can connect different devices, MCP does the same thing for your AI agents, right? It makes it very easy to communicate with these external tools. Imagine, for example, you had, you know, your your TV here. Let me just say TV. Maybe you have your phone charger, right? Anything that that depends on USB. You had some other appliance here that has USB, like your charging, I don't know, like a a weight scale, like a food scale, right? Imagine you needed a different connection for this, like this requires one connection, this requires some other connection, and finally this one, you know, requires a separate connection. It wouldn't be very helpful to have, you know, three different USBs all for three different applications or devices. It just makes it very complicated. So, this is something that MCP attempts to solve, right? It's a protocol that makes it very easy for your AI AI agents to communicate with these external tools.

Now, one of the best things that I've used to learn about this is this awesome website right here. It's just the Model Context Protocol website where you can learn a lot about MCPs. One of the things that I've been going through myself is just building an MCP server. And I really do think that by going through an exercise like this yourself, you can understand exactly how MCPs work. You can see that you'll build a couple of different tools. You'll even connect it to something like an MCP client. In this case, you're using Claw for desktop, but that can really be any MCP client that you're familiar with. I would highly recommend for you to go through an exercise like this, and I'll link to this website in the description below.

Okay, cool. So, that's all about MCPs. Now, let's get into the second one, which I think is pretty cool. Okay, so a Language Server Protocol, a Language Server Protocol is a shared protocol that lets editors talk to language intelligence. It enables autocomplete, go to definition, error detection, and refactoring. And why does it matter? It implements language intelligence once, and you can use it in many editors. And here's an analogy. If USB standardizes how devices connect to computers, LSP standardizes how editors connect to language.

Okay, so going back to our drawing board right here, let me just remove all this. Or maybe an easier thing would just be increasing or panning out to something different. Imagine for all the different languages. Okay, so we have something like Python, we have something like TypeScript, and we have something like Go. Imagine you have all your different favorite IDEs, right? You have your VS Code, maybe you have here IntelliJ, or down here you have something like Eclipse. Imagine any single time that one of these vendors wanted to add some support for a language, they all had to do it independently. So VS Code, they had, they needed to do things for TypeScript. IntelliJ needs to do things for TypeScript. Eclipse needs to do things for TypeScript. You know, imagine it was the same for Python, where VS Code needs to do things for Python, IntelliJ needs to do things for Python, Eclipse needs to do things for Python. You can see how this can get messy very quickly.

So instead, there is a language server that LSP-compatible editors can leverage and they can interact with. So now you can imagine there is a, let's say, TSLS, there's a TS TypeScript language server, there is the Go language server, and there's a Python language server. Okay. And now what we can do is, let's say contributors or different vendors. I'm just drawing some people here. Different vendors can make all sorts of changes to all these different language servers. Okay. Whoops. Not sure what happened here. They can make all sorts of changes to all these different language servers. And the cool thing is by making the changes to the language server. Now we have all the different IDEs again. Let's just talk about Visual Studio. Let's say maybe Eclipse, for example. Whoa, what happened there? My handwriting is crazy today. Eclipse down here. Now they can all take advantage of all these great changes that all these contributors made or that was made to the system. Okay.

And now one thing I want to do real quick is actually bring this up a little bit in Visual Studio Code itself. So if you give me a second here, let me bring up this window. This is one thing I actually haven't done live before, but I'm hoping that it just works now the first time. Let me open. I'm doing some things in the background here, but you just have to, you just have to bear with me here. So, let me go to the browser view here. Let's go ahead and see if I can actually just modify this. Should hopefully just work. Let's see. Application capture. Application. Oh, wrong thing. Display capture. Oh, I think this is it. So, this is going to give us now VS Code. Just going to make a new folder here. I'll call this one TS playground. And what are we going to do exactly now? I'm going to open this up right here. Let me close all these panels out here. Let me close this one, too. The first thing I'll do is I'll just create a very dummy TS file, index.ts, with no content inside of it. I'll also open up the integrated terminal here. Oh, sorry, that was the wrong button. I'll open up the integrated terminal here. I'll do `npm init -y` just to set this up, initialize npm very quickly, and I will also install TypeScript. Do that. And then finally, I will access the T I will access `tsc` directly from the bin folder inside of node modules and I'll just initialize just an empty TS config or not the not an empty TS config file, but the default one you just get when initializing it through `tsc`. And now here's one of the cool things. If I open up the command palette, you can see there's TypeScript: Open TS Server Log. And look at all this information right now. Okay, this is all information about the language. This is what gives it that those unique features like autocomplete, go-to detection, error detection, refactoring. There's all this information about the language that you just get that's built directly into this IDE, and it's a server again that multiple people can contribute to, right? So, if you want to make changes to this language server, you do it once, and then LSP-compatible language server protocol compatible editors can take advantage of those changes. So, I thought this was something that was very cool. I've always heard about language servers before, but never really had the, let's say, opportunity to dive really deep into them. And I'm not saying I did for this video, but just going through a simple exercise like I just did right now and seeing the logs, I think that was actually something pretty cool.

So now let's talk about how this all integrates with AI. So going back to the presentation here, right, Language Server Protocol. Now let's go to LSP with AI. So now it's a standard way for AI to access real code intelligence. So it gives AI definitions, types, references, diagnostics, and it matters because it anchors AI in actual code structure and reduces hallucinated edits and it makes refactoring safer. So if MCP connects AI to tools, you can imagine that LSP connects AI to your code. So an AI coding assistant like Copilot, for example, can ask the language server for symbol definitions, request references, and understand type information. So instead of guessing and hallucinating, it can access the LSP. So the way that I understand it is sort of giving your AI agent a little bit more help about your codebase and the language that you're using. Imagine that now the AI has this contextual information. So anytime you make changes within your code or you want to find references, you want to get type information, now your AI is enabled because of the language server to be able to get that information. So for me, it's just more context, an added layer on top of a of AI that gives you very specific and useful information about the language that you're currently working with. Okay. So, it's all about giving AI more context and really giving it what it needs to be able to get the job done. So, I thought that was very cool seeing how LSPs, language servers, and AIs all communicate together to be able to just make you a more efficient programmer.

So, let's go ahead and learn more now. Okay, the next thing here is slash commands. I think these are pretty straightforward, but just go ahead and learn about them. So, slash commands are named commands that trigger specific tools or workflows. Okay, they make intent explicit. They reduce ambiguity and they respect permission boundaries. So there's two types of people that define them, right? Developers like custom agents and apps. And I actually want to pull up an article here directly from Claude. Let's see again if I can go back. Okay, it looks like that worked the first time. So, extend Claude with skills, right? So you may have heard of skills before, and we did talk about this in a previous video. The way that skills work are just imagine I give you a set of tools. Okay? So you have a hammer, you have a a Phillips screwdriver, so on and so forth, and you as an AI have all the tools in front of you, and maybe with the right prompt and the right context, you can sort of make guesses as to when and how to use the tools, maybe due to their name or their description. But what a skill allows you to do is sort of combine all the tools into a nice little package that can then be invoked by the AI. And when that skill is invoked, it has the right prompt, it has the right context, it has the right set of tools that it can use to get that job done very well. It's very good at doing that one thing. So you can imagine maybe you have a top-level agent orchestrating many sub-agents, each with their own very unique and distinct skills that allow it to get the job done that much better. Whereas maybe before you just are solely relying on a prompt and the AI to be able to infer based on a list of tools that are available what it can do. Okay, so that's what skills are.

Going back now to our skills document here. The reason I bring it up is because down here you can see that it says that the name field becomes the slash command and the description helps Claude decide when to load it automatically. So you can see we have this skill marked out file. Let me see if I can just zoom in here a little bit more so that anyone on YouTube or anyone on mobile maybe can see it a little better. I'll darken this a little bit too. So you can see the name is "explain code" and it can be invoked in multiple ways. Right? You can ask it "how does this code work?" or you can just use the slash command directly. And this is really cool, right? Why is a slash command so helpful? Because now with a slash command, we're not leaving the intent up to the AI. You have your slash command. It invokes a skill, and now it's a very particular way of doing something. So slash commands, just like you may have seen maybe in like a Slackbot or an application in Slack that you can interact with that's like a slash command, or maybe you make like a CLI tool that has its own unique switches and things like this. Different commands can help your AI just interact with other tools in a lot more of a deterministic way. Sorry if you hear my dog barking right now. He's just, he's a dachshund, so he he tends to bark a lot. But anyway, hope that all sort of explains what slash commands are.

And now finally wrapping it up. Let's go right into IDE integrations, which again, fortunately, is very easy to grasp. Okay, so now IDE integrations, it's AI built directly into your editor. So it understands your open files and workspace. It sees the project context and Git state and it suggests and edits code in line. So how does it fit? Well, you have your editor extension. You have your AI agents and your tools and systems like APIs, MCP, and workflows. And it's like having a CLI coding partner inside your editor. So again, if I go back to Visual Studio Code, which I think I should be able to now, just going back here, we can see right, you can open up your AI right here and you have everything directly built right inside of your IDE. Imagine if you actually had to step away from the application, ask some questions, copy the output, paste it back into Visual Studio, or, you know, it makes working with AI a lot more difficult. But having everything directly inside of the application, right, you can configure the different modes, you can configure the different models. It just makes working with AI that much more easy and a lot more enjoyable having everything in a single sort of application. You don't have to context switch so much.

So that's really it. With all that being said, we've covered MCP, LSP, slash commands, and also IDE integrations. There's a lot that we've covered in all these three series, and I promise you, I am still nowhere near being an expert, and I probably never will be, but I have certainly learned a lot just by making these videos myself. One of the main reasons I do them is just to learn in public, and my hopes are that by me talking about it, I can reinforce the ideas more myself and hopefully engage the audience, right? Engage in some discussion. You know, I would love to hear from you all. Thank you to everyone who has subscribed and commented and liked the videos. That really, really motivates me, and I'm very excited to continue making videos here. But that's really it. You know, the first time I saw that post from Andre, I was very, very confused. Okay, if we go back to it, let's just revisit that that post. When I, when I saw this post for the first time just a couple of weeks ago, I was absolutely overwhelmed. Okay, and it's okay to be overwhelmed. There's so many different things happening now. But now I understand this, okay? After just a couple of weeks of messing around with it, getting my hands dirty at work, talking about it here on YouTube. So, if you feel overwhelmed, I'm here to tell you that it's okay. A lot of us are learning about this. This is really the wild west. So, just keep an open mind. Keep working hard. Keep learning about it, and you will be fine in this AI age that we're all experiencing together.

Okay, so that's pretty much it. I'm going to be making more videos on the on the channel. Let me know what you thought about this one, if there's any more content you'd like to see. But until then, hope you all have a great rest of your Sunday if it's Sunday and you're watching this, or week. And I will see you all next time. Later.