FREE Screenshot To Code Open Source v0.dev Alternative!🤖📸 Build Front End UI With Screenshots!

What's going on guys Josh pook here and on this channel we've covered many different AI coding tools such as cursor Klein co-founder pair Ai v.d and this specific tool is a opsource v0 alternative it will take any single screenshot and build user interfaces 10 times faster this tool is called screenshot to code I'm going to show you how you can easily set this up in the next 5 minutes let's dive right into it [Music] all right guys so of course just

Like any one of my videos we are going to leave all the links Down Below in the description here is the screenshot to code website so there is a cloud version that you could go ahead and use if you want to test it out but I'm going to show you how you can build it locally now as you can see they have over 53,000 stars on GitHub and they have a lot of positive reviews as you can see here from people

Tweeting it out now if we go to the GitHub here I'm going to show you how you can get started right away so this tool supports the following Stacks HTML and Tailwinds HTML and CSS react in Tailwind view in Tailwind bootstrap ionic and tailwind and SVG and it supports the following models CLA sonit 3.5 GPT 40 and then di or flux Schnell using replicate uh for image generation now like I said they do have a hosted Cloud version and it is

Paid so you could try that out I think they give you a certain amount of free credits but we're going to be doing the local version okay so the app has a react SLV front end and a fast API backend you're of course going to need an open API key to access GPT 40 as well as an anthropic key now I guess the anthropic key is optional but both are recommended so you can compare results from Claude and GPT 40 now

They do mention if you do want to run a llama open source models you can just follow these instructions right here from this comment and set that up so first thing first you're going to want to run your terminal as administrator and you're going to Simply want to run get clone and then screenshot to code once you do that you're going to want to CD into the back end so change directory from that point on you can either run Echo right

This Command right here to set your open aai API key of course you would replace this with your actual API key now that's if you're on Linux or Mac if you're on Windows you're going to want to run set X all right just look up ask chat GPT how to set up your environment variables for an open API key in on Windows and it will tell you the commands you run or you can just click over here and type in environment

Variables and then add a specific environment variable for open AI API key as well as the anthropic API key okay once you do that you're going to run poetry install and then you're going to run poetry shell now before you do this I will say I was encountering in an issue initially which was something like this where it was saying air uh once I started Ed up the website it was saying user error generating code check developer console etc etc so

The issue I was facing was I was using python 3.12 I believe now what I personally found is Python 3 uh 115 I believe worked for me so you can actually download that version if you are having issues or download an earlier version and then you can make sure you're using poetry with that version here so for me if you need help with this ASAT GPT um how to specifically do that if you are encountering that issue but for me I

Just simply downloaded it and then I found the path for the python executable for that specific version I wanted to use and then I just ran poetry EnV use and then that um path right here okay so I'll leave that in the description too in case you encounter that issue then once you do that and you're using the the correct version of python then you run poetry install poetry shell and then poetry run UV uh iorn and then M this one

Right here it's going to start up the server on Port 701 as you'll see here it should say your back end is running correctly please open the front end URL right here at Port 1573 to use screenshot code so now we need to set up the front end side of things so make sure you go into a separate tab all right so the first tab is the back end right here you're going to want to go into a separate tab for

Your front end and you're you're going to want to make sure you're in that the uh screenshot to code directory as that as well and then you're going to change directory into the front end folder once you do that you're going to run yarn and then you're going to run yarn Dev okay that is going to start up the app on Port 5173 now they do also mention here there is a Docker method as well so you could try this if

You want we're not going to be going over that today though so once you open up Port 5173 you will see screenshot to code so up here you can see what type of uh you know models or or Frameworks we're using right here to generate so we can see the HTML and Tailwind the HTML CSS all the different other models right here we have some in beta over here we can see drag and drop a screenshot here or click upload and

Then it says new upload a screenshot recording MP4 or move U movie file or record your screen to clone a whole app now this is experimental you can click here learn more hey everyone want to share a new feature we just added to screenshot to code before all you could do is take screenshots and convert that to code now you can actually take a video of yourself using an app and generate a dynamic prototype from that video it's really cool so

Um there's an easy record screen button here so we'll click that I'm going to do a demo of uh using some interactions in Google uh so I'm going to type in something I I want to show off the auto complete and then once I click on a result it takes me to a results page so I want to replicate that uh interaction hit finish recording and now I'm going to start generating so this will take up to 5 minutes we do

A couple passes so I'll be right back once it's done all right looks like it's done uh it sort of looks like Google if you go look you know you can see that the code's available um let's try to use it so I'm going to type in same thing I hit Google and then it produces some search results it's not on a separate page but you can tweak that later uh but it is a working prototype that has the auto complete

Um if you want to make further changes just set up do a follow-up prompt here and ask it to update this code uh so yeah excited to see uh all the things you can create now that you can take a recording of an app and convert that into a prototype code I think that's really cool and I think that definitely um you know is something that will be implemented into more apps and it is the future of AI coding because we've

All done the holes take a screenshot upload it to vzer and yes it can build some cool components and whatnot but in terms of actually building the functionality imagine just logging into an app screen recording the whole thing and then you know it builds the entire end to- endend process backend front end you know all the different you know functionalities that is really where we're headed all right so there's also some more demos of that feature right here so I would

Definitely recommend checking that out now you'll see here you can also screenshot a URL so you so you can enter a URL here and then click capture and then you can also see import from code so there's many different options where you can actually um generate from a screenshot or a video recording or a website um which is pretty cool that they have all that now when you first load things up you're going to want to click on this Cog icon

Right here and you'll be able to see these settings you can see D placeholder image generation open API key so you're going want to paste in your API key here um you can see here the base URL so if you were using something like olama you would want to use this or whatever open AI um base URL compatible um you know uh llm you're using and then anthropic API key goes here you can see screenshot by URL config so if you're

Using this and then theme of course we're going to go with dark theme and then you can also change some of this here too 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 our AI agents outperform 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 by 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 all

Right so I pasted back in our uh open AI API key there now the one thing with dark mode is it is kind of actually it's not the best as you can see here it makes the text black as well so honestly light mode is actually better in this one specific case let's go ahead and upload a screenshot though okay so I just upload a screenshot of chat GP here and it is analyzing it all right so the one thing I

Noticed is I'm personally at the moment having some issues with the anthropic set of things that's I believe option one um if we look at option two here this is the GPT 40 version I believe and as you can see here we got our chat GPT what can I help you with you have these search box here the sand all the different stuff and we have our uh image up here so pretty cool we could either regenerate here we could tell

The AI what to change we can select an update so I can click on something like I could click on the search uh you know box right here and say make it Square now it's regenerating okay and now you can see the search box is actually squared so this selection mode is pretty cool and useful now we can see a mobile version right here which it definitely isn't optimized for as you can see here it's scrolling so we could go ahead

And say make it mobile optimized all right so make it more mobile optimized we'll click update and the the cool thing too is you can actually see the versions right here so you can see this is created version one this is version two which is making it a square and now we're making it more mobile optimized and as you can see if we click on these versions We can actually switch back to the specific version which is nice this is exactly

Like how v0 works and look at this now we can see that this is actually pretty mobile optimized so it's desktop optimized and then if we go to mobile now there is no side scroll right there which is nice click on code here we can see all the code right here so we could copy this code like this or we could even open it directly in code pen right here right now we can see the code in codepen so that's pretty

Cool as well now we could download the code too now let's go ahead and try another screenshot so I'm going to drag in a YouTube screenshot right here and you can see here you can literally see the code being generated right here so that's pretty cool as well wow and look at this so far it is looking actually pretty pretty uh similar we can see the placeholders right here we can see the whole entire user interface and boom it's done generating

And even filled in some I don't know if these are generated images or if this is uh just stock footage or stock images okay it looks like these are just stock images that it got all right so we can say make it mobile optimized again all right and as we can see here it optimized it for mobile and we can use desktop as well all right let's go ahead and copy the GitHub sub repo and actually try to screenshot the URL

Right here okay so to screenshot from a website you're going to need a screenshot your uh API key so screenshot one you can go here sign up for free and you get 100 free screenshots a month and then you're just going to copy your API key and then paste it over back here all right now that that's done you can go ahead and click on capture all right so you can see here it captured the entire GitHub page right here this

Is actually better than just a screenshot cuz you see how um this is a very long page um unless you zoomed out it would be a little bit tricky to screenshot I guess you could zoom out but with this uh method it takes the whole screenshot of the page easily and you can see here we're actually doing a react and Tailwind generation this time wow and this is pretty quick as you can see we already got it generating here we even

Got the GitHub icon or logo right here we have placeholder images you know a rough framework or temp PL of the actual page and we even got some dummy images and pictures right here right so now we're going to try the record screen features so I'm going to click on record screen right here so now I'm going to select this specific location that you want I'm selecting screen one right here and then I'm going to click allow and you can see

Here we are now sharing the screen I'm going to go over here to Twitter and I'm going to scroll and then I'm going to click on a post like this actually I clicked on a profile now we can see a profile here maybe I'll click on a post and I think this should be good enough let's go ahead and click stop sharing and then we can click on generate right now it's an okay so I got an error there I don't

Know if that's something to do the recording we'll try one more time okay click generate air assembling prompt contact support okay so we're having an issue with the recording screen this is a experimental feature so let me know if you're having issues with it or if you it to work maybe I'm doing something wrong other than that guys I think you pretty much get the gist of this tool screenshot to code I think it is pretty uh cool it's lightweight you

Know if you're generating stuff for these specific Frameworks and you want an open source model where you can also leverage tools like olama uh models like AMA open source models as well as um you know not be using a tool like vzer that's closed Source or whatever the case may be then definitely try this tool out let me know what your thoughts are in the comments down below about this tool if you generated some cool stuff with it other than that

Guys that's pretty much it for this video if you're new to the channel we upload videos every single day on AI automation Marketing sales Etc if you like that type of content and you got some value here make sure to like the video leave a comment down below and subscribe to stay up to date with the daily uploads also too guys if you haven't already joined our free community stri community.com I'll leave a link down below our free Facebook group and

Discord Channel and our other community check that out and then if you run a business and you need help growing your business with marketing Sales Systems implementing ai ai agents AI cool callers or call center into your business to fully automate and streamline your appointment setting via text email phone call Etc and book a call down below at executives.com slapp 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