NEW Tempo Labs AI Beats v0 Bolt.new Lovable.dev?!!🤖 PRD Generation INSANE AI Coding Agent Wireframes

What's going on guys so on this channel we've been covering many different AI coding tools we've covered bolt. new we've covered bolt. DIY we've covered wind serf curser recently we covered pythagora rine or R code Klein we've covered pure code AI yesterday the list goes on and on and we are searching for the best AI coding tools and features and different tools have different strengths and weaknesses and I'm really excited to dive into the tool that we're going to be talking

Today because I haven't seen too many people talk about it and from what I've seen so far with testing it out is pretty impressive to say the least so what tool is this you may be wondering well it is called Tempo Labs where you can build react apps 10 times faster with AI so Tempo empowers designers and developers to collaborate using a single source of Truth so without Ado let's dive right into it so Temple Labs is a y combinator backed

Company and you can see on wi combinator here they were founded in 20123 team size of about eight located in Toronto Canada you can see some more information about them different jobs available and whatnot active Founders All the specific information if you want to check that out I'll leave a link down below as well as all the links I cover in today's video now I've mentioned before that in the whole AI coding space there's really like categor between some of these

Tools for example cursor wind surf Aid these are all of course AI IDE okay so this is where you're going to be doing um the bulk of your you know large programming if you're doing actual full project builds um now to prototype you may be using something like bolt. new lovable dodev bunch of different ones like that that are within the browser and allow you to easily prototype maybe like v0 and I would say that Tempo Labs falls into more align

With some of those categories and there are some cool things that I think make it a bit unique which we'll dive into in just a second so you can edit code anytime open in vs code push to GitHub pick from hundreds of components and templates which is really cool so you can see visit react components so it looks like react components.com right here is um made by them as well so you can see the tempo Labs logo so you can simply

Choose some of these components which is nice um typically I like using stuff like Shad xen or 2 .d but this is good that it gives us some variety as well now next is the pricing and plans here so just like bolt. new there are different pricing plans now on here on the front end of the website it's kind of vague with some of these pricing like 330 to 350 right here and you can see um there's really doesn't tell you

The specifics but if we go to the backend side of things I'll show you what the pricing looks like so there's a free plan which is pretty generous to say the least it's 500 daily uh 500k daily tokens so this will give you a good enough amount to go ahead and test it out and then there's also the Pro Plan so 25 million tokens at $30 a month scale is $40 million tokens 50 and then you keep going on and on

You can see unlimited tokens here for 350 bucks a month so if you're really using this maybe cool thing is you can see we have 10 million tokens left and these 10 million will be added in 24 days days so it looks like we got maybe about 10 million uh every single month it seems so that's pretty cool on the free plan okay so once you go ahead and make an account this is what the dashboard interface will look like you

Can see projects over here so you can add a new project like so we'll do that in just a second you can see your current projects right here so we can see backlogs design in progress design review Tod do we have sort of like a can band board for our projects or features components that we you can simply just drag over and you can create a new project here as well invite different team members and that's pretty much it very minimalistic

Design in terms of you know the dashboard it's really just straightforward but once we actually get into the project you'll see what it looks like so let's go ahead create a project so you could either generate a new app connect to a current existing GitHub repository or design on a blank canvas so let's just generate a new app we'll click next now it's asking what do you you want to build so the right here you'll see it's saying build with v

We're going to go ahead click custom and this is one thing that you know at the moment I'm not too happy about but I'm excited that the nextjs is coming because I personally just like nextjs more than using vit but that's you know something to look forward to we see that they have some good features that will be coming such as nextjs remix is a great um framework as well and then right now they have a super B integration which is

In beta and this is really awesome that they're actually integrating these ORS like drizzle and Prisma which is really nice so I'm excited to see where this um you know software does grow as they add these new features this will be interesting but for now let's just stay with v cuz that's our only option and you can get generated ideas right here by simply just clicking this refresh button so for example if I wanted to do a DIY project ideas generator

We could simply click this uh you could an image here too and you just click generate okay so now you'll see it is loading the project we simply just did a very basic prompt and now it is generating a PRD and this is one of my favorite things when an AI coding tool generates a PRD for you and a quality PRD right so if you've seen my video on something like uh co-founder where it generates prds and user flows for you

This actually kind of reminds me a little bit about that and this is something that I hope a lot more AI coding tools Implement you didn't see my video on that I would definitely recommend checking that out too because I think that's the way that a lot of these AI coding tools will be working in the future like look at this I think this is very similar if you've seen my co-founder video like it had it had this similar type interface

Right here as it's building out the prds and the different things so it generated PRD now it's generating a mermaid diagram to show the user flow which is really nice now it's creating the wireframe based on the PRD and the mermaid diagram tip if you delete all the generated wireframes you'll be able to click to regenerate so now it's generating wireframe specs we're gener creating Our Roots right here it's generating the filter section it's generating project card generating save configuration generating

Home Route so as of now this is very impressive to say the least to me um we can see that we have sort of like a view right here um that is loading and the whole entire tree right here is generating different things like the filter section the project card all that good stuff as this is going if I click on the PRD right here so you'll see we have three at the top we have PRD design and code you don't

Know what PRD is product requirement stock it's really essential for building out your apps this is something that I've taught in many different videos like if we go through different cursor videos or whatnot I always suggest starting building out your PRD and you'll see here now we got potential problems detected so okay it's actually loaded up and it looks pretty decent first generation already and it already I didn't even have to click fix these problems it actually just fix them itself

So we can see here our PRD so feature title this is a d do it-yourself project idea generator clean minimalistic interface that generates random do-it-yourself project ideas based on user selected filters displaying projects details in an aesthetically pleasing card format then boom boom boom I I just typed a simple prompt like I really didn't put much time into it you can see right now we've used 31k tokens out of our 50k daily tokens this is daily tokens so that's actually really

Awesome if you forgot next we can see the user flow so this is the mermaid diagram we can make this bigger and you'll see here that we got a mermaid diagram here select filters open menu yes modify filters like no select project categories choose difficulty set time requirements all this different stuff right here obviously if it's more intricate it could even be more advanced 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 CS that work 24/7 never get tired and book book appointments while you sleep trained on thousands of successful conversations our AI agents El perform human teams at just one tenth 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 cuttingedge AI technology it's time to accelerate your stride with AI agents so contacts so you could add visual contacts as well you could regenerate this made diagram like we mentioned before now if we go over here to code this is where we can actually see our code so we see home. TSX we

Can see the code right here we could actually go ahead and start editing this code if we want if we edit it you may want to click save up here and then the changes would show over here we got a nice code editor here this is 126 lines of code we can see our terminal here so we can see it started up V right here and all the different commands which is nice you could restart here add a new terminal like

Let's say I open a new terminal here I could actually go ahead and run some commands like I just ran LS and now we can see all the different folders and files in our project like source so I could go ahead CD into Source right here to LS now we can see our app. TSX index.css main. TSX you get the point okay so let's focus on the design right now let's go ahead and zoom into some of these to see what

We're actually working with here so here we actually actually kind of got like a browser type interface which is nice we can make this bigger and you'll see here the URL is right here so we could actually preview this in a new tab and see what it looks like and boom here we have our do-it-yourself project generator so we can see here we could select the difficulty beginner intermediate Advance time required right here like 1 to 3 hours we could select

The materials so wood fabric paper let's say paper doit yourself hanging plant Shelf easy whatever let's say generate idea and boom leather tote bag hard 6 to 8 hours right we could click generate new ideas here doesn't seem to be working we could just click generate idea generate idea and we're getting new different ideas now I'm looking here obviously these ideas are hardcoded right now but you could easily hook this up to something like chat gbt have those ideas be generated

Automatically and dynamically next let's scroll down and we can see here in our tree we got uh you know our filter section right here we have our project card and then the save configuration so the toast right here is saying do-it-yourself project save successfully if we go up here in the top right to share we can share a preview link which is in beta so you could deploy right here could add members to the canvas you could share your canvas right

Here you can go ahead click here to view our history so this will show our history within the project so AI create wireframe all the different wireframes right here we can see the time we could restore to the specific version which is nice edit the file here so really really nice and dynamic that they have all this we could view app in new tab just by clicking the play button there okay next here on the left you'll see that we have

The AI chat so this is the AI chat where you can make some suggestions here we have the Dom tree so you can see here if we if we click on the drop down here we can see some of the different stuff within the different uh items right here so our app keep drop down now we got the routes right here and if you're clicking on these it will actually highlight that area like right now we're clicking on a div right

Here um and it's highlighting that right here in the blue okay same thing at the filter section you could go through basically shows like all the different layers okay next we have the components so the assets actually here you can see components with stories components right here icons so you can easily just add these things I could actually just grab an icon here for example and drag it over like so and as you see we got the icon right here so

It has like a nice drag and drop interface which makes it really easy to edit things so if you want you could simply just add different um you know components here different things like that and they have a really nice drag and drop interface which is nice okay also too we have file selector right here so this is where you can easily see all the different files within your project so you get a nice overview right here stories tempo book Dynamic

Source components file so a bunch of different stuff here it's really nice they have all this here we can see our get settings right here so you could create a repository you could clean and discard these specific changes like you typically would or you could keep them right next we have our history again right here we have our design system so design system builder no story generation in progress to get started we can go ahead and click this and then do

Create new story story so you either create a new story or add an existing story and then you'll be able to select context so use the file explorer to select files or folders that are relevant then add some example uses usages select Snippets from the code editor or select elements in the canvas to use you can add notes right here and then also too you can connect to superbase very simply just by going here can also connect to figma as well

So you can see figma plugin right there which is nice also to in the info section they have their docks right here as well as their community so if you're using this tool I would definitely recommend checking those out for sure has some pretty nice docs as well as a community here to give you some assistance okay I'm going to do another prompt right here so make it a lot more advanced with many cool features to impress me also include light

Mode and dark mode and just make it awesome let's go ahead and send this okay as you can see now it's enhancing the project we can see the different changes that are going on right here I could click open to actually see the editor go about its job in doing those specific changes which is really nice so we can see it made the change to the theme. Ts for light mode and dark mode the filter section the project card home. TSX

Okay so now it added a bunch of these things um we're just going to go ahead and fix with AI CU it got some issues we can see here dark mode support with a smooth transition project generation streak counter project generated counter uh progress bar animation when generating new projects some share functionality to share projects added download functionality to save projects as Json which is nice add tool tips for better ux added hover animations on the project card enhance the UI

With Better Dark mode colors added loading stage animation for the generate button so these are all really cool let's see if we can actually get it to fix this and work the first fix with AI didn't seem to work we're getting the five issues as well let's go ahead and see so I'll fix the missing zustin dependency okay so it had zustin that's why by installing it and then we'll use the theme implementation to use local storage for persistence okay okay

And it looks like it fixed those so really good job um also too I do want to knowe if we click on some of these things over here you'll see that we have sort of like a editor right here so we can add classes we can add modifier with inail and CSS position size spacing layout so you can visually edit the code right here and I think this is really crucial and really cool that it has this this is something unique

That I haven't really seen too many have we got Styles right here text effects all in all just from this alone like this and so many different things this tool is definitely unique and the quality is pretty good um we can see our street counter here we can see we generate new idea and there's the progress bar we have the loading image for our uh loading animation for a button here let's see if light mode and dark mode works boom light

Mode and dark mode works and it works pretty good obviously there's a few issues here with some of the colors we could fix that let's download the project and it's downloading it as a Json right here so if I go ahead and open this right here um let's see oh and it did work it's Json right here so theoretically you could upload this Json to another location and it would import the project so pretty cool that it has all these features

We got the share button up here um all in all guys I think it did a pretty good job and this is just two generations two generations with AI we have all these different features you can visually edit the code it automatically generates prds project plans all this good stuff I think this tool is definitely something that um has a lot of potential I'm really excited to see once they actually implement the nextjs and remix side of things that's going to

Be really really key then I'm definitely going to be using this a lot more at the moment I think this has so much potential and if they can get those uh other features rolling out I'm definitely going to be integrating this into my AI Tech stack let me know what your thoughts are in the comments Down Below guys have you tried out tempol labs. yet if not definitely check it out down below I think this definitely could be an alternative to

Bolt. new v0 to lovable dodev and there are a few features that it may be lacking like you know the different framework support like nextjs that's one of the big ones and remix but it definitely has a lot more features that some of these apps don't have like the PRD Generation all these different Integrations and this the whole UI is really nice and really userfriendly being able to edit the code visually is really nice like see the divs see the elements

The components have a drag and drop Builder have their own component Library where you can easily integrate it within the Builder they're doing a really good job and I think it's something that you definitely want to stay on the lookout for you can also reference when you click on these right here you can reference the area right here as you'll see we're in a div right here and we also have different options down here too like AI right here you can

Add image you can click certain things like this uh storyboard and then talk to the AI like so we can add different things like blank horizontal layout vertical layout grid layout route you can add text right here all your different headers H1 H2 H3 paragraphs you can drag right here and then toggle play I don't know what this does but all in all guys this is pretty cool let me know what your thoughts are in the comment Down Below guys if

You're new to this channel we upload videos all the time on ai ai coding Marketing sales business growth AI agent so if you like that type of content you got some value here make sure to like the video comment down below and subscribe to stay up to date with the uploads I'm really excited for what I got planned for you guys so make sure to stay tuned for all the value that will be coming your way shortly also too guys if

You haven't already joined our free Facebook group and Discord Channel stri community.com I'll leave a link down below and then also too guys you're definitely going to want to check out our stride AI Academy which is currently free it may not always be in the future but it's going to have a lot of free resources courses templates tools Etc and then also too guys if you want help implementing AI agents like AI appointment Setters Ai call centers into your business so

You can streamline your sales process book appointments effortlessly like the rest of our clients then book a call down below at executiv st.com and we can see if it's a fit or not to work together other than that guys I will see in the next video keep hustling keep grinding and of course guys accelerate your stride take care