TLBrowse AI🤖 Websites + UI Components Generated Instantly When User Clicks💻 Local Whiteboard GUI

What's going on guys Josh pook here and in today's video we're going to be looking at a tool called TL browse essentially it's a tool where you can automatically generate websites on the fly in a whiteboard style type uh interface and as you interact with the website it's going to automatically generate new pages new instances as you can see here in this demo we're going to show you to set this up locally so you can host it and use it with

Really any model of your choice let's dive right into it [Music] all right guys so as you can see here in kind of a little demo here just looking at the UI it's maybe like if you've seen some of the other videos we covered on this channel on different other tools it's maybe not the most impressive um UI or user experience whatever the case may be but I think this highlights a very interesting um and potential future of where we're we're

On the trend towards with AI development coding and you know all this in general which is basically with AI being able to code so efficiently and as it continues to improve and improve um it could basically eventually do something like this where it could render and spin up websites based on user just like on the Fly where the code doesn't exist and on the fly it completely builds out a uh a site so you I mean this could really um yeah

I mean this is actually I mean on a small scale this is kind of highlighting something I mean if you really want to dive into it I'm kind of just thinking of this now like I mean this would be really cool with like video games and stuff where you could like you know that same concept obviously that's long down the uh roads I mean who knows maybe but um where you know a a a world of simulation like Auto renders and

Generates um different scenarios and whatnot so anyways that's just a thought that came up in my head but anyways so you can go on to um T brows.com I'll leave a link down below and you could try their self-host version you uh you just have to sign up with an account but you can also uh self-host it or sorry you can try their Cloud version but if you want to self-host it I'm going to show you how to do that and

Yeah basically all you'll need to do is get clone the repo um so you just go into your command line you run uh get clone and then the repo which is right here and then um once you clone it you're going to CD into TL browse and then for me I just dig code dot which opens up the uh the project in vs code and basically you're going to want to create a.v. looc file and I'm not going to open that

Up just because my API keys in there but uh all you're going to add into that file is literally copy and paste this the GitHub will be down below but anthropic API key Das your anop toic API key now I'm going to show you in just a second how you can use other API like other um tools as well um in just a second actually I'll show you right now so if we go over I pull up uh um good old

Vs code here we can see that there is a client TS so here you can see a base URL so I haven't tested this with uh ol but I'm assuming you could probably just change the uh AMA base URL here and then you'll see supported models right here um so we got like Gro open AI mistol different models here okay and uh in the G Hub it's not super explanatory in terms of like documentation in terms of how to change it

But you change the model within the route. TS file to change a model name I believe you just change the model name right here it's about as of the time of recording this it's on line 116 model name or 117 right now it's Claude haou you could go ahead and change that and then save it once you do that you're going to bun install and then bun Dev so um if you don't have bun installed on your computer you're going to

Have to download bun just Google it download it and then bun install bun Den Dev uh run those two commands within um when you're in that folder and that's going to spin up the local hosted uh basically app right here um okay so also to okay so this is actually I don't know 100% if so so you must provide open API open router API key to change M on prompt um so the way I just showed you in the route file

I don't know 100% if that's the exact specific way you should do it um you could just I know it's in the route folder cuz he says that in the GitHub but you may just want to play around with it but I do see here you can connect an open open router key right here um which basically allows you connect to connect a bunch of different models so you can connect Sonet Opus GPT 40 and then do it that way um

But let me just basically once you load it up it's going to look something like this so kind of like a whiteboard type page as you can see here we got um a page right here so all I did was I literally just clicked on I just typed in in here youtube.com and it's essentially going to pick up that it's going to recognize that it's youtube.com and it's going to generate a uh page right here so as you can see this

Is a page I can literally scroll through it HTML um and you can see trending videos your subscription your library Etc and then as I click on something let's see trending videos all right so I just refreshed it and um created a new one but if you click on explore as you can see now it created an explore page right for/ exlore and oh by the way guys um you'll be able to access it on Port uh 3000 typically I already

Have a xjs app running right now so it's 30001 but uh yeah you'll get that after you bun Dev and then as you can see you can double click to kind of there to be able to interact with the website you can see it even has kind of this um effect right here this style we can go to like watch History we can go to liked videos and it's going to create two different ones right here um so yeah that's pretty

Cool I think like in terms of actually using this for something like I wouldn't use this exact style like I wouldn't this is not a tool where if I was to use it where I would pick like the style is okay it's it's pretty decent especially for doing this like in the way it's doing it but um it is one just using HTML so it's not using like anything like react or whatnot and two uh I think this is kind of

Cool like if you wanted to get ideas for maybe any sort of website whether it's like a whatever what type of website a Blog Ecom project whatever and you want to just even maybe get ideas of how like the the the the hierarchy and the structure may look like um then this could be potentially useful for you I mean it could even maybe if you're doing some sort of SEO maybe it could give you some ideas to in terms of what

Type of pages you may want like as you can see here we got your liked videos um we could watch now then we can go here so this is giving us kind of like ideas of recently watched watch History date search watch history history settings clear history so it's given us some pretty decent ideas um so I could go to like to download history here then we got videos I go to library I mean it could really go on and on

And on this whole like whiteboard thing it's endless scroll so it pretty much infinite so uh yeah and also too guys like if I go ahead and all right so here I'm actually just prompting out like you would chat GPT create an e-commerce website selling makeup to young women ages 18 to 30 with the colors pink and purple I can go ahead and run this and it's going to do that so you can connect like as it's doing that I'll continue

Talking but you could put ebay.com you could put amazon.com you could put like look at it this actually not bad like it's kind of interesting I mean I wouldn't use this necessarily but um it gives you some good like some decent ideas like add to cart and the thing you'll notice too is it's once we start seeing this and look it even gave us a name Enchanted glamour.com it's maintaining that same theme so that's kind of cool um and you can

Like go up here all right you have different toggles up to the left here you can't really see but you have different actions here um just for styling it around moving it around you can add text here you can export this as HTML if you wanted to um but yeah I think what would make this better is if you could like if it had more stuff like react and and all those um all the stuff that would be more applicable to

Using an at least for me in an app other than that I think it's pretty cool that you can like have the tree structure and get a some good ideas around this but other than that guys that's pretty pretty much it for this video this is TL browse new to the channel you got some value here make sure to smash that like button smash that subscribe button we upload videos every day on AI automation business growth Marketing sales Etc open source

Tools whatever the case may be local models so uh make sure to stay up to date with the daily uploads and hit that subscribe button other than that guys if you haven't already joined our free community stri community.com check those links in below in the description below and I will see you in tomorrow's video guys let me know what your thoughts are about this I think this is kind of a cool concept um and let know what you think about like

AI in the future being able to develop things on the Fly I mean we've been seeing you know a bunch of different things uh if I don't know if you've been seeing this but I have in terms of like I mean we saw uh Jensen Huang say like you know that you're not going to need to learn how of code in the future we saw um recently um a leaked thing with like Amazon where they some of the board people were

Saying that um coding is going to drastically change and I think this is like this could be one way that it does in the future once we start to see uh a bit more advancements but um yeah it may not be too long in the future uh the way things are going so other than that guys let me know what you think and I will see you in tomorrow's video keep hustling keep grinding and of course guys accelerate your stride take

Care