Transcription
AI has already become an integral part of our lives as a development tool that allows you to write code more efficiently. I think most of you are currently using Copilot or similar tools to complement your code and write faster.
However, we are now witnessing a new phase where, in addition to simple autocomplete extensions, full-fledged development environments are emerging. These can not only complement your code but also analyze the entire codebase and perform more complex tasks.
Today, we will look at one such tool: VF IDE, which is a fork of Visual Studio Code.
So, what is VF? Essentially, it is an IDE from Cum, which released an extension for Visual Studio Code that not only allowed for autocomplete, similar to Copilot, but did so for free—though perhaps with slightly less quality.
VF is a fork of Visual Studio Code that contains not only code completion but also integrated AI agents designed to create a workflow where you interact with AI without leaving the IDE. It understands what you are currently editing and comprehends the entire project context. This is why they had to create a fork, as it was not achievable with a regular extension.
In an ideal scenario, you get a workflow where you simply write a piece of code and ask the AI to complete or reflect on it. They have a feature called Cascade, which allows you to execute commands and refactor code. We will discuss that a bit later.
Now, let's talk about pricing. When you install it, you get two weeks of full functionality. After that, you can either stay on the free Individual plan, which includes full autocompletion and AI in editors, or you can opt for a paid subscription that costs only $10. This is twice as cheap as alternatives like CS A, which costs $20 a month. In this regard, VF is quite affordable.
But now, let's look at real examples. Is there any benefit to those $10 you would be spending? What can it actually do?
Let's take some real tasks and start.
First, we will review the interface and the first case when we want to start a project from scratch. After installation, it will immediately offer to import all your Visual Studio Code settings. Here, you can see my Visual Studio Code IDE with the Purple School theme, which works perfectly in VF without any issues.
The only noticeable difference is the central startup window and the right Cascade panel, which is activated by the additional "Open Cascade" button. Additionally, while editing a specific file, new commands appear that you can choose from.
Let's start simple. Let's try to write a basic API using Fiber. We will create a new folder called Demo Fiber to see how to create a simple project with Fiber.
So, we opened it, and everything is standard; we currently have a completely empty project. Now, let's ask VF to prepare a project for us. On the right, we have a window where we can input something and send it, as well as select the model, either Chat GPT-4 or Cascade. Depending on the model, the results may vary slightly, but I haven't noticed significant differences in practice. You can stick with Claude 3.5, which handles this well.
There is also a switch for AI and Chat. In AI mode, we give access to the entire folder we are working in, allowing it to make changes. If we switch to Chat mode, it will simply operate in chat mode, which is available for free use in demo access and paid use.
Let's start. We can write in both Russian and English; it works perfectly either way.
"Create a Go project with Fiber and install all dependencies." If I were doing this manually, I would have to check the documentation to remember how to install it. Here, I just click, and I can immediately start.
What's important? First, it suggests executing commands, and it will only execute them if we accept. It does not have full access to our system; it only executes what we ask, which adds a layer of security.
First, it says, "Let's initialize," and then shows the summary. After that, it installs GoFiber. As we can see, Go mode is activated, and it creates a main.go file with a basic Go project.
Everything is great; it created a repository and a .gitignore file. Thus, with one command, while I pour my coffee, we can create the necessary project to start writing code.
After executing the command, it also checks that everything will run. "go run main.go," and we see the output that our Fiber has started, and everything works as it should.
Now we have two options. First, we can view the list of modified files. We can open the README, main.go, and .gitignore to see which files it created or modified.
Here, we can accept specific changes. For example, if there were several changes, we could look at one specific change or accept all changes in the file or all changes by clicking "Accept All."
Let's say we like everything; it started and works, and we have a basic project.
Now, we would like the "Hello World" to not be in the main file. We need to move it to a handler, and the main file should not be in the root but in the cmd folder. We can specify the file and pieces through the "@" symbol. In this case, we indicate that the main file should be moved to the cmd folder, and the handler should be separated.
Let's make it internal. Internal main, not main internal. Let's do that. The "Hello" is not critical, and we will refactor it into a struct to enable dependency injection.
Again, we haven't written a single line of code; we just asked it to reorganize the structure. Through the "@" symbol, we can specify either a single file or specific pieces of code within files or entire folders.
The only limitation I found is that it cannot work with images, but we will discuss that a bit later in its limitations.
After that, as we can see, our main file will be moved to cmd. It was created here but not deleted from here, and it has a handler. It also asks to delete the file, and it does so with commands.
We deleted the old file; it cannot delete an entire file without our permission. After that, it updates the README to indicate what has changed.
Let's look at the problems we might encounter. We see a problem that if a file is very large, it occasionally encounters an "Internal Error" that prevents editing that file. Sometimes, restarting helps, but not always. So, you might face the issue that it won't edit a large file. This doesn't happen often, but as we see in our example, it couldn't edit the README, which is not critical for us.
So, it brought the handler. Let's accept everything and look at the changes. It immediately created a handler struct, a constructor function called NewHandler, and we extracted that. It also injected dependencies within the main file.
Now we have a HelloHandler, and on GET, we handle HelloHandler. It could have been better if the setup route was inside, so let's look at the next editing possibility—not just through chat but directly from the code.
The second possibility is selecting a piece of code and executing a command. The command is split into Command + L, which immediately sends that piece of code to the chat. As we see, it indicates line 18 in the main file.
The second option is Inline. When I select a piece, I press Command + I, and here I can give instructions. Here, we can ask it to "map paths to the file." Unfortunately, it cannot mention the handler here.
After that, it will suggest changes. But as we see, it modified only the currently selected piece. It does not have full editing capabilities for the entire codebase.
So, if we want to execute this function, we need to do it through Command + L and say, "Move the path mapping to," and here we can specify through the "@" symbol that it should go to the handler.
Now, instead of editing one specific piece that we highlighted, we will pass it to Cascade, and it will edit the handler and the main file.
This is useful when you want to refactor something or add documentation to that function, and so on. You can do this right on the spot without needing the entire codebase.
In this case, we see that editing has its problems. It sometimes encounters issues, and it seems that there was an unsaved change.
So, let's see what it did in the handler. It added the mapping and now accepts "upg" as a parameter.
Now, let's try to break something and look at another possibility. Suppose we made a mistake here, and we see an error. We say, "Please explain and fix the problem."
For this, it sends the entire context of the error, as well as the entire context of our project, back to Cascade. After that, it analyzes and explains what we did wrong.
It says, "You did this, but you need to fix the HelloHandler." Then it edits and suggests changes, including modifying the main.go to add the HelloHandler handling.
In the end, it will suggest that we accept these changes. So, if you encounter an error, all you need to do is ask it to fix it. In most cases, it does this perfectly.
Sometimes, it may go off track. I encountered a case where we asked it to fix something, and instead of simply correcting the error on the spot, it started editing the codebase elsewhere to ensure the current entry was correct.
So, you might face some issues, but otherwise, it should work correctly.
Now, let's see how it handles more complex projects. For example, I will take our educational system project. This is a massive React project built on FSD with a huge number of features, entities, and a lot of other things.
I launched the project myself, so we can demonstrate how it works. Our task now will be to fix a couple of bugs. For example, I know that there is a bug in the profile that leads to Purple Plus instead of directing to the main courses like the others.
So, we can ask it to fix the breadcrumbs on this page. We return to the IDE and ask it to fix the breadcrumbs, making the first title "My Courses" and the URL "cses."
Now it needs to analyze our entire codebase and find the specific file. I didn't tell it which file to look in; it analyzed the entire base and found the layout, then edited it.
What's important is that the more you work with the code on a specific project, the better it will understand your codebase. Now it didn't even need to analyze the entire base from the start because it had already analyzed the project and understood that the breadcrumbs were in the layout.
It showed the changes, and we can click "Accept All." Now we have "My Courses," and everything works.
Of course, it can handle more complex tasks depending on what we need.
For example, let's modify the activity chart. We have an activity budget that shows how many students studied lectures on which day. Here we have Monday, Tuesday, Friday, Saturday, and again Tuesday.
Today is Tuesday when I am recording this video, but it would be nice if instead of days of the week, we had numbers, like the first, second, and so on.
So, let's ask it to change the activity chart on the main page to show numbers on the X-axis instead of days of the week.
Now it will analyze the codebase again and try to find where this page is. It found the page "cses" and is looking for the main page in the "page/cses" folder.
On the main page, it should find the corresponding profile card, which is located at the top, and it found "User Activity for Days." In this case, it says it couldn't find "User Activity for Days."
Okay, it searches for it in the profile, of course, but it doesn't always find the necessary dependencies right away. However, as we can see, it found the corresponding file in the profile and then found the function "formatUserActivityDays."
Now it will edit it. To do this, it needed to remember where we had it, look at how we do it, and format the date, etc.
Let's accept the changes and save. It does complain that there should be a comma hanging, so we can add that manually.
Now it looks correct; the 22nd and 26th numbers are now working. It made changes based solely on my textual description without needing to remember what was there.
It also handles running current projects well. For example, when we downloaded a new project, I specifically downloaded a fresh project that is currently being developed.
Let's take a real developer task and try to solve it with VF. What I want is to run the project, set up the .env file, and bring up the database in Docker. That's all I want, so that when I go pour my coffee and come back, I have a ready-to-go project.
I don't want to create a file with parameters that were there. Now it checks that we have Docker Compose. It realizes that we don't have Docker Compose and will use the new syntax.
It tries to run, downloading the latest image, and all layers are being downloaded. It runs everything without my involvement. I don't need to waste time starting the project; it analyzes everything.
Of course, it would be good to have some .env.sample, or else it will have to run around the code looking for all the environment variables you use. This is actually a Nest project that we will also edit.
So, it is downloading while we talk about another feature that might come in handy: the continue feature.
Now that it has installed everything, we can ask it to run the project. By the way, the project won't start because the .env.sample differs from what it just created.
It analyzes the package.json to understand what is there and says that dependencies are not installed. Let's install them, but it does this with npm install instead of npm ci, which is not very good.
So, NSV does this, but it seems it is not yet fully capable of correctly deploying new projects. It just installed the dependencies through npm.
After doing this, it will try to run it again. It will ask to run the start command and will see an error that GT A Secret is not configured.
So, everything is bad; it doesn't work. It looks at the .env file for configuration. Sometimes, you have to explicitly point it to the .env file and say, "Here, check this."
After that, it will complete our .env file, and then our server should start.
So, if it doesn't do something the first time, just point it in the right direction. After that, you will get a reasonable result.
By the way, I want to note that when it starts background processes, it has a section at the top called "Background Processes." These are the processes that are currently running.
For example, after launching a service following the edits, it edited the .env file, and after that, the server started. It will show the process "npm run start dev."
So, if you try to run it from the console, it will say that the port is occupied, and so on. Therefore, check the background processes; they are running, and the server is live.
If you need to stop it, click "Cancel This Step," and it will turn it off.
Now, about the continue method, which allows you to continue execution using AI after you have written at least a piece of code.
For example, if we add some methods, and we have a method page, we want to add something else and list everything, but we are too lazy to do it.
We can write "continue," and it will look at the last changes and say, "Okay." It didn't quite understand that I wanted a complete dictionary, so let it finish the dictionary.
It will complete the dictionary of methods based on what we asked. The more code you write, the more effectively you will work with it. It will understand what you are doing and will work much better.
Sometimes, it offers several options to choose from, like, "I see what you are doing. What do you want me to implement?"
The more you write with it, the better it will understand your current execution context.
Now, the most interesting part: is it a Junior Plus developer? Let's take a task that one of our developers currently has, which is to create an AI Models module, add CRUD operations for creating, deleting, and so on, and also create a controller with one method that returns all models.
Here, the structure of our model is already described in the task. Let's try to feed it all this.
We create a new Cascade and say we need to execute the task. What we need is to create a new module, AI Models, in Core Models, and add a new model with Prisma.
We can paste this model directly from here. Next, we need to add CQRS commands and queries for creating, deleting, getting, and modifying models, as well as a method for getting all models by type.
We want this to be of type "KST Image." Next, we want to add a controller that will have a GET method for retrieving all models by type.
That's basically the entire task. I just slightly expanded the task and sent it. Now we will wait for the result.
This might take some time, so you can go grab a coffee or do something else.
Let's see the result. What has changed? A migration was added. Yes, an AI model was added.
In principle, we described it, and it didn't require much from it. A common module was added, although I told it to move this to commons.
Okay, there is a controller, and the controller performs API operations. Okay, we can delete that now.
It created all models and a handler. The only thing I don't like is that the handler directly accesses the database.
So, let's correct that. Move it to the AI Models repository and call it from the commands.
Again, we wait for it to fix that.
So, it edited everything and should move it to the repository.
Now we get find by ID, by type, and other things. Everything works well.
The only thing is, let's fix this. We can just click, and it will find the correct import.
In principle, that should be everything.
Okay, the Prisma service found in the command database Prisma. For some reason, it took Prisma from somewhere in its head.
Yes, everything is excellent. It says we probably have some unnecessary methods that we didn't ask it to create.
So, remove all of that, please. After you remove that, we can then remove the enum, but that can be done manually in the module.
Here, the Prisma module is also imported.
In reality, this should just be the Database module, and that's it.
But it did a good job of laying out commands and queries in separate arrays. There are no questions about that.
So, we fixed the controller and removed everything unnecessary.
Now, let's tell it that there is also a problem here that needs fixing.
We just created an entire module. In reality, we can later ask it to move it to Core for proper structure.
So, it creates a Prisma module. Here, it went a bit off track.
Let's see what it did. It created a Prisma session and a Prisma module. No, we don't need that.
In reality, it should just be the Database module, and that's it.
In principle, we didn't write a single line of code and got everything we needed for the task.
We can now ask it to add tests, which it also does well.
So, regarding the question of whether those $10 are worth it: of course, they are.
Because essentially, we just completed a task that was estimated at two story points, which a person would take a couple of hours to do. We did it in literally seven minutes, implementing everything necessary.
So, yes.
Now, let's talk about the downsides.
Despite the fact that AI is integrated everywhere—even in the terminal, where you can press Command + I and ask it to give you a cloning command, for example, it will generate that command—there are some limitations.
Unfortunately, it currently cannot work with images. You cannot feed it a Figma mockup and say, "Please code this." Developers say that this feature will appear in some version, as AI can work with images.
So, this is currently lacking.
The second downside I would note is more about the implementation of this approach for beginners.
For beginners, this is not suitable because simply using VF, you can create something without understanding how good or bad it is, and without diving into development or figuring things out.
So, if you are just learning to code, I do not recommend using VF.
If you are already a developer who knows how to write code and just wants to make your life easier and complete a task in seven minutes instead of a couple of hours, then yes, this is a very good tool.
For beginners, it will confuse them and hinder their learning, so be cautious.
Additionally, sometimes VF fails and does not provide the correct solution. For example, in the case of the module, instead of finding the Database module and saying, "Aha, there is already a Database module; I don't need to create anything new," it creates a new Prisma module.
This can also affect code quality if you do not check what it implements as a result.
In the rest, it is a great tool that will allow you to solve tasks quickly.
So, what AI tools do you use? Do you use Copilot, Codeium, or something else?
I hope this video was helpful to you.
If you haven't seen the previous episode of web development news, there will be a link here somewhere, as well as in the description.