FREE: Llama Coder UI Component Builder!🤖 v0.dev & Claude Sonnet Artifacts Alternative (Open Source)

What's going on guys joshh pook here and in today's video we're going to be looking at an opensource free alternative tool that you can self host it's alternative to tools maybe like Claude artifacts or v0o for coding we all know coding with AI is pretty much on the up and up right now and it's really just impressing us every single week with new advancements new tools coming out and the tool we're going to be looking at today is called llama coder

Let's dive right into it [Music] all right guys so this tool actually ve uh impressed me quite a lot basically um you know just looking at it be basically because one has a completely free versions uh Cloud hosted so this is something that's cool um I'm going to show you how to self host it in just a bit but first off let's take a look at the fully um free Cloud version we have right here and this is cool because you

Know I I personally love CLA artifacts I love vzer but these are tools um you know that have like vzer is free but then you have to pay for it and then CLA is just to get artifacts I believe you have to pay for it um yeah I don't think they do artifacts on the free tier I don't know but pretty much you have to pay for it and it's really good I'm going going to continue using it but for those

Of you who want a free alternative or want to use um these local type models um even though we're not you know using our own oama um we got llama 3.1 405b so the 405b version and then llama 3.1 70b and then Gemma 227b okay and yeah first off this is a really nice UI and it's made by our friends at together AI if you're not familiar with together AI I've used them in other videos they're actually a really good tool

Um yeah they're they're really useful tool like I've used them with continue Dev in VSS code uh to be able to use llama 3.1 405b in vs code but uh simply put let's just do a quick demo here let's just say um build me a modern let's just say um task manager app that has some pretty cool features okay of course just like when you're doing any type of PR something whether it's Claude chat gbt whatever the case may be you

Want to be more descriptive than this you typically like for me I always like to get very nitty-gritty if especially if I'm using it for coding in terms of what I want and what features and capabilities all that good stuff but uh here we can select the model we'll just do the 405b version and then then this is really cool as well this is pretty much like what every um AI component type model is doing now is incorporating with Chad CN

UI if you're not familiar with shad CN it's like pretty much the hottest UI that every Dev is using um so yeah we'll just toggle that on because why not we like Shad cm and this is really cool wow this is actually very I mean this is really cool because if you're using like o Lama and a local model it's unless you have some crazy specs it's going to be kind of slow right but as you can see here this is

Extremely fast all right this is extremely fast we're using a open source or local model whatever you want to call it and then we have the UI right here so we can literally see it we can see you know it's nothing crazy but it's actually not too bad we have task manager so like we can add new task test and let's say medium boom so it actually worked we got a test here and add another one hi boom um we'll see

If we can delete it works okay I want so we can actually make changes to the app let's say if based on the priority priority the user picks add a flag beside the task red yellow or green depending on the priority and um yeah we'll just keep it at that for now just you know obviously I would make this a little bit more advanced if I was actually going to use it but just for the sake of things like this is

Actually very impressive this is free guys so um I don't know if there's some any sort of rate limit okay so so this is um okay so it's importing a component that we don't have which is this right here um it's trying to import uh select content okay maybe um okay so to be honest I'm having some trouble doing the iteration on it with this right here as you can see or as you guys saw I was getting that error with

The you know not able to import a component that's not there uh and now it's just pretty much not that it doesn't seem it's like the best at iterating maybe it's just this specific one um but yeah what I personally would do is you can open it in sandbox so I really like this feature how you can open it in code sandbox. and let's see if it works any better here okay so still similar issue um I do like how it's

Black now for some reason whatever reason but um I I think this is really awesome that you can take a look at code sandbox you can see package.json the CSS uh typescript config uh index public index libraries so pretty cool stuff um what I if like you know if I was still en encountering this issue on a regular basis when it comes to iterating then what I probably would do is generate the first code um the minimal viable code or whatever

The uh iteration of version one with llama Cod or and if I need to improve upon it more maybe throwing that code over into something like chat GPT or Claude Sonet or whatever the case is um if you want to do some iterations to it let's try one more real quick all right so here I said create a calendar app that is modern all right um it's a little bit cut off here I don't know if that's just responsiveness issues um

Let's just say you okay so use the abbreviation of the day and make it so I can add events to days with time [Music] slots and names okay let's see how it does with iterating this okay so here's what we got test time Tuesday okay so I mean it did add the new iteration but it pretty much removed kind of like the whole concept that we had before was still still supposed to look like a calendar um so yeah in terms

Of iterating it's you know it is not the greatest it's not as good as Claude by any means um you could go publish app here so this means it's publish and copy to your clipboard okay so that means you could share that um but anywh who let's go ahead and actually self Host this all right so few things you're going to need to self-host it um we're going to use git clone you're going to need a together AP AI API key

So U make sure you get that I believe there's like threee $10 credits or whatever so should be free at least as when I got it it was free and at the time of recording this video you can get set up there you don't have to put your credit card in or anything I believe and then you're also going to need node um yeah this is built on I believe it's using nextjs I'm assuming and and let's see yeah Prisma nextjs

So yeah all you're going to do is we are going to get clone the repo right here so I'm just going to run this command in the terminal so I got my terminal here go CD desktop and then CD development and then CD Repose okay I'm going to get clone llama coder you can see we just cloned it now I'm going to CD into llama coder okay now I am going to code do so that's going to open up the folder

In vs code and then right here where we have our envir example environment variable I'm just going to rename this to EnV and you could use this helicone API key this is for observability not going to do that we're just going to use together AI so just going to bring this over here and grab my API key right here paste that in and save it on the other screen okay so I just did that and once we're done that we can

Basically just run npm install so I'm going to pull that up going to open up the terminal here and I'm going to run mpm install in llama coder going to start installing the dependencies okay so everything's good with that then I'm just going to go npm run Dev and this should start things up on Local Host 3000 if that ports available I may be using that right now so it may go to 3,001 yep 31 let's just open that bad boy

Up and if everything went well it should load no problem cross our fingers okay it took a little bit just to uh from a cold start but here we have it first off UI is really great um yeah I'm genuinely impressed with this tool it's a lot better than some of the other kind of like um uh what do you call it CLA claw artifact alternative tools that we covered here in terms of Open Source it's made by together AI so

They're a big company they know what they're talking about they know what they're doing when it comes to Ai and I really like this Chad CN integration I really like this whole thing um honestly if there's no rate limit on the free version may just make sense to use a free version but let's go ahead and since we have create together AI credits and YOLO let's go ahead build a modern Kel culator app okay I doubt yeah it shouldn't I'm assume

It wouldn't have the actual functionality but let's go ahead and see if I can get the component and the UI looking pretty nice this is the open source version like this is I mean obviously we're using together ai's API but boom Lightning Fast really like it what I love to see 6 * 5 where's our equals button did it not put the equals button come on man oh that's the equals button 6 * 5 wow okay it has the functionality and

Everything interesting wow I'm pretty impressed uh and then I really like how you can just go right directly into codes sandbox. go into the editor see it live and yeah I think this is definitely a useful tool I'm really you know I love seeing these these new AI tools these new open source AI tools um I love the whole claw artifacts feel you know the vzer feel to these apps um and yeah it's pretty awesome so let me know what your

Thoughts are in the comments Down Below guys let me know if this is a you know you think this a good worthwhile app or do you have a a better idea do you have a you know another app that you prefer let me know what you guys use when you are coding out your apps or whatnot and if there's any other app or you know open source repo or whatever the case may be that you want me to do a video

On or cover or if you have any questions issues about installing this or following along with the video let me know in the comments Down Below guys uh all if you did enjoy this uh content you know and you're new to the channel then um and you you know want to stay along with with the journey stay up to date with our daily uploads then definitely hit that subscribe button hit that like button also too guys if you haven't already joined

Our free community stride community.com our free Facebook group free Discord Channel bunch of free resources are going to be added in there behind the scenes stuff as well as you can network with like-minded individuals as well as myself definitely check that out strid community.com other than that guys I will see you in tomorrow's video keep hustling keep grinding and of course guys accelerate your stride take care