Vibe Coding with Cline AI in VS Code: Generate Styled Code in Under 5 Minutes

Key Takeaways

Hello everyone, welcome back to the channel. Today's tutorial will be a fun and quick one. I'll be doing VIP coding with client AI in VS Code. If you don't know what VIP coding is, it's the practice of providing a short descriptive prompt to an AI model and having it automatically generate complete code for you. That's V code. from installing client AI to deploying a live demo all in just under five minutes. What you'll need an API key from any law language model provider. Client AI itself is open source and free. Let's get started. First of all, let's download client. Let's go to client.bot. In here, you will see all information about client. Let's hit install client here. It will redirect you to a page where you will see an install button. Hit that and the pop-up message will open here asking you to open VS Code. Click that. It will redirect you to VS Code and you will hit install here. After it installed, you will see client logo on the left side that where we are ready to write V code. When you click client logo, you will see this chat interface. Before we can chat with our AI, let's do a little bit of information here. So, we need an API to connect to um your AI. You can choose from any API provider here. In my case, I choose open AI and then I have an open AAI key and then I also choose model. This client is totally free. It's open source. But then you would have to subscribe or pay for your API key depend on the provider. After having your API, here is the setting that you would want to um config before running client. First of all, do you want client to read the project? Do you want client to edit the project? Do you want client to execute the comments? Use your browser, use MCP server or enable all. When you enable all, this is the mask request. It will automatically make this many API requests before asking for approval to proceed to the task. After that everything I think now is ready for the client signed from our sign. We would line to have a vibe coding filed um a virtual machine. You don't need to have this. You can ask client to do it for you. And then you also wanted to have an empty readme. Maybe you also don't need it because we can ask client to also created it. But this is my project skeleton. So then now let's do the V code. I will ask client create a chatbot using hugging face model free. I want a free one and deploy using shrim lid. Run the code for me. Here you will see the API requires top on top is the task versus the tokens. The limit tokens for this model is 1 million on this um contact window side. And you can also see the cost here that how much it will cost you for client to call the API and use the API. Now you can see all of the code is here and then it's also run the comment for you and then here is the error is found comment not found no stream lit. So with that it is going to let's see if it can fix can fix the um error for us. The file is running. Okay the file is running. Error is fixed by client. We don't even do anything. We don't have to debug because we can see it there. Um, there's an error and we just wait until client fixing the error. So, let's see if this work. Hello. Let's send it to the model. Okay, it say hi. But then I will have to delete mine and then say it again like how are you? Send. Okay. So, there's a chat box. The box I have to delete my um request every time. So, let's see. Let's just talk to client and see if it can fix it. I cool. Let's see. I have to delete my chat in the chat bar every time. Can you fix? All right. So now let's go and fix line by line and adding the request or you know delete the things that we don't need. All right. Let's see if is that really work. Let me refresh and let's see. Hello. Okay, get an error. Fix it. It will also look at the error and then from that error, figure out what's going on in there. See here the error is so it can read your terminal and then determine the error and then just fix it hopefully. Okay, task complete. Let's see. Let refresh this one more time. Hello. Woohoo. Yay. And then you don't have to delete your um request or your task your test again. Let's say you are my assistant. Yay. So, this is a history. This is a chatbot. I don't like the chatbot on top like this. So I I'm going to say move move the chatbot um to the end and show all history on top. Going back again fixing. Okay, this seems working. My box is still on top actually. Wait, let me just So, it's star shipping the box here, which is cool. So, we have our chatbot just by talking to client and we don't really do the debugging. We just V code by asking the client to work on our request and debugging run the run the bot itself. really quick, really convenient for you know software engineer who want to let the the bot the AI run the backbones and then just from that um adding more nuance by v coding and if you don't have software engineer or like data science skills you also can just talk to your AI and let it run the backbone itself. This seems very efficient in terms of like debugging. I use GBT4 and if you have cla API even work better. So that is client. Let me know how you think and any feedback you may have. Thank you.