Build an AI-Powered Code Editor with DeepSeek FIM
Have you ever wondered how an AI coding assistant works? For example, one that is available in GitHub Copilot? AI code completion is an amazing tool. It really helps programmers a lot, and it's also a fascinating topic when you look at it from an AI perspective. When you first dive into AI-assisted code generation, you're amazed at how often the artificial intelligence can accurately guess what you're planning to write. The technique we will talk about today is fill-in-the-middle, or FIM for short. It is very often used in AI-driven code suggestions. In this session we'll focus on practice, and you'll learn how to implement a basic AI code completion feature using JavaScript and the DeepSeek API.
Let's jump right in and get started. Let's kick things off with the company that's been making all the headlines lately. This is the player that's made a huge splash in the AI world and stirred up a lot of heated debates amidst various controversies. Unfortunately, growing popularity also comes at a cost. DeepSeek is definitely overloaded. Not everything works here, and don't expect the model to respond quickly.
Sometimes, you'll need to be patient and wait a bit. Just a heads up, we'll be using a service that's currently in its official beta phase. It's a fill-in-the-middle completion API.
We'll revisit this documentation later, because there's a lot of interesting stuff here. Just keep in mind that this is beta, so by the time you try it out, things might have changed. For now, let's take a moment to focus on the theory.
If you're familiar with how large language models operate, you'll know that they excel at predicting the next token based on the beginning of the text. However, figuring out what's in the middle isn't really their nature. But you can actually train a language model for this task pretty easily. OpenAI put out a nice paper in 2022, so if you're curious about the details, I highly recommend checking it out. I won't go too deeply into the details here, but the idea behind this learning technique is quite interesting. In short, it involves marking the beginning, middle, and end sections in the training set, then moving the end section to the middle.
This helps the model learn to predict the middle part based on the beginning and the end given as the sequence. To really get this, let's take a quick look at one chapter of this document. I promise it won't take long. Here is the description I'm referring to. We have a sequence consisting of a prefix preceded by a marker, followed by a suffix preceded by a marker, and a middle part, also preceded by a marker. This way, the model learns to respond when it receives a prefix, suffix, and the marker indicating the start of the middle part.
Simple and effective. In this video, we will focus on practice and develop various versions of AI code completion based on the fill-in-the-middle API offered by DeepSeek. I won't be going over the absolute basics here, and some of the code will be reused from AI chat examples that were created from scratch in this video. So if you ever feel lost, it might be a good idea to watch that video first. Also, if you're looking to learn more about programming solutions based on DeepSeek, starting from the basics, I suggest checking out the video "DeepSeek R1 & Python". Alright, but let's dive into the main topic of our video and focus on creating an AI code editor.
If you watched the video about AI chat in JavaScript, this file will probably seem familiar to you. Yes, it's a slightly modified sendRequest function from the previous video. A little has changed, however.
First of all, I moved the API key into a separate file. So that, with the current DeepSeek issues, I don't have to invalidate it all the time. The endpoint is also different, because now I am not referring to the chat completion service, but to the fill-in-the-middle completion API, which is in beta. However, the model is still "deepseek-chat", which you already know well. To confirm this and learn more, let's look at the documentation I have already shown. As before, the most interesting for us is this basic example with curl, because here you can check everything needed in communication.
Here you can see our new endpoint. The method called is post, and the model is deepseek-chat. We also have headers related to content type and authorization.
Just like in the case of AI chat. The data we provide are also important. Namely the prompt, which is our prefix, and also the suffix, which in this case is null, because it is optional. The same is in the documentation.
Only deepseek-chat is accepted for the model. The prompt is mandatory. If we scroll down, we see the suffix which is optional, without it, it is just a regular prediction of the next tokens. Something in which every language model excels.
Let's check out our main function for communicating with the API called fimRequest. This function takes parameters like an input, which is a prefix, and a suffix. And it is designed to return the middle part. Fetch is responsible for retrieving data. It takes as a parameter the endpoint that we previously defined, as well as connection options. We have the post method, headers that were previously defined, and in the body we have the model, prompt, and suffix.
All as we saw in the documentation. Please note that we are retrieving a slightly different object than in the case of AI chat. Data, choices[], text. It is returned as the result of the function. As you can see, the engine of our solution is not significantly different from the one that was in the AI chat.
Simply, each large language model API is somewhat similar to each other. Believe it or not, this engine, this single function, will serve as the core for all four examples of fill-in-the-middle completion that we'll be covering. Let's start with the first simplest example, and see which interface elements are defined here. We have a text area prefix, where we will enter the beginning of our code.
Next is the output, which is the middle where the result will appear. And finally there is the suffix, which we will also enter. Just below the text fields, we have a button that calls the handleFimRequest function.
Before we move on to the function itself, note that I am importing a file with the definition of the fimRequest function, as well as the API key which is saved in a separate file. The handleFimRequest function, called after clicking the button, is very simple. It retrieves the value from the first text area, and stores it in the variable prefix. It does the same with the suffix, and then enters the information processing into the output text area, so that the user knows their request is being processed. Next, it calls the fimRequest function with the prefix and suffix, and finally enters what was returned into the middle field. Let's take a look at how it works, since that's probably more interesting right now than the code.
We have three fields, just as it was designed. In the prefix, I enter the beginning of the function definition in Python. I assume that this function is supposed to return the sum of two numbers.
As a suffix, I use the return statement with a specific variable name. I do this to ensure that both the beginning and the end are taken into account for predicting the middle part. The middle part should calculate the sum of a and b and place it in the variable my_sum. That's it. Perfect. Bolt the program and fill in the middle completion work as I expected.
Let's see how it handles JavaScript. I'm adding a comment that typically appears above the function. I will change the suffix only slightly, so that the return statement meets JavaScript syntax. So I added a semicolon and a closing brace.
The outcome might be totally different this time, because the AI doesn't actually know what I want to achieve, and is just relying on probabilities. And there you go, it's different. At the beginning, we have a continuation of the comment, meaning DeepSeek built a function to sum all the numbers between two chosen ones. This isn't exactly what I expected, but it is some kind of prediction, and as you can see, the function is correct. Let's jump into the world of SAP for a moment. I'm entering the beginning of a report definition in ABAP.
The name is very suggestive. However, to make the task a bit more challenging, I'm providing the end of the DO loop as a suffix, and we'll see how AI will be able to combine these two concepts. I have to say, it did a pretty slick job. The report just prints Hello World ten times, so we have the do loop terminated by my statement ENDDO. All right, but you can say that this is not the code editor I promised at the beginning. So we can move on to improving the program to make it more similar to the editors you know.
Here is the second version of the program. I made some changes to the interface. First of all, a text area called Code Editor, where we will edit all the code.
Next, we have the definition of the prefix field, which I have changed to Read Only, and below is the suffix with the same option. We will no longer edit these fields, they will be filled in automatically. Then there's the button, and at the very end, the output field where the complete code will appear. Next, we have the imports of two JavaScript files. These four lines identify all text areas and assign them for further processing. Next we have the updatePrefixSuffix function, which we will return to in a moment.
For understanding the idea, it's more important when we invoke it. We assign an event listener to every event that can change the cursor position in the code editor. These events are related to typing on the keyboard or clicking the mouse. Let's return to the function itself. First, we retrieve the value that is currently in the code editor. This is our full code.
Next we determine the cursor position. We do this based on the selection that indicates this position, even when there is no selection. Now straightforward.
The substring from the beginning of the code to the current cursor position is entered into the prefix field. Then we do the same for the suffix, but from the current position to the end. Of course the function handleFimRequest has changed slightly. First we retrieve the value of the prefix field, then the value of the suffix field. Then we inform the user about processing.
Then call to our fimRequest function, with the retrieved prefix and suffix. And finally fill the output field with the full code, which means concatenating the prefix completion and suffix. Let's see how it works in practice, because that is the most important thing. I'm changing the current file in the browser. The fields appeared as defined.
In the code editor, I start writing a function. As I do this, the prefix area fills in. Note that when I move the cursor up one line, the code separated in a clear way into a prefix and suffix. The output is now much easier to read.
It's just a complete function made up of the prefix, completion and suffix. Let's spend a bit more time playing around with a simple ABAP report. The case will be similar to the previous one, but I will give a little more room for interpretation by not ending the report title with a period.
Please observe how the prefix and suffix change when I move the cursor. In this example, it is clearer that the completion does not have to be based on whole lines, but can also affect parts of existing ones. Let's see how Artificial Intelligence completes the code.
OK, we already have the result. As you can see, the report name has been completed. Besides that, the resulting code is similar to the previous one.
Let's simplify our program a bit more, because we really don't need a prefix, suffix or output. Let's just keep the text area for our code editor, and the button for generating code. After all, we can rely on the code editor to provide the complete code. This will simplify both how the program works and the program itself. Let's look at the code. At the beginning, we assign the code editor element to a variable so that we can operate on it, and besides that, we only have the handleFimRequest function.
Inside the function, we first retrieve the full code as the content of the code editor. Then we determine the current position of the cursor. Based on this, we cut out the prefix and suffix.
We insert information about processing, then call the FilmRequest function with our prefix and suffix, and insert the complete result back into the editor. Simple and effective. Let's see how it works in practice. As it was designed, in this case we only have the code editor area. This time, I will focus on a somewhat unusual example to see if FIM Completion from DeepSeek can handle something non-standard.
I start writing code for Arduino. It is Arduino-specific variant of C, and programs must consist of two functions: setup and loop. In this case, I'm configuring one of the outputs, specifically the built-in LED as the output.
By adding a delay(100) to loop, it suggests that the LED should be set to blink quickly. I move the cursor to the place where I want the code to be completed and press the button. As you can see, the processing information appeared in the correct place. It is clearly visible that DeepSeek is overloaded, because the response takes quite a while.
This will make the next version of the program a bit more complicated to use, which I'll demonstrate, but we'll just have to manage. And finally, we got the response. Yes, this is the completed program I expected. And this is fully functional code.
Let's move on to the last example, which is AI code completion that you know from most AI editors, where you don't need to press any button to get suggestions. So with that in mind, I've taken out the button here and kept just the code editor. Naturally, our JavaScript adjusts a little to accommodate the new functionality.
It does not change the fact that we are retrieving the code editor element, as we will obviously need it. Next, we define suggestionTimeout. It will be used later with setTimeout function. This is important because the suggestion should be triggered after two seconds of inactivity.
So this variable is needed to handle the inactivity time. The handleFimRequest function doesn't change that much, except that it won't be triggered by a button. The beginning is exactly the same.
We determine the full code, cursor position, prefix and suffix, and then call the fimRequest function to get completion. Inserting new code composed of a prefix, completion and suffix into the code editor works the same way. A more interesting thing starts just below. These three lines cause the inserted suggestion to be highlighted.
This way, if the user continues typing, nothing changes for them, because pressing any key makes the text marked as a suggestion disappear. This means the user has to explicitly want to accept the completion. The following is a helper function triggerSuggestion, which ensures that the handleFimRequest is called only when no text is selected. This means that we do not want to have suggestions if one is already visible on the screen, even if the user does nothing. At the very end, we have an event listener that completes everything.
The moment the user starts typing anything, we first clear the setTimeout to avoid triggering suggestions, and set a new timeout for two seconds. As a result, the new suggestion will be retrieved after another two seconds, unless the user presses something earlier. And that's really all that's needed. However, let's see if it works and how it works.
I remind you that DeepSeek is currently overloaded, so unfortunately the wait time for suggestions is longer than it should be. As you can see, this time we only have the code editor without any buttons, because they are not needed. I am starting to write functions in Python. We have already used a similar example.
I place the cursor where I would like to get a suggestion and wait. After two seconds a completion request is triggered, but unfortunately today it takes a long time. However, I expect to receive an operation of summing and assigning to the variable my_sum. That's right, the suggestion is absolutely correct. Now I will define division, but I will not write any suffix.
We'll see if the suggestion also includes returning the value, and if the naming scheme will be the same as with addition. Yes, everything is correct. Let's now suggest that the function should be somehow secured. Of course, I mean protection against division by zero. Yes, that's what I meant. And now we will check something else.
I will place the cursor in an empty space and see if the AI will be able to guess from the existing function scheme what function I might want to define next. Bravo, that's exactly what we aimed for. We have a function responsible for subtraction and additionally fully consistent with the previously used naming of functions and variables.
However, if I start typing something, I will remove that suggestion. I'm defining multiplication now, and we'll see if the suggestion will be just as good. Yes, everything is correct.
As you can see, we've programmed the functionality of the AI coding assistant using a straightforward example. In a real world, it would definitely need some refinement. But that's not the focus here. I wanted to demonstrate that with tools like DeepSeek FIM Completion, you can easily create amazing functionalities, much like we did here or with our previous AI chat.
There's nothing stopping you from beginning to build your own programs. Your only limit is your imagination. I also encourage you to explore how artificial intelligence and large language models work. That's why I've shared this document from OpenAI about FIM Completion. It's intriguing and definitely worth checking out.
That's all I've got for today. I hope you enjoyed it, even just a little, and found it useful. Don't forget to like, subscribe and share this video with your friends. I'd really appreciate it. May your programs always running smoothly.
See you next time.
2025-02-17 00:25
