Read Your Video

Turn any Youtube video into a blog article.

  1. Home
  2. Building a VS Code Extension with DeepSeek R1 Integration
Building a VS Code Extension with DeepSeek R1 Integration
by ,
byGoon
Feb 22, 2025 - 06:02
185

Building a VS Code Extension with DeepSeek R1 Integration

In this article, we will explore how to build a VS Code extension from scratch, integrating DeepSeek R1, a low-cost open-source reasoning model, into our editor to create a custom AI assistant.

Introduction to DeepSeek R1

DeepSeek R1 is a powerful AI model that has gained popularity due to its impressive performance and open-source nature. However, using the web UI comes with a caveat: your prompts, keystrokes, and data are sent to China. To avoid this, we can run the model locally, eliminating the need for an internet connection.

DeepSeek R1 running locally Running DeepSeek R1 locally allows for absolute freedom

Generating a Project and Building the Extension

To start building our extension, we need to generate a project using the official VS Code starter template. Running the npx command will guide us through a series of questions, where we can stick with the default options.

VS Code Extension Template VS Code Extension Template

Once the project is generated, we can find the extension.ts file, which imports the global VS Code object. This object provides access to the entire VS Code API, allowing us to customize the editor.

Customizing the Extension

We can start customizing our extension by registering a command. In this example, we'll create a command called "hom" that shows an error message when executed.

Registering a Command Registering a command is straightforward

Testing and Debugging the Extension

To test and debug our extension, we can use the debugger. When we run the debugger, a new VS Code window will open with our extension installed. We can then open the command palette and run our command to see the error message.

Testing the Extension Testing the extension is an essential step

Integrating DeepSeek R1 into the Extension

To integrate DeepSeek R1 into our extension, we'll use a tool called Ollama. Ollama allows us to download and run open-source AI models, including DeepSeek R1.

Ollama and DeepSeek R1 Ollama makes it easy to run DeepSeek R1 locally

Creating a Panel for the Chat Dialogue

We'll create a panel to contain the chat dialogue, which will allow us to interact with DeepSeek R1 directly in the editor.

Creating a Panel Creating a panel for the chat dialogue

Defining the HTML for the Chat Dialogue

We'll define the HTML for the chat dialogue, which will include a text area and a button. The JavaScript code inside the HTML will handle the interaction with DeepSeek R1.

Defining the HTML Defining the HTML for the chat dialogue

Listening for Messages and Streaming the Response

We'll listen for messages from the user and stream the response from DeepSeek R1. This will allow us to display the response in real-time, sentence by sentence.

Listening for Messages Listening for messages and streaming the response

Conclusion

In this article, we've learned how to build a VS Code extension from scratch, integrating DeepSeek R1 into our editor to create a custom AI assistant. We've covered the process of generating a project, customizing the extension, testing and debugging, integrating DeepSeek R1, creating a panel for the chat dialogue, defining the HTML, and listening for messages and streaming the response.

With this knowledge, you can now build your own custom AI-powered IDE from scratch. 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, and 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 you for reading, and I will see you in the next one!