Speaker 1: In today's video, you'll learn how to build a VS Code extension from scratch. We'll turn VS Code into our own AI assistant, powered by DeepSeek R1 running locally. By the end of this video, you'll be able to cancel your $200 ChatGPT Pro subscription and experience the sweet taste of freedom known as open source. In fact, the recently fired CEO of Intel did exactly that, who tore out OpenAI from his tech stack and replaced it with the real OpenAI, DeepSeek. Unless you're just waking up from a coma, you've likely already heard of DeepSeek R1, the low cost open source reasoning model that's on par with OpenAI's R1, built by a good bunch of dudes known as the Chinese, and within a week has become the top app in the App Store, which made big tech big mad and made stonks go down. The world is healing, but there is a problem with DeepSeek. If you use the web UI, you're agreeing to send your prompts, your keystrokes, and your data to China. However, you can get around this by running the model locally, in which case no connection to the internet is required. And that's exactly what you'll learn how to do right now. We'll start by running the model locally with Ollama, then instead of chatting with it in the command line, we'll create our own custom VS Code extension that allows us to chat with it directly in the editor. And that's awesome, because it provides a foundation that you can build on to add additional features to build your own custom cursor style editor, and you might be surprised at how easy it is to extend VS Code to do what you want. First, we need to generate a project, and when building an extension, VS Code already has an official starter template. Go ahead and run it with this npx command, then it will take you through a series of questions and we can stick with the default options here. Once that's done, that'll bring us to the starter TypeScript template. In the source code, we'll find an extension.ts file that imports a global VS Code object. On this object, you'll have access to the entire VS Code API that allows you to customize essentially anything in the editor. Like for example, if we type vscode.window, you'll see there's all kinds of different functions on here that allow us to do things like show an error message, open a dialog, open a terminal, and so on. Now from there, let's take a look at this activate function, which is basically a lifecycle hook that runs some code when the extension is first initialized. Once initialized, we can then start making customizations. And the typical place you might interact with an extension is by registering a command. Like here, I have a command of hi mom, and when that command is executed, it runs this callback function that will use the VS Code window to show an error message, because mom is currently in heaven. But when registering a command, one other thing we have to do is go into the package JSON and make sure that we have it registered there with the exact same name. And that's all it takes to build a basic extension. But now the question becomes, how do we actually test and debug it? Well we could use the compile command to compile it and install it locally, but the better option during development is to use the debugger. When we run the debugger, you'll notice it pulls up a new VS Code with our extension installed. If we open the command palette with Ctrl-P, we should see the command that we registered, and then it should bring up that error message if we run it. Congratulations, you just built a VS Code extension. But now it's time to shift gears to DeepSeek, the AI model that we want to integrate into this extension. To do that, I'm going to use a tool called Ollama, which you'll need to go ahead and install if you don't already have it. It's a utility that allows you to download and run open source AI models. Not just DeepSeek, but also Llama, Gemma 2, Mistral, and many others. On the DeepSeek R1 page, notice how there are many different model sizes, where b represents billions of parameters. Generally speaking, smaller models are faster but dumber, while the larger models are smarter and slower. In a perfect world, we'd all run the 671 billion parameter model, but it's 404 gigabytes and will require some good hardware to actually run. If you're not sure what your hardware can handle, start with the smallest model, and then test out bigger models from there. And now all we have to do is copy this command and run it in the terminal. On the first run, Ollama will automatically download the model to your local system, and then eventually pull up this chat dialog. Pretty cool, and now you're running DeepSeek locally with absolute freedom. You can even integrate this model into a paid application and make money from it without restriction. But what if we don't want to interact with the model from the terminal? Well luckily, Ollama has a REST API and also a JavaScript SDK to make it even easier. Install Ollama with npm, then let's head back into our TypeScript code to take advantage of it. Oh and before we do that, you'll also want to add the DOM lib to your TypeScript config, otherwise TypeScript will yell at you. Now that we have that done, we can go back into our extension TS file and register the command just like before, but this time, the first thing we'll do is create a panel by calling the VS Code window createWebViewPanel function. This panel will contain the chat dialog that we can use to chat with DeepSeek. Now this panel contains a web view that we can customize with regular HTML. I'm going to go ahead and define that HTML in its own separate function called getWebViewContent, and the UI is really no different than a basic web page. We have a text area and a button. The interesting part comes into play in this script tag, but one thing that's making this video suck right now is that there's no syntax highlighting on the code, because I'm writing this HTML in a string literal in a JavaScript file. Well we can actually fix that with a VS Code extension. VS6 string HTML allows us to use this HTML comment on a string literal to get syntax highlighting directly in a JavaScript file. And now we can look more closely at the JavaScript code inside this HTML code inside this JavaScript code inside the VS Code editor, which itself is built with JavaScript, where we first connect to the VS Code API, which then allows us to post messages back and forth with the chat. The first thing that'll happen is the user will type a prompt into the text box begging our Chinese AI gods for help. To capture that event, we'll listen to a click on the ask button, which will get the text content from the form, and then send it over to VS Code with this postMessage method, and then identify it with the name of chat. That's how we pass a message to the WebView. Now we can go back to our activate function and listen to it. On the WebView, let's define a callback for onDidReceiveMessage. If the message command equals chat, then we know we have a user prompt, and we can pass that message to Ollama. In this case, it will specify DeepSeek R1 as the model, pass it the message, and set stream to true. By streaming the response, it'll give us the text sentence by sentence instead of waiting for the entire thing. To display that stream in the UI, we'll use forWait to loop over it asynchronously and add the message content to the response text. Now every time we get a new part of the stream, we'll also want to post a message back to the UI, which allows us to display the response from the AI to the end user. And that means the final step is to listen to this chat response message in the actual UI. To do that, we'll go back to our script tag and add an eventListenerForMessage that will take the text from the chat response and set it as the inner text on a div in the actual HTML. Congratulations, you just built your own Chinese AI powered IDE. Let's go ahead and test it out by running the debugger. That'll bring up the other VS Code window, then we can open the command palette and run the command, which in turn will bring up this new window where you can chat. When you prompt it, it should then stream the response from DeepSeek in this div. I'm using the 7b model here, and when I ask it an easy question like binary search, it provides an acceptable solution, and as a bonus, it's extremely fast. But it just goes to show you how easy this stuff is to implement, and in fact, you could have DeepSeek build you your own DeepSeek powered IDE from scratch. But if you want to go deeper and get really good at programming while supporting my work, consider upgrading to a pro membership at Fireship.io. You'll get access to all kinds of different project-based courses, but most importantly, you'll build a foundation to understand what the hell the Chinese AI gods are actually doing when they write your code for you. Thanks for watching, and I will see you in the next one.