Build anything with these new AI tools (No Code)

In this tutorial, AI enthusiast Rory Ridgers showcases how the latest AI coding assistants—Claude 3.5 Sonnet, Cursor, Replit Agent, and v0dev—enable rapid, no‑code/low‑code creation of web tools for business use. He begins by prompting ChatGPT O1 to generate a ranked list of ten web‑app ideas across industries, pairing simple calculators with more complex inventory systems and providing tailored prompts for either v0dev (simple) or the Replit Agent (complex). Rory then walks through live demos: a unit converter built in seconds with v0dev, a simple invoice generator (also via v0dev) that required iterative debugging, and a full‑stack inventory tracker created with the Replit Agent, complete with Flask backend, SQL database, analytics, and a feature‑checklist. Throughout, he highlights the ease of publishing, the ability to customize styling, and the business potential of offering these tools as free lead magnets or low‑ticket products. The video concludes with a discussion of each tool’s strengths and limitations—React‑only generators versus full‑stack agents—and an invitation for viewers to collaborate on AI integration projects.
Chapters
I'm sure you guys have seen recently in the AI space there's been an explosion of these tools that are making it easier and easier to create web apps. It sort of started with Claude 3.5 Sonnet, and now there's things like Cursor, the Replit Agent, v0, and all of these things are just making it easier and easier and easier for anyone to be able to create their own web apps. So today in this video, I wanted to go through and test out some of these different tools and just show you how easy it is to make things like simple tools that you can sell to businesses, or even just use them as free gifts to get a foot in the door with these businesses, or more complex sort of mini softwares that you can also sell to businesses, but obviously for a little bit more money. If you haven't seen me before, my name's Rory Ridgers and I'm an AI enthusiast, and I'm passionate about helping business owners integrate AI into their businesses. So if that's something you might be interested in, then do consider subscribing and sticking around for the video. Okay, so to start off, we're going to be in ChatGPT. I'm going to go over to the O1 preview, which is the new model. And what I want to do is just ask it to give me a list of different web apps and tools that I can make for different industries, ranging from the easiest to the hardest. So the most simple things are going to be like little calculators and things like that for businesses, and then it's going to range into more complex things. And what I also wanted to do is create a prompt for me for each of these tools that I can send to the agent that we're going to be using to create some of these web apps. Okay, so I've just said to her, I want to create 10 web tools for different industries. I want you to list the 10 different industries and then give me a web tool that I can make for them. Then I also want you to list the features of the web tool and write me a detailed prompt that's going to help me to make these web tools. And I've said, for the more simpler web tools, write me a prompt for v0dev, and then for the more complex ones, give me a prompt that I can use for the Replit agent. And I've said, rank them in order from most simple to most complex. So Let's see what it comes out with. Okay, so this is what's come out with the first one. We've got a unit converter for construction materials, then a BMI calculator, then a simple invoice generator, educational quiz maker, an appointment scheduler, an inventory tracker, a basic CRM tool, a transportation route planner, a financial portfolio analyzer, and then a manufacturing workflow management system. And you can see for the first 5, it's given me a prompt for V0 dev And then for the other 5, it's giving me a prompt for the Replit agent. And if you don't know what v0dev is, by the way, what it is, it's kind of a chatbot similar to ChatGPT, but it's really good at making things like React components, and it will allow you to visualize the code that you're making and also deploy that code. So really similar to Claude 3.5 Sonnet. We're also going to be using that for this video, but I just wanted to show you a variation of it as well. Okay, so to begin with, we're just going to try out this first one, a unit converter for construction materials. You can see the features. Convert between metric and imperial, material-specific conversion points, and user-friendly interface with dropdown menus. So all we're going to do, copy that code, come over to v0 here, and then all we're going to do is literally just copy and paste that prompt in, and we're going to see what it comes up with. Okay, so you can see it now creating the interface here, and yeah, it's finished. So we're just going to try it out quickly. Select material, you can see we've got these nice dropdown menus. We're going to go Lumber. Measurement type is volume, from meters cubed to yards cubed, let's just say. Enter value, we're going to put 20, and the result, 26.1590 yards cubed. So let's just try it one more time with something completely different. We're gonna go steel. Let's just make it easy and say length, from feet to meters. Let's say the value is 1,500, and the result here, you can see, 457 meters. So really, really simple. Obviously it's got it right first try. There's no need for us to input anything else. So what we can do now is we can just hit share, go over to publish, confirm and publish. It will give you a URL here, and then we can open that up in a browser. And it should appear like this. Yeah, here you go. So material, measurement type, there we go. So this here is something you could just offer to businesses for free, just to say, hey, look what I can do, let me try and build you something else as well. Or you could just sell it really low ticket, you know, $50, something like that. But really, really simple. I mean, it literally took me like a minute. And you can also make these things more complex, you can add styling or more features, but for now this is absolutely perfect. Okay, so I've just gone ahead and tried to make the same thing in Claude 3.5 Sonnet. I've given it the exact same prompt, and as you can see here, it's more or less done the same thing. It has missed out some of the features that the other one included. So, lumbar length— okay, now that I'm actually using it, it's adding on the other inputs, which is weird. I don't know why it's done it like that, but it has done it. Um, centimeters to inches, let's say. Value 10, convert. Okay, yeah, so it's worked. It's pretty much done the exact same thing as the other one. So whichever one you choose is really up to you. Okay, so now we're going to try one of the slightly more complex ones, this Simple Invoice Generator. You can see, uh, users can input fields for clients and service details, automatic calculation of totals and taxes, generate and download invoices in PDF format. So we're going to copy that code we're going to come back over to the v0 here. Let's start a new chat, just copy in that code and hit enter, and we'll see what it comes out with. This one might need a bit more iterations than the other one just because it's slightly more complex, but we'll see. Okay, so it has generated some stuff, but it's telling me I need to start a Next.js project, and for this we don't want to do that because that's getting into it a little bit more. We want to create it all inside of v0, so let's just ask it to simplify it a little bit. So I've just said to it, simplify the project so I can use it inside of v0, make it all on one page, because what I think it was doing was making it on separate pages, which just means that you can't use it through v0. So we're going to see what it comes out with now. Okay, so this is what it's come out with. We're just going to hit share, public with the link, copy this link, and then open up the link. It should look like this. You can see we've got some inputs here: business name, client information, invoice details, invoice items, and the tax information. So I'm just going to fill this out with some example information, see what it does. Okay, so I've just put in some random information. I've said Dan's Landscaping at 123 Lane, client name Ben James at 456 Lane, putting a random invoice number, invoice date— actually pops up with calendar here, which is quite nice— and then the due date, description. I said I cut the grass once for £100. And then the tax rate, we're just going to say, I don't know, 10%. Hit Generate Invoice. As you can see, when we hit Generate Invoice, it says that all of these fields haven't been filled in, which is obviously wrong. As you can see, all of these have been filled in, but saying they're required. So obviously some type of problem there. So we're just going to go and say to the agent, I put data in. I've just said to the agent that it wouldn't let me generate the invoice because it said that the inputs were required, even though I'd already filled out the inputs. So Let's see what it comes up with now. Okay, so we're going to try out one more time. I've opened it in a new window now because I've published it. And so I filled in the exact same inputs, going to hit generate invoice, downloads it up here. So it downloads it, as you can see, put in the names, the address, the rate that we charged, everything like that. And then it also generates the invoice down here. So yeah, super simple. This is also something that you could just give for free just to show you what you can do get your foot in the door. Or you could sell it for low ticket if you improve it a little bit and make it downloaded to PDF and also make some other changes to it. Okay, so now we're going to try some of the more complex ones. I think this one looks quite good, the Inventory Tracker. The industry is retail, and it's a tool for managing and tracking inventory levels. Features, as you can see, are add, edit, and remove product entries, monitor stock levels in real time, generate alerts for low stock items. So this is the prompt for the Replit agent this time that it's given me. So what we're going to do is we're going to copy that. So now we're in Replit, and if you've never seen the Replit agent before, then do check out my last video because I make a mini sort of software web tool with it. But pretty much what it is, it's just an agent inside Replit that you can talk to, just like ChatGPT or something, and you prompt it and it's going to give you a full web tool. It's going to do everything like installing all the dependencies, creating the databases, the user authentication, everything like that. All you have to do is just prompt it. Then first of all, what it's going to do is it's going to give us some optional extras, and it's just going to ask us to sort of tick which ones we want in there. Usually comes up with about 4, so we're going to see what it comes up with. Okay, so this is what it said to me: I've created a plan for a web-based inventory tracking system using Flask, Vanilla.js, and also an SQL. Then as you can see, we've got the additional features here. We've got implement user authentication and role-based access control, add reporting and analytics feature, integrate barcode scanner for faster product entry and updates, implement automated reordering system for low stock items. And I think the only one we sort of want right now is the add reporting and analytics feature because the other ones are a little bit more advanced. Now if you're going to make this for an actual retail store, then you probably would want to have all of these. The barcode scanning would be really handy. User authentication for the different roles in the company would also be really handy, and reordering stock for low items, that would save them a lot of time. But for now, it's just sort of an example demo one, so we're just going to add the ad reporting analytics feature. So what it's going to do first is going to build the first initial prototype. It's probably not going to be right first time, probably going to have to test stuff out and change stuff and things like that, so don't worry if the first prototype isn't right. But yeah, we're going to see what it comes out with first. So one of the cool things about the Replit agent is you can see its whole process here. You see everything it's creating and installing. Quite good because it just gives you an idea of what's actually going into this web tool, so you're not completely clueless going in. You don't really have to understand what all of them mean, but yeah, it kind of gives you an idea and lets you see what's going on. Okay, so this is the first prototype it's come at us with, and it's just said, is the Flask application running and showing the inventory tracking system homepage? As you can see, yeah, it's doing that. We're just going to try and add a product name and its quantity, just see what it does. It might not work because at the moment all it's asking us if is if we can see it, but it's going to test out anyway. So we're just going to pretend that this is some sort of clothes store. So we're just going to say t-shirts, the quantity let's say 100, low stock threshold let's put that at 20. Add product, see what happens. Yeah, as you can see, it's appeared here. So that's all good. So we're just going to say, yes, I can see it and it let me add a product. So yes, I can see it and it let me add a product. And right up here you can see the agent's checklist. So all it's got to do is build the initial prototype, which is done, and then now all that's left to do for it is add the reporting analytics feature. So When you have more features, the chest— the checklist will be longer. And also, if you ask it to add more features later on, it'll add it to the checklist so you can see what's going on and what it's got to do next. One of the cool things as well is when it builds the initial prototype, there's a rollback feature here. So if it strays too far from what you want or it messes up really bad, you can just click Rollback to Here and it'll take me back to this initial prototype here, which is pretty cool. Okay, so as you can see, it's saying that it's now completed the plan. And here you can see the analytics, sales trends, and the inventory turnover. So we're just going to do a little bit more testing with it and see sort of what else it does and if it picks up any more errors. So we're going to hit new tab so we can see a bit better. And I like this bigger tab actually, so it shows the analytics on the side rather than below. It's got all the product list here. So I'm going to try to add some more products and see what it does. Okay, so I just tried to add some hoodies And as you can see, it's added down here, but I just got an alert at the top which said failed to fetch data, but it's disappeared for some reason. So I'm going to try add another product and then I'm going to tell the Replit agent the error that came up. Okay, so I'm going to try out some hats. We hit add product and it says, yeah, failed to fetch analytics data, please try again. So we're just going to copy that, come back over to the agent and say I added a new— so I said when I added a new product, it added it to the list, but I got an alert that said failed to fetch analytics data, please try again. So we're going to see what it comes up with to fix this issue. Okay, so now it's saying it's debugged it. So I'm just going to hit new tab again and try and do the same thing. You can see down here we still got the product lists, and in the inventory turnover it has actually added the other products, which is good— hoodies, hats, t-shirts. I'm just going to try add a couple more products and see what happens. 10. Okay, so now when we add a new product, it doesn't say anything. And it adds it to the inventory turnover graph, which is good. You can see here in the sales trend, it's just added sort of random data. Obviously, we could find a way to add some more functionality to this so that it knows when a product is sold, and then it can update this chart, and it will be able to tell when the products reach their minimum threshold. So you can see here the low stock threshold, so when it gets below 20, 50, 10, then it can send alert to the user and say order some more of these. So yeah, this is a really, really simple software that you can build more on, but as you can see, it's got its own database, which is good. You can easily add user authentication in it, which is good. And these things are a limitation of things like Claude 3.5 Sonnet and the v0-dev, because all they can really do is create React components, which are just single-page things like calculators or that invoice generator. You can't add things like databases and user authentication. So Yeah, that's really cool. So another thing we can do to this, just because we might want to, is we can stylize it a bit more to make it look a little bit different. So we're just going to say to it, okay, so I've just been really, really vague with it. I've just said make it look more modern and add some different colors for each different product just so you can differentiate it a little bit, and we'll see what it comes out with. Okay, so it's just said, can you confirm the product list shows different background colors and products based on their stock levels, low, medium, high? Also, do the charts for sales trends and inventory turnover look more visually appealing? And to me, the charts look exactly the same and product list also look exactly the same. So maybe I prompted it wrong, maybe I was a bit too vague with it. So we're just going to give it another prompt and see if it can do what I actually kind of want it to do, right? So what I've said is, uh, no, it looks the same. And for the colors, can you make it so each product has a new different color? For instance, t-shirts in blue, hoodies in purple, etc. And make it so that users can select these colors from the product list via a dropdown menu. It said, certainly, I'll update the interface and allow users to select different colors for each product using the dropdown menu. Okay, so as you can see here, now we have sort of color-coordinated stock. So we can change the color here, we can go green for instance, and then hoodies will update as green, and they'll update in this analytics sales trends as well. So we just change these all so they're all different, just helps us visualize it a little better. Okay, so there you have it guys. See, that last web tool could be improved a lot, and it could have some extra functionality like the, as I said, the user authentication You can also have it so it can track what's sold, which is obviously really important for something like that. But all of those things can be implemented later. I just wanted to show you how you can use all of these new AI coding assistants to be able to actually create your own web tools so that you can either use it for yourself or sell it on to other business owners. So thank you for making it to the end of the video. And as always, if you do want to work with me so I can help you to integrate AI into your business or build you something like these I've shown you in this video, or something a little more complex than that, you can always check out my website and fill out the form on there, or drop me an email and we can talk about some ways that we can help you and your business. And if you're just an individual watching this and you're looking to build these solutions for yourself so you can sell them on to other businesses, then I hope you enjoyed this video. And if you've got any suggestions for future videos that you want to see, then do just drop them in the comments and I'll get around to them.
More from Rory

Dynamic Workflows are crazy. This is how to actually use them (beginner's guide)










