Transcription
Over the past couple of months, we have seen AI make serious strides in building full stack applications. From generating back-end logic to automating deployments, it's all getting faster and smarter. But there's still one major pain point. The UI or the UX often suffers. Sometimes the design looks outdated. Other times, the components don't even function properly. It's quite frustrating.
But I found a solution. Today we're going to look at how we can combine Ready with either Klein or Cursor, two powerful tools that can finally fix this issue for good. For those who do not know, Ready is an AI front-end builder. We've actually seen this before on this channel. And what's nice is that you can talk to it in natural language and within minutes, it gives you stunning modern UIs. You have the ability to export clean code, get Figma files, or even instantly publish your designs. It's fast, flexible, and looks professional every single time.
Then with the combination with Cursor or with Klein, your autonomous AI coding agents, you're going to be able to have it so that once Ready builds the front end, these two tools step in to focus on handling the APIs, connecting your database, adding server logic, and stitching everything together into a fully functional full stack app. Put them together and you get beautiful UIs from Ready and fully functional backends from Cursor or Klein, all built within minutes, which is going to save you so much time rather than you coding out things all on your own.
Just take a look at the quality of output that Ready is capable of generating. You can see a couple of these examples where it's able to build beautiful frontends and it's able to do this quite easily and quite efficiently. Here is another example of different components being generated and you can fully configure and generate them with Ready. And this is where you can deploy multiple agents with Ready that can focus on different stylings as well as packages that help you develop beautiful frontends and UI components.
Before we get started, I just want to mention that you should definitely go ahead and subscribe to the World of AI newsletter. I'm constantly posting different newsletters on a weekly basis. So this is where you can easily get up-to-date knowledge about what is happening in the AI space. So definitely go ahead and subscribe as this is completely for free.
So let's get started. What I want you to do is use the link in the description below and head over to ready.ai. And the best part is you can easily get started completely for free. So simply go ahead and click on get started and create an account. And afterwards, you're ready to get started.
This is the main dashboard of Ready where you can simply go ahead and type in your prompt where you can describe what you want the AI to actually build. You can either build web or simple apps for iOS or Android. So in this case, if I want, I can simply go ahead and describe what I want to build, which is where I want to build an AI job portal. This is where it's a portal that will help you track your progress in terms of applying for jobs as well as showcasing recommended jobs and then having an AI integration built within it so that it's able to help you in various ways like helping you with tracking your progress as well as teaching you ways to improve your resume or even working on improving your interview skills. And all of this will be integrated with the textual prompt that I said, like creating a navigation and a specific theme for this portal, an AI job coach chatbot widget, as well as a couple of other components. So this is where you want to be as descriptive as possible. You can upload as many images and this is where this reference I provided is a layout as well as a color that I want to replicate.
Also, just a quick tip. Say if you're uploading an image of a UX design of a website you want Ready to basically replicate, like this Twitter clone. You want to use this prompt over here, which I'll leave a link to in the description below, where you can say, "Please generate the complete HTML and CSS to exactly replicate the website layout that with the attached URL as well as the image. Focus on a pixel-perfect accuracy for all visual elements, typography, colors, spacing, as well as the image placement." And now what you can do is just simply go ahead and send in this prompt. And with this exact prompt, it's going to be able to replicate every component of this image that was sent. Already. And there we go. Just like that, it was able to rapidly prototype an exact replica of this Twitter clone that was sent in. You can see every component it was able to replicate quite quickly. This is the capability of Ready, which is why this prompt helps in terms of replicating any sort of UI, which I'll leave a link to in the description below.
And now you can specify what sort of app you want to build. In this case, I'm building a web app. And we can go ahead and send in this prompt. And right away, it is going to work on building the structure, the plan for your app. So rather than going right away and building your application, it's going to create a plan that you can then review. And if there's certain components that you want to tweak, you can go ahead and change it. But since I like what it has done, we're going to go ahead and click on generate. And this is where it will autonomously go ahead and work on generating our components for what we want built. And guys, I kid you not, it was able to rapidly work on building the front end for our dashboard. And you can see that it did a great job in this version where you can see the main dashboard replicates the image that we had provided. You can see that you're going to be able to track your applications, the interviews you have scheduled, profiles viewed, and a couple of other components. The tracker has been generated as well where you can track different job applications. The chatbot widget that we wanted to be built has been also created, which is nice. You also have a resume assistant. And say if there's a component that hasn't been generated, like the messaging system, we can go ahead and click on continue to generate. And this is where it will then send in that request back to the AI agents to work on building the next component for us autonomously without us even doing anything. So you can see right away it is working on creating a structure for the page, which is the message page. And there we go. It was able to rapidly focus on building the message component, a part of our app. And you can see the UI that looks absolutely beautiful. And you have multiple different components that were also generated within this subsection. This is the true capability of Ready.
And guys, what's cool is that you also have the ability to export this to Figma or create. And you can share this as a link and you can access the code for whatever has been generated, which you can locally download. So you don't even need to go ahead and copy components with Inspect. You can just simply go ahead and download all the code that has been generated completely for free. All of what I'm doing right now is with a free account, which is just insane.
But essentially, what else you can do is that there is a selector component. If you were to click this, you can highlight a certain section and you can request it to edit that component that you highlight. For example, I can click on the selector and I can highlight a certain section. So, in this case, "application set." I can click on this and I can edit the text to whatever I want. And then I can click on save. And there you go. It was able to then change it to whatever I had requested.
What's also nice with Ready is that you have the ability to embed code. So, if you already had code generated for a certain section of your app, you can go ahead and paste this in over here and then have it pasted into the application that you had generated with Ready.
And say if you were just building a website and you just wanted to add information to it. And once you have finished generating with Ready, you can simply just go ahead and click on publish. This is where you don't even need to worry about deploying anything with other subdomain providers. This is where Ready takes care of everything and you don't even need to worry about publishing the and going through and configuring your website with different domains.
So, we have this basic front end for our dashboard. Obviously, we're going to add functionality to it later on. But what I want to do next is add a landing page as well as a signup page so that it is creating a proper flow to our dashboard. This is where I said, "Create a landing page for the first page of this app and then a dummy flow to access the dashboard." So let's go ahead and have that generate. And quite rapidly it was able to build this. I kid you not, it took approximately 5 minutes to generate all of these different components. And you can see there's actual animations that have been added. This is a really beautiful landing page that was fully generated. And you can see that it's a great SaaS page that you can then easily click on get started, which will take you to the O and this is where you can go ahead and you can register for an account and afterwards, it will take you to the main dashboard which we had created with Ready that took approximately 5 minutes to build all of these different components. And this is why Ready is such an amazing tool cuz I built this all completely for free without me even paying for a single subscription plan that Ready provides. This is the capability of this amazing tool and you can easily get started with it with the link in the description below.
But now that we have easily built the front end, let's now take it to the next step and combine it with Cursor or with Klein, which can then work on building the backend, connecting it to a server logic, an API, and then connecting it to a database. So now what we can do is go ahead and get our code and we can simply go ahead and download it, which will save it as a TSX file. And essentially, now with Klein or with Cursor, you can go ahead and describe what you want the actual agents to work on. So in this case, I have now generated the front end with Ready. I can say, "Please create the backend logic. Make sure there's a functional O, the a database linked to Supabase, as well as refining any errors you see." And it will work on autonomously fixing this. So I can send this in to any of these agents and then while it takes in the front-end design, it will then work on creating the backend logic for me autonomously without me even doing anything. You can see right away it is working on approving the ability to read through your file and then it's going to work on generating the components to make sure it is functional with the proper backend logic.
If you like this video and would love to support the channel, you can consider donating to my channel through the Super Thanks option below. And thankfully, thanks to Cursor, it was able to fully integrate all the components that we needed. For example, we now have it so that the SaaS landing page is connected to a database. So every time someone actually logs in or registers an account, it will be logged with our database. And all of these components actually work now, thanks to the help of Cursor and Klein.
Or you can consider joining our private Discord where you can access multiple subscriptions to different AI tools for free on a monthly basis, plus daily AI news and exclusive content, plus a lot more. But that's essentially how you can create any sort of application with Ready combined with coding agents like Cursor or Klein. This is a really great tool that you can easily get started completely for free, like you saw today.
But with that thought, guys, I hope you enjoyed today's video and got some sort of value out of it. I highly recommend that you take a look at this with the link in the description below. Make sure you go ahead and take a look at the second channel if you haven't already. Make sure you join the newsletter, join our private Discord, follow me on Twitter, and lastly, make sure you guys subscribe. Turn on the notification bell, like this video, and please take a look at our previous videos because there's a lot of content that you'll truly benefit from. But with that thought, guys, have an amazing day, spread positivity, and I'll see you guys fairly shortly. He suffers.