I Tested the AI Code Editor Everyone’s Talking About—Here’s What Happened!

You probably have heard about Cursor by now. It's the AI code editor that everybody is talking about. And I also finally got a chance to play with it and I think it is pretty impressive. So in this video I'm going to show you how you can use this in your own projects if you decide to use it as a copilot. And some of the things that you need to be aware in terms of capabilities and limitations. Here is what we are going to be building in this video. I'll walk you through a step by step process. Also, I documented all the issues that I ran into and documented all my learnings. To get started, you need to download Cursor and I'll highly recommend to create an account. Even if you decide not to pay for it. You will get 500 fast requests even on your free account for a month. More on this later in the video. Once you open Cursor, here's the interface that you will see. It's essentially VS code with some added features. So I'm going to open a folder that I already created called Cursor Tutorial and now you can see this is basically VS code. We don't have any files in this folder, so I'm going to use Cursor to create my project files. And for project we'll be using the latest text to image model called Flux that is available in Replicate. Now cursor uses Claude 3.5 sonnet, so it has no idea about this new model. So I'm going to show you a way in which you can introduce documentations to Cursor and then Cursor will be able to use that in your own projects. So first you want to go to Settings and here you want to make sure that the Clont 3.5 sonnet is enabled in the models. It will also uses some of the other models or you can introduce your own models if you have API access. By default it is using the Cloud 3.5 sonnet, but you can also enable these other models as well. Next you want to click on Features and you want to make sure to enable the Cursor tab feature. Also you want to enable Composer. This is the feature which sets it apart from other AI code editor or code generators. There are some beta features as well. In this video we're going to just mainly focus on the Composer, but I'm going to create a very detailed video about different features that are available in Cursor. You can use the AI features within Cursor in different ways. One of them is to enable The Chat window. So click on Toggle AI Pan and now you have a chat window very similar to Claude or ChatGPT with some added features. I'll cover this in another video. In this video, the focus is going to be on Cursor Composer, and in order to enable it, just press Command I on Mac os. So here you're going to be presented with a small window where you can interact with Cursor through simple text. Now, it has a very unique feature. If you type, you're going to be shown this pop up window. Now, if you click on files, basically if there are any files in the project, you can select those and start using those right away in your project. Or you can also select specific folder code, snippet or the one that we're going to be using in this video is Web Links. So you just select web and then you provide a link. Then Cursor will be able to go parse text or information from that link and use it when it's generating code for you, which is extremely powerful, especially if you are working with a new API or a new package that the model hasn't seen in its training data. It also has access to a number of different documentations. So for example, here are the official S3 documentations. Or if I start typing Hugging face. So you can see that it has access to official hugging face documentations as well. So you can directly access this documentation within Cursor. For this example project, we're going to be using the prompt use the instructions in the web. So we are providing link to the documentation of Flux. And I specifically wanted to use the Python documentation to set up a photo generator from input text prompts. Create a Python UI using Streamlit that allows the user to input a text prompt. The prompt is sent to replicate. So use the above documentation. Flux is used to generate an image and displayed back to the user. Also add two buttons below the image, the generated image, one for regenerating the image and the second for downloading the image. Now, you want to be as detailed as possible in your prompts, because keep in mind you only have 500 fast prompts for a month, which you will quickly burn through. And these prompts are the prompts that you're sending, not actually based on the number of tokens that are being used. So I'm going to send this command and let's see what Composer does. So it started looking for information on the web. It's also looking at the replicate documentation. So this is pretty good. Now it says I'll create a Streamlit app that uses flux model from Replicate to generate images. And here you can see that it generated a file called App PY with a whole bunch of python code. Now at the top you will see this accept button. Or here in the composer you can also see this Accept all button. So if you're happy with the code that it has generated, you can just click on Accept all and it will save the file for you. So it's asking us to install the packages that we will need. Then we need to also set the replicate API token as an environment variable and it's telling us all the instructions that we will need in order to run this app. So I'm going to next ask it to create a dot ENV file for storing the secrets related to the project and update the app py to use environment variables and also create a conda virtual environment. Okay, so we have our environment variable, so we just need to copy our replicate API key. You can also see that it has updated the code for us, so now it's using the env. So this is good. I'm happy with the changes it has made. So I'm going to just accept everything. We also need to create a requirements txt file, so I'm going to do that myself. Now, it did use specific versions, but I'm going to just remove those. I don't want to run into any issues with the versions that it has selected. We'll just save this. And it also gave us all the commands that we will need to create our virtual environment. Okay, so I'm going to open my virtual environment and just paste the first command which will create the virtual environment for us. Next we will paste the second command which will activate the virtual environment for us. And then if I look here it does telling me how do I install the packages. So for that we'll just use pip install dash r pip install r requirements txt. This should install all the packages that we will need. Now I need to copy the replicate API token. So here's the replicate API token that I will need. So I'm going to copy this. Paste it here under inside quotes. Now I think we should be good to go. So I'm going to just run my streamlit app Streamlit run and then App py. Okay, so here's the app that is running. Alright, so my prompt is going to be create an image of a llama wearing sunglasses standing in the snow. Let's see if if it can generate this image for us. Now we ran into some issues. Okay, so it's complaining about a version. I'm going to just say I ran into this issue and let's see what it does. All right, so it updated our app PY file. So if you go here, here, the here are the updates and you can also go back to that specific location in which it updated it. So I think it was complaining about this specific version of the model. I'm going to accept it and we'll just rerun the app. All right, so my prompt again is going to be very simple. Ask it to generate the image for us. And it ran into the same issue again. Okay. The main issue is that it's adding this latest keyword in front of the model. But in actual documentation there is, there is nothing in front of it. So I'm going to just copy this. Tell Cursor. Alright, so rather than directly turning it, I'm gonna say it seems like the model name is wrong. Can you look at. And then we're gonna again point it to the web. Right. To make sure the model name is correct. Right. Now, as you can see, Cursor is pretty great, but it's not perfect. And this is one of the things I really want to point out that for demos these tools are absolutely amazing. However, in real world or real life scenarios, you are going to run into those issues and that is why it's very important that you actually understand what Cursor is doing for you. So again, it didn't really fix the issue. So I'm gonna just do it manually. So I'm going to reject all and we'll delete this part, store the file again and let's run it again. Okay, our prompt again is going to be create an image of a llama wearing sunglasses. So we can click on this and it seems like it's communicating. So yeah, we do have an image of a llama and there are two buttons. One is regenerate, the other one is download. So first see if the download button works. So here's the file that is downloaded and let's see, if I click on regenerate, it sends the same command again or the same prompt. So it regenerated an image. Now the app works, but let's see if we can make some changes to it. Okay, so I'm asking it, can you recreate this app using HTML CS and, and make it much better looking? So this, these are pretty vague instructions, but let's see what it comes up with. Okay, so it's creating an index HTML file. So this is the HTML file and you can see what exactly is going to go in there? So we're going to wait for this. And here it created an HTML file. I think everything is contained in within this single file. So I'm going to just accept everything. Now we just need to open this file in a web browser. Okay, so here's the HTML version. So let's use this prompt, which is a relatively complex prompt. Alright, now we're running into this issue. It says page says fail to generate images. Please try again. So let me try again. All right. Okay, so we need to inspect what exactly is happening and for that I'm going to click on inspect. Then we're going to go to the console and you can see that there are a whole bunch of errors that are happening and I think the reason is it has issues with cross platform. I'm going to come back again to composer and just paste in that error and let's see what solution it comes up with. Okay, so now it's implemented a server side code for us again I'm going to remove this so we don't run into the model related issues again. Except that. And we also need to accept changes to our HTML files, so I'm going to accept those as well. We also need to install Flask because now the server is running using Flask. So I'm going to paste this in here. Okay, now instead of running the HTML file, it's asking us to run the Python server PY file. So I'm going to paste this here. Let's run this and let's open this link. Okay, so we ran into issues again because it's not able to find that page. So I'm going to just click Control. I again will provide this. It simply has to update our server PY file. So I'm going to copy this again. Okay, so let's see what update it makes. Now as you can see that I'm running into issues just copying the errors in here, very similar to what I would do with Claude. But the good thing here is that it can modify the files directly and it can also read multiple files. Claude I think limits it to five files, but it can look at the whole code base and in later, in the later videos I'll show you some other features which enables it to chat with your documents as well and chat with your code as well. Those are other features that we are going to explore in another video. So let's accept all the changes. So we are making progress. Okay, let's click on generate. Okay, we ran into yet another issue, so let's post that error here. This wasn't what I was expecting when I was planning on creating this video, but actually want to show you the actual process of what can happen. Okay, so this one was not an error actually let me restart the whole file, then we'll see what error we run into. Okay. I had to go back and forth a couple of times with Cursor, but I think we finally have a solution. Alright, so here's the new app after those changes. Okay, so we're going to use this prompt. Let's see what Flux comes up with. Oh, this is pretty nice. I can download it the same way as before. Now the file that it downloaded is in dot webp, which I hate because you can't really work with these file types. And if you click on regenerate, let's see if you can regenerate the image. Yeah, so this works pretty cool. Okay, so this was a cool little project, but a few things when you're cursor that you need to keep in mind. Okay, the first one is going to be these 500 fast generations. So when we started this video I think I was about 18 requests in, so I used around 14 more requests. And now if you are working on any complicated project, these can really add up and potentially you will quickly run out of these fast requests. After that it's going to start using Gemini 4o mini or cursor Smart. I'm not sure how good the output of those are going to be though. Another thing, this is a very powerful feature, but you still need to know how to program if you want to use it effectively. You can easily create smaller projects without any programming knowledge for sure, and you probably have seen a lot of demos out there. However, if you run into issues, it's still using an LLM and it will hallucinate. So you need to know how to solve some of the problems or at least point it in the right direction. A related thing to keep in mind is the tech stack that you want to use. So you need to be very explicit in what tech stack to use and you need to be actually familiar with that tech stack for complicated projects. Okay, so some final thoughts. It's an extremely powerful tool which you definitely want to keep in your toolset. And the good thing is this is the worst it ever will be. But it's not an AI programmer or a software engineer replacement yet. I hope you found this video useful. Thanks for watching and as always, see you in the next one.