FREE: E2B Fragments Beats v0.dev & Bolt.new?!?🤖 Open-Source + FREE OpenAI o1 & Claude Sonnet 3.5

What's going on everybody Josh poock here and in today's video we are going to be taking a look at a free opsource alternative the tools like bolts. new v.d this tool is called e2b fragments and this tool will allow you to build beautiful UI components right in your browser you won't have to code you can literally just prompt it with the English language I'm going to show you how I can use this as well as self Host this and you're going

To be able to use it with any sort models such as open AI models uh anthropics models we covered a previous version of this tool on this channel a while ago but now they got a new updated version that's even better let's dive right into [Music] it all right guys so we've covered a lot of different tools recently the other day we covered bolt. new which is a new open- source um tool that kind of has a new Paradigm for building

Uh and coding in your browser all right it has like a vs code Type interface I would definitely recommend checking that video out I'll leave it link down below now we've also talked about opening eyes new canvas right where it kind of has a few new cool features as well such as being able to Port your languages and um you know add comments and has a really nice interface kind of similar in in a way to artifacts you know and then

We have qu artifacts right so there's all the different types of tools and I I think they all have their different pros and cons and the same thing goes for e2b fragments all right so this is the company e2b and the tool is called fragments links to everything will be down below in the description now currently there is a cloud-based version and a selfhosted version okay so I'm going to show you both in today's video first things first though I want

To touch on the cloudbased version now usually I focus more on the uh open- Source version but the cloud-based version at least right now is pretty damn cool because um they let you run this for absolutely free and you know you're not just getting like GPT 3.5 or anything like that you actually have access to open AI 01 preview 01 mini GPT 40 gp4 mini turbo Claud son it you know all the different models here that you can see like really

They're not holding back when it comes to these this model selection and you can access this for free no API key you just sign up and you're good good to go so I'll go ahead and kind of show you if you're not familiar with e2b we did a video on this tool a while ago um it was e2b artifacts but this is the new and improved fragments version okay so so I actually saw the CEO tweet this out a few days

Ago on October 3rd you can see here introducing fragments by e2b Dev fragments is a fully open- Source nextjs template for building apps that are fully generated by AI it supports AI generated apps with Frameworks like nextjs audio stream uh streamlit V vuejs or you're completely custom stack with custom libraries powered by e2bs sandbox and then link to code and comments All right so even in tools like vzer we've been seeing a lot of different updates I haven't even really talked

About some of them uh lately right because there's been so many other tools like um you know bolts and all these other tools but we're seeing all these different upgrades and iterations and sort of like how we're seeing in the AI IDE space with tools like cursor pair AI melt Le uh super Maven all the well super maven's coming out with their own ID but it's like the ID AI race we're seeing the same thing with whatever you want to call

These type of tools like browser based artifact type AI um coding tools right so uh and I see that like I said before there's some pros and cons to each I think a few cool things that fragments has for example is some customization so we have Persona here so you can choose Auto python data analyst nextjs developer vuejs developer streamlit developer gradio developer and then you can go to yeah your models here select whatever model you choose you can also go

To llm settings and you can choose like output token temperature top P top K frequency penalty presence penalty all that good stuff you can also upload an image as well so I think it's really cool that you can customize the Persona right here I think it would be cool if like you can maybe add your custom personas but I think this is a feature that we will see more of whether that's you know P called personas or agents whatever you want

To call it I think it's definitely something that uh that more companies will be doing okay so I'm actually going to upload this image right here this is an image of the chat GPT user interface and I'm just going to go ahead and say create this all right so as you can see it's generating right here so to create this fragment I'll follow the few steps set up Basics basic next nextjs component structure create Center layout with logo at top design

A grid with four cards etc etc you can see here now we can see the code right here that it's generating and then we can also see the preview so very very similar uh to something like claw artifacts and it uses e2b sandbox now we can see here it didn't get it perfect by any means it's missing the sidebar so I'm going to go ahead and say don't forget the don't forget the sidebar okay boom and we can see we got

The sidebar here and it even uh works and it has like a pretty cool um it's actually pretty decent you know for first iteration well second iteration I could tell it to add the chat box to down here but uh we don't need it to be perfect you could deploy to e2b right here so um deploying a fragment makes it publicly uh accessible to others via the link you could accept and deploy it or you could just take the code here

Put it in into your IDE and keep in mind guys we're using Claude Sonet 3.5 right now so this is really good just because obviously it's a lot faster than 01 and 01 mini but you can use these premium models right now on e2b fragments and I mean there's probably some sort of rate limit I would assume I personally haven't reached it yet but you know as more people maybe start using it maybe little rate limit a bit but as of

Now it is 100% free you don't need to bring your own API key um and it's I think it's pretty cool that you can do that now like I said before there also is an open source version so here is the GitHub repo for the open source version of this tool now to actually get this set up all you're going to do is get clone the repo right here so it actually has the instructions right here so you're going to run

Get clone in your terminal once that clones you're going to CD into fragments okay and then you're just going to run mpm I okay that's going to install the dependencies are you tired of pouring thousands of dollars into appointment Setters only to watch leads slip away imagine having a team of elite sales agents booking qualified appointments for you around the clock no more wasted time on training no more frustration with performance and no more draining your budget on inconsistent and expensive

Call centers introducing stride agents AI powered appointment centers that work 24/7 never get tired and book appointments while you sleep trained on thousands of successful conversations are AI agents outperform human teams at just on10th of the cost join the ranks of businesses that doubled their appointments and booking rates in just a matter of weeks don't get left behind in the AI Revolution visit stride agents.com now and transform your entire sales process with Cutting Edge AI technology it's time to accelerate your

Stride with AI agents once the dependencies install you can run code space dot or just like open up the um the repo into your code editor all right that's going to open this up then what you're going to want to do is you're going to want to make a copy of the environment. template file right here so you can see here I just made one and it's called Environ env. local and these are the environment variables that I'm using there also

Are other ones like you can see here they give you an example right here with many different environment variables like you can add your mistal API key your Google AI AP I key your together AI API key grock anthropic many different models um you are going to need an e2b API key though for this um for the uh self-hosted version so you can go to eb.com and you can get it for free by just signing up for an account I believe

Um you get H I don't know if it's credits or whatnot like if I go to usage here um I think it they give you a certain amount of free credit I personally haven't reached a limit yet so um yeah you can get this for free and access it but you will be using your API key and then once you actually set those environment variables so I just set the open AI API key the anthropic API key and the e2b API

Key you're just going to want to save that and then you're just going to run npm runev to start the development server it's npm run build to build the web app but we're going to run mpm run Dev all right and that's going to start fragment on Local Host Port 3000 I just have that Port occupied right now as well as 3001 so I'm on 3002 as you can see here we got uh e2b loaded up here all right so I'm

Choosing the nextjs developer and I'm just saying please make a modern professional task manager app all right so as you can see here we got our basic task manager app here I can put test add task very basic you could obviously improve upon this iterate upon this we got the code right here so we could copy and paste it or deploy it or download it whatever you choose and that's pretty much it guys that is e2b fragments I think this is

A cool tool and I really just wanted to show you guys this because I just covered bolts I just covered canvas we've always covered flaw artifacts and I think this is just you know adding to the iterations we're seeing all these tools they're going to be continuously improving um I think what we saw with bolt is a pretty cool concept um if you haven't saw that video like I said check it out down below it's a pretty new tool but I

Think it's just a little bit slow it needs to work out some of the Kinks I think this one's pretty good this is like the version two of EB's um tool you know artifacts and fragments and it's pretty fast pretty good you can use multiple different models and it's it works pretty well let me know in the comments down below what your favorite in browser type of AI code uh pair programmer is whether that's claw artifacts uh do you like open

AI canvas do you like v0 bolts or maybe even fragments if you've already tried it that's pretty much it for this video guys I just wanted to give you a quick update on this tool if you're new to the channel we upload videos every single day on AI automation AI coding business growth Marketing sales Etc I got a couple of really cool videos I've been working on that I'm excited for you guys to see coming up shortly was just working on

One for the last few hours before this one so if you're new to the channel and you like this type of content make sure to smash that like button and subscribe to stay up to date with the daily uploads also too guys if you haven't already joined our free community sty community.com our free Facebook group and Discord Channel check that out down below then also too guys if you do run a business and you have like a call center you have

A bunch of leads or appointment Setters that you're paying for and you want to automate that with AI check out stride agents.com or will help you set up AI agent appointment centers and will book appointments for you around the clock 24/7 for one1 the cost of a actual call center 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