This VS Code AI Coding Assistant Is A Game Changer!

in today's video I'm going to explore yet another VSS code AI coding assistant yes I know what you're thinking there are tons of these things now but this really just might be the best free alternative to GitHub co-pilot so let's check it [Music] out we're going to take a look at codium now codium is the sponsor of today's video but the viewpoints expressed are my own I will give an unbiased analysis so they call themselves The Modern coding superpower let's take a look here loved by hundreds or thousands hundreds of thousands of developers over 40 IDE e supported that's crazy all right Auto completion what I'm seeing here is multi-line auto completion so that's pretty cool chat and search and let's see how they are comparing themselves to co-pilot here and I think this is the big piece here that it is free for individuals um 40 plus idees and 70 plus languages which which is pretty crazy full repo context awareness interesting not only is this a sass but it can be deployed on Prim and nvpc which is great for companies with proprietary code and they're s SO2 type 2 compliant so let's see what we get uh individual one seat free forever autoc completion uh AI chat assistant unlimited usage that's pretty big and then it's trained on permissive data which means it is not trained on code bases that are not open source to some degree and then for teams let's see what do you get if you pay $12 a month you get admin dashboard seat management okay GPT 4 uh support so that's uh interesting so I'm assuming the individual one is 3.5 all right so we've got all of our different idees uh different languages uh looks like your your Tailwind image here is broken uh we'll look past that um bunch of Partners and a lot of cool reviews oh I just noticed this one from swix pretty cool all right so let's check it out and see what it's capable of I installed the extension in vs code and I did have to sign in but now this is what I get here under the codium chat let's start out by seeing if it can create a basic node.js Express server and create some custom endpoint so I'm going to ask it using no. JS how do I create an API endpoint for an HTTP server that dynamically converts currencies by fetching realtime exchange rates from a third party service and the endpoint should accept yada yada okay so let's see what it does okay so it is pretty thorough here and fast as well uh let's see what it did so it's having us use the HTTP package and node Fetch and I mean I think this would technically work let's um let's Also let's modify this I want to say uh let's use Express for this instead okay all right that seems to be uh pretty good so it looks like uh require Express node fetch we got our app going on a port uh we've got our get in points here our from and two we're getting that from our request query uh it's using this API and then doing the conversion and it's got even some error checking in here and then it's running so it seems like that would actually work so let's do a thumbs up this is actually one of the best parts of the app I like when you get something right you give it the thumbs up and you get confetti that's pretty pretty amazing I love the developer experience there okay so what are our options we can looks like we can copy the code or insert the code so I have a a server JS file open here and let's go ah and insert it and pretty easy okay let's see if we can get it to explain a code block for us let's say let's just highlight this bit here and I'm not sure the proper way to go about this let's go codium uh explain selected code block all right says this code snippet creates an endpoint slon convert currency which takes query parameters from in two and the ount fetches the exchange rate external API from in two currencies then calculates the converted amount and sends it as Json response um so yeah that's exactly what it does let's see how well it does creating a JS doc style comment okay so it looks like it's going line by line I'm hitting enter for each line okay so it keeps giving us the same example over and over there um but this is this is pretty good so we've got our prams from two amount each example was basically the same thing um but pretty good now maybe I want to do that same thing but with the bun JavaScript run time well I want to check out this as well codium live so codium also has on their website this feature codium live which has various context aware AI chat bots so they have one for bun Lang chain nextjs and and several others so let's use the the bun uh chatbot and let's ask it a question how do I use bun to build a simple HTTP server show a code example okay so it's giving us this example here looks like it's importing serve from bun uh Bun Run server. TS and it's giving us some uh context items here what does this bring us to okay so it looks like it's pulling most of its context directly from the bun repo that's pretty cool so this is really nice to be able to chat with some specific uh AI chat Bots uh for different technologies that could be helpful right here in the browser let's try a different use case all right so I have a nextjs App open here and under the app directory I have an actions. TS file here and it's blank so I want to create a server action to bring in movies from a database so let me write a comment here all right so create an xjs server action that Imports movies from the manga to be sample database that is called sample inflix let's see what it does all right so first option here is import client that is not what I want to do I actually have a lib file here that controls uh the mongod to be connection let's see what the next suggestion is okay that's right client promise from my local file export async function get movies that looks good and then client is going to await client promise sure my DB is going to be sample inflix yep movies is going to await DB do okay do collections is going to be movie and then find all limit of two to array that looks good and then let's return movies the only thing that I'm not seeing here is it probably should be uh use server up here and now I'm seeing these things above here codium refactor explain and generate JS doc that's pretty cool let's do the generate JS doc real quick and see what that does let's say yeah and add it okay that looks pretty good um let's see what happens when we hit refactor okay so it's giving us us some options add comments and dock strings to the code add console log statements clean up this code check for bugs and null pointers implement the code for the to-do comment oh uh generate unit tests make oh there okay generate unit tests make this code strongly typed make this faster more efficient use async await instead of promises verbosely comment this code so that I can understand what's going on let me see what that does okay so let's see let's just apply it and accept well yeah so basically just added a comment for most lines so wait for M to be client to be ready connect to the sample inflix database retrieve all movies from the uh movies collection limit to two and convert the results to an array um it didn't um say anything about the return but I guess that's obvious um and if I didn't explain it should basically tell me that same thing uh just in a very short paragraph retrieves a list of movies from the sample inflix database uh uses mongodb returns a promise that resolves to an array of movie objects pretty cool okay and I see here it says ask anything use at symbol to mention code blocks so let's see if we can say at get movies let's say rewrite this function to remove all comments nice so we could use that to uh refactor probably or to add additional functionality so I like that let's uh let's get some confetti and copy that now if we have an error let's see let's remove one of these awaits and we're going to get an error here and now we can see this new link here codium explain problem so let's do that and see what it says okay I just want to reiterate the fact that it's so fast it's crazy fast so the issue property DV does not exist on type promise occurs when variable client is assigned to client promise directly which is a promise that resolves toong to be client to fix this you need to await the client promise so it very accurately found the issue and is fixing it here so it's notices that we need the await there and what did it comment yeah it even commented here await client promise all right so this is great again and the only issue I see here though is copy code and then insert code I wish that this had some way of just overwriting the existing code here but that's a a feature request um if I did insert code it's going to kind of just insert it wherever my cursor was so I need a c copy this and then uh actually it's going to copy the entire thing probably from client promise all the way up there but now it works so let's now implement this into uh a page here so let's go over to our page and I want to bring these in so let's see uh here at the top go right here and this time I'm going to do control I and I'm going to say use the get movies server action to display the movie titles on this page and let's see what it does pretty good let's accept it uh we need to get rid of this page that we had below that and this is coming from our server actions that's let's see is this cannot find the module actions okay so let's uh see what happened here this should be actions like that so it was going up too many directories there then we have an issue here with our map it says map does not exist on type promise yeah this so this is a let's I think we're going to need to await this and then uh this is going to have to be an async function and then we should be good all right so even though it got it mostly right there were still some little issues which kind of goes back to the point of can AI really do it all but it's definitely helping and assisting so this seems like it should work um let me just go ahead and save this and run it and see what happens okay so we've got movies and two titles from movies and it actually worked which is pretty cool all right I want to try one more thing here let's see how good it is with Tailwind so I want to add some Tailwind classes to this so let's select that control I and say add Tailwind classes to create cards with the movie titles the cards should have a black background and white text let's just see what it does I really like how it does this diff here so we see what it was before and then what it is changing it to that's pretty cool so black background text white um some rounded corners and a shadow I mean that's pretty decent let's accept that and let's save that and then go back and check it out well we've got some interesting looking cards there but it is working codium is pretty cool now none of these AI coding assistants are perfect and they're not going to write all of the code for you you still need to know what you're doing and but they should be able to help you to code faster and for what what I've seen I think codium is very capable of that and for the price it's a no-brainer so give codium a try and let me know what you think in the comments below and if you want to see me review other AI coding assistants let me know and if this video was helpful give this video a like And subscribe

Channel: codeSTACKr

Views: 154,841

Keywords: github copilot, artificial intelligence, software development, ai coding, github copliot, code ai, ai tools, visual studio code, vs code, machine learning, ai programming, codeium vscode, codeium tutorial, codeium review, codium vs copilot, codeium, dev tools, developer tools, software developer tools, openai chatgpt

Id: dNskJAl5dBw

Length: 14min 27sec (867 seconds)

Published: Tue Mar 12 2024