I built a DeepSeek R1 powered VS Code extension…
BFBeyond Fireship@beyondfireship · 463K subscribers
- Views
- 664K
- 664,460
- Outlier
- ×2.1
- Median 316K
- Length
- 7:02
- Published
- Jan 28, 2025
- Tuesday
- Comments
- 876
- 33.2K likes
Script
How it's written
- Words
- 1,688
- Words a minute
- 239
- Reading time
- 8 min
- Segments
- 5
The hook
0:00–0:25in today's video you'll learn how to build a VSS code extension from scratch we'll turn VSS code into our own AI assistant the powered by Deep seek R1 running locally by the end of this video you'll be able to cancel your $200 chat BT 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 open AI from his Tech stack and replaced it with the real open AI deep seek unless you're just waking up from a coma you've
Structure
in today's video you'll learn how to build a VSS code extension from scratch we'll turn VSS code into our own AI assistant the powered by Deep seek R1 running locally by the end of this video you'll be able to cancel your $200 chat BT 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 open AI from his Tech stack and replaced it with the real open AI deep seek unless you're just waking up from a coma you've likely already heard of deeps gar1 the lowcost open source reasoning model that's on par with with open AI o1 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 STS go down the world is healing but there is a problem with deep seek 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 olama then instead of chatting with it in the command line we'll create our own custom VSS 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 VSS code to do what you want but first we need to generate a project and when building an extension VSS 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
Watch from 0:00Imports a global VSS 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 vs code. 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 dialogue open a terminal and so on now from there let's take a look at this activate function which is basically a life cycle 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 hom and when that command is executed it runs this callback function that will use the VSS 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 pallet with control 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 VSS code extension but now it's time to shift gears to deep seek the AI model that we want to integrate into this extension to do that I'm going to use a tool called olama 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 deep seek but also llama Gemma 2 mistol and
Watch from 1:30many others on the deeps r one 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 GB 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 olama will automatically download the model to your local system and then eventually pull up this chat dialogue pretty cool and now you're running deep seek 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 AMA has a rest API and also a JavaScript SDK to make it even easier install olama 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 create web view panel function this panel will contain the chat dialogue that we can use to chat with deep seek 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 get webview content 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 the script tag but one thing that's making this video
Watch from 3:01suck 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 es6 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 will 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 post message method and then identify it with the name of chat that's how we pass a message to the web view now we can go back to our activate function and listen to it on the web view let's define a call back for on did receive message if the message command equals chat then we know we have a user prompt and we can pass that message to olama in this case it will specify deep seek R1 as the model it 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 four weight 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
Watch from 4:32actual UI for that we'll go back to our script tag and add an event listener for message 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 chines AI powered IDE let's go ahead and test it out by running the debugger that'll bring up the other VSS code window then we can open the command pallet 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 Deep seek 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 deep seek build you your own deep seek 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 iio 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 thank for watching and I will see you in the next one
Watch from 6:03Full transcript
- 0:00
in today's video you'll learn how to build a VSS code extension from scratch we'll turn VSS code into our own AI assistant the powered by Deep seek R1 running locally by the end of this video you'll be able to cancel your $200 chat BT 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 open
- 0:20
AI from his Tech stack and replaced it with the real open AI deep seek unless you're just waking up from a coma you've likely already heard of deeps gar1 the lowcost open source reasoning model that's on par with with open AI o1 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 STS go down the world is healing but there is a problem
- 0:40
with deep seek 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 olama then instead of chatting with it in the command line we'll create our own custom VSS code extension that allows us to
- 1:00
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 VSS code to do what you want but first we need to generate a project and when building an extension VSS code already has an official starter template go ahead and run it with this npx command then it will take you through a series
- 1:21
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 VSS 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 vs code. window
- 1:42
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 dialogue open a terminal and so on now from there let's take a look at this activate function which is basically a life cycle 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
- 2:04
like here I have a command of hom and when that command is executed it runs this callback function that will use the VSS 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
- 2:25
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 pallet with control 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 VSS code extension but now it's time to shift gears to deep seek
- 2:46
the AI model that we want to integrate into this extension to do that I'm going to use a tool called olama 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 deep seek but also llama Gemma 2 mistol and many others on the deeps r one page notice how there are many different model sizes where B represents billions
- 3:07
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 GB 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
- 3:28
the terminal on the first run olama will automatically download the model to your local system and then eventually pull up this chat dialogue pretty cool and now you're running deep seek 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 AMA has a rest API and also a JavaScript SDK to make it even easier
- 3:50
install olama 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
- 4:10
create web view panel function this panel will contain the chat dialogue that we can use to chat with deep seek 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 get webview content 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 the script tag
- 4:30
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 es6 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
- 4:51
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 will 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
- 5:12
from the form and then send it over to vs code with this post message method and then identify it with the name of chat that's how we pass a message to the web view now we can go back to our activate function and listen to it on the web view let's define a call back for on did receive message if the message command equals chat then we know we have a user prompt and we can pass that message to olama in this case it
- 5:33
will specify deep seek R1 as the model it 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 four weight 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
- 5:53
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 for that we'll go back to our script tag and add an event listener for message 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
- 6:15
chines AI powered IDE let's go ahead and test it out by running the debugger that'll bring up the other VSS code window then we can open the command pallet 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 Deep seek 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
- 6:37
fast but it just goes to show you how easy this stuff is to implement and in fact you could have deep seek build you your own deep seek 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 iio 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
- 6:58
your code for you thank for watching and I will see you in the next one
Description
Learn how to build a VS Code Extension from scratch. In this fun tutorial, we integrate DeepSeek R1 direction into our editor to build a custom AI assistant.
Go Deeper https://fireship.io/courses
Related Content:
VS Code Extension Template https://code.visualstudio.com/api/get...
Ollama DeepSeek R1 https://ollama.com/library/deepseek-r1
DeepSeek R1 First Look • This free Chinese AI just crushed OpenAI's...
DeepSeek Fallout • Big Tech in panic mode... Did DeepSeek R1 ...
More from Beyond Fireship
×6.45:04Subtle, yet Beautiful Scroll Animations
Beyond Fireship2M views
×2.98:33Most overpowered way to build mobile apps?
Beyond Fireship925K views
×2.88:23This UI component library is mind-blowing
Beyond Fireship878K views
×2.76:17Industrial-scale Web Scraping with AI & Proxy Networks
Beyond Fireship854K views
