Transcription
Friends, hello everyone. I want to tell you a little about vibe coding. What it is, how it's done, what the Cursor IDE tool is. I apologize in advance for, perhaps, not very high-quality sound, video, and everything else. That is, we have no production. This is the first video, but I think it's always better to proceed from the fact that we are in ideal conditions to do something. Therefore, let's begin. So, what is vibe coding? It's when, uh, basically, when neural networks write code for us. That's it. That is, we come up with some ideas, communicate them to the neural network via chat, and it, accordingly, writes code for us. That's it. And now on the screen you see Cursor IDE. This is a code editor with built-in neural networks, agents, that can execute some commands and use some tools, and so on. In principle, if it's very simple, then here we have a chat, in which we write some messages in Russian, and it, as it were, turns them into code. That's it. So, uh, let's get acquainted a little with how to use it. Uh, we have the following story. That is, in order to, if you want to repeat what I'm showing, you'll need to install Node.js on your computer. Because we will be writing code in JavaScript. That's it. So, for it to run, we need to install it on the computer. So, let's try the next thing. We, uh, have a chat here. It opens with, uh, the keys Ctrl L. That's it. And it has, well, several modes. We will consider, uh, such a base mode, the agent mode, and the chat mode. Let's start with the chat and ask it something. For example, uh, tell me about, I don't know, for example, web development. What do you know? Let's try. And here, by the way, we can choose the neural network we will work with. Let's take Claude 3.5 Sonnet. This is a very good LLM model for working, uh, specifically, well, with all sorts of technical things, like code, for example. So, we send the message and immediately get an answer, what web development is, what technologies there are, well, and so on, and so on. That is, we can use, uh, this chat. It even shows some code examples, like a teacher, like a mentor, like something that covers our, well, lack of some technical competencies. That's it. Let's move on. We, uh, have, uh, the agent mode, right? An agent is a doer, right? That is, it, uh, allows us to do something. For example, let's ask it to write a simple function in JavaScript. Let's do it like this. Create a file script.js with a function that outputs "Hello World" to the console. And run it. Yes, that is, it can not only write code, but also run it. Let's try, let's see what comes of it. So, here it generously agrees to do it. Here are our files. And here it simply creates a file with JavaScript code that outputs this "Hello World" message to our console. And it suggests running the command. We have the option in the settings to enable auto-run, that is, for it to run commands itself. And I actually recommend doing this, but for this video, for clarity, we will just run them ourselves for now. That is, we just press "Run command". And here our "Hello World" string is displayed in the console. Okay. So, you see, it's highlighted in green here. This means that some changes have occurred. That is, something wasn't there before, it appeared, and it's highlighted in green. So, here we can reject the changes or accept them. Let's accept the changes and see what else Cursor IDE has. So, there's this thing like Copilot. What is Copilot? It's when, basically, we write some code, and it, as it were, suggests completing it for us. That is, you see, I haven't typed anything yet, and it's already suggesting some function. We just press Tab. Let's see, let's try asking it to run. Run again. And so that we don't have to write every time which file, which file you want to refer to, you can simply, uh, well, use this "@" symbol and select some file. For example, script.js. We refer to it. But I usually don't do that. I just do it like this. I copy the relative path and paste it here. It understands that too. Well, this is a good thing. Let's try to run it. We see a function here that takes two arguments, right, adds them, and outputs the result to the console. Uh-huh. It suggests running it. And we see three. 1 + 2 is 3. Okay, the script works great. In principle, that's it, we are already vibe coders, you could say. That's it. Let's look at one more function. We can select some code. Some code, for example, uh, it suggests, we have, uh, the key combination Ctrl K, or we can simply select "Edit". This is the same chat, but for a limited, as it were, space. Let's ask it something here. Change the function to subtraction, for example. Aha. And we see it has done the subtraction. We apply these changes and these as well. That's it. And instead of the sum function, we have a subtract function, right, so a subtraction function has appeared. Let's see what came of it. Run the file again. Understandable, right? That this is one small file with a little code. In large projects, we have many files with a lot of different code. What makes Cursor good for our work, for web coding? It's that it indexes all the code. What does that mean? It reads it and remembers it. Let's run it. So, we got "not found", that is, it entered an incorrect command, and you see, it corrected itself and entered the correct one. So, -1 1 - 2 is -1. Everything is correct. That's it. Okay. Well, these are basic capabilities. This is Cursor. Let's look at the settings. Here we see the models that, uh, well, can be used, right, for development. Well, I'll say right away, at the moment, as of today, only 3.5, 3.7, well, and Gemini Pro are of interest. Gemini Pro, here X, Pro, Max, it doesn't matter. For now, Gemini 2.5 Pro and GPT-4. Well, mostly I use 3.7. So, next, uh, we have some rules that we can set globally for the entire project. For example, here it says: "Always respond in Russian." Yes, we see that it responds to us in Russian in the chat. And this is because we have this rule set here. I won't talk much about the rules in this video. I'll just show the basic operation here. Maybe we'll release some more features later. Okay, let's ask. Uh, well, and I haven't said this yet. And here we have various settings. Here I would recommend setting "large context". Well, that is, any neural network has a context. This is, well, roughly speaking, the number of tokens that it can remember, uh, well, over a period of time and operate with them, right. For example, Claude, I think, has either 100 or 200 thousand. Well, for now, you can think of it as letters, right. So, it can remember and read 200,000 letters at once, and work with them, but no more. It forgets, as it were, for example, what code is. This is some text, some letters, right. So, "large context" and "auto-run" - this is what I was talking about, about it running commands itself. This is actually convenient. We can, of course, well, as it were, we have the desire to control, to predict all this, you know, so that it doesn't take a step to the right or a step to the left. But in development, uh, now, as far as I can see, everything is moving towards the opposite, that is, to distance ourselves from control as much as possible and let neural networks do everything independently. Well, and this is not bad, actually, right? That's it. Through this, we can do higher-level work, that is, creative work, come up with something, and so on. That's it. Well, okay. So, uh, so so so. Here we have our Scripts file. Let's ask it to delete it. Uh-huh. I wanted to tell you a little more about our Vibe Coding Hub community. And here it deleted it. Uh, in principle, we are gathering, well, we have experienced developers, just people who want to do some projects with neural networks, or even some people want to come to try to do some startups. We gather around this story, around vibe coding, which I am now, uh, demonstrating to you, and, uh, well, we try to do all this, teach people, show, tell, uh, show that it's not scary, on the contrary. That is, robots, not robots, neural networks are not taking away any work from us. On the contrary, they give us the opportunity to do something, well, more creative, let's say, than before. That's it. And this is exactly, uh, a video to demonstrate what we will show, what we will teach, and so on, in our hub. Uh, now, look, I'll show you something else. This is, for example, a neural network. So, well, this is a normal model, right? Well, it's also thinking, actually. So, what will we do now? We will give it such a task. Write a technical specification for a website in HTML, CSS, and JS about vibe coding. Explain that vibe coding is when we come up with ideas, and the neural network writes code for us. And vibe coding hub. Hub is a place where we all learn this technology together. So. And at the end, insert a link to the Telegram bot. This is our community's Telegram bot, which, by the way, was also written by a neural network on Cursor. Let's try now, while it's writing the technical specification, I'll tell you the following. We, uh, well, generally, if you want to try all this, you can join our HUB. We have a paid subscription for a week for 3,500, for a month for 10k. That's it. But you can come, work with us, learn. 3 days are absolutely free. In principle, to get started at all, it's, like, normal. That's enough. So, right now, I'll show you how all this is done. That is, we just ask the neural network to write the technical specification. Well, one neural network to write the technical specification, and the second one to execute it. And, as it happens, we will place, well, this small website, a landing page, that the neural network will make, we will place it under the video. You can go to it and click around. That's it. And join our hub for 3 days. Well, or more, if you wish. That's it. Let's try. So, it's still writing. So so. Uh-huh. So, we copy it. All this happens, as it were, live. And let's give it a task. Just write this website according to the technical specification. That's it. That is, we have given it the task, and it should now do all this. It will take some time. Uh, well, I don't know, while we can probably drink tea. It would be good to chat, but we can do that at the conference. That is, every evening in our hub at 7:00 PM we have a conference. We discuss technologies, analyze projects, and so on, just vibe. That's how I'll help create. I plan to release a series of videos, uh, well, this is just an introductory one, and then some more, well, additional features, let's say. Well, some life hacks, how to work with this at all. That's it. That is, uh, I've been developing with Cursor for about, I don't know, maybe six months, and the flight is normal. There are constantly some, you know, improvements and so on. And the further, the cooler it gets. That's it. And it's always better to stay up to date with this. That's it. And you can stay up to date with this by being in the community that gathers around this. So, it has created an HTML document for us. In principle, let's look. I don't know, for those who don't know, any website is, as it were, an HTML document. You see, it consists of some blocks. And it has generated such an HTML document for us. I won't check it. I usually don't check anything, because there's simply no need. That's it. So, uh, it also created a file with styles. Styles. Well, that is, we have some markup, and also where and how the elements should be located, right? And styles are how everything will look, what fonts, even these underlines, something else. These are styles. They also need to be, as it were, written. And it does all this. And a JS file. What does a JS file do? In principle, it simply dynamically changes this markup, calls some functions, and so on. Well, it seems everything is ready. Let's try to run it. To run it, we will need something like a Live Server server. Let's try to install it and run it. So, it's installing now. In principle, this Cursor is a fork of VS Code, a development environment from Microsoft. And it is identical in functionality, only it's also powered by neural networks. Well, there are different development tools. We are currently using this one and recommend using it. It's very convenient. Let's see what happened. We allow it. So, the server is running. Here it is. Well, here's the landing page that turned out from one prompt. "Write, think, neural network writes code," and so on, and so on. What is vibe coding? Advantages, community. Well, it seems not bad. Let's also see how it will be, uh, to stay updated with news. So, let's see how it will look on a mobile version. So, well, this is how it looks on a mobile. It also seems not bad. I won't fix anything specifically, just to show what comes out of one prompt. So, it turns out to be something like this. It even showed this function. So, let's see if it managed to create a link to our Telegram bot. Yes, in principle, it did. If you click on it, there will be a "Start" button. Let's see. Start. Well, it checks the subscription to the channel. You can subscribe to the channel, where our news will be published. This is Vibe Coding Hub News. That's it. And here you can click, get a three-day access and join our HUB. In principle, that's why, uh, this landing page I will post, uh, and attach it as a link, like to the description or how it's done. That's why try it, come, we are waiting for you. 3 days is absolutely free. We will teach you everything and tell you what's happening and how to move forward. That's it, thank you all very much. Goodbye. Yeah.