From idea to product with chatgpt and lovable

Hi, this is Molly Mueller with Watch Me AI. And today I thought I would take you through my whole process on how I come up with ideas for things I want to build with AI and then prototype them in my favorite tool, Lovable. So to start, and this is going to be really rough. This is literally just me picking something random to show you what my process would be. So I have a very early seed of an idea, which is I'm really interested in the world of digital AI products and there are so many really interesting ones popping up every single week. And so I thought, okay, maybe it'd be fun to have some sort of list online where I could share cool new products I'm seeing. But other people could also submit products that they see that they like. And in my head, I'm envisioning this as like a. Just a board with like a bunch of little cards with different products and people could like upvote them or something. Anyway, you can see that this is just the seed of an idea and it could certainly go absolutely nowhere. But that's all you need to get started. Just some kernel of an idea. So let me show you how I would get started building this idea. Okay, so I really like starting by using ChatGPT as my really early brainstorming partner. So in this case, I'm going to throw this messy idea in here and have it help me turn it into something. So I'm just going to say I have a random idea for a new product.

I want to showcase interesting new AI products on some sort of visual board with my reviews. And also enabling other people, like anyone, to add their favorite products and also upvote and maybe even comment on posted products.

Help me refine this idea so I can eventually build it in Lovable or another tool. If you see suggested. Right now I am starting in 4o. As you can see here, I am actually on the fence about using 4o or.

03 for this. I think once we get into how to build it, that's more strategic. So I'll probably flip to this and I might even try it in 03 here too. But I think 4. 0 is going to be enough to get started. So. So let's see where we get to.

Yes, that is. It's actually very much like a living social product hunt, but it's mine.

Chat gbt. You're so nice to me.

Already. This is so helpful because I'm looking at this and I'm like, oh, duh. It's like product hunt. So in my head I'm thinking Through. Okay, is this a good idea? Product Hunt already exists. And my brain process just then was, yeah, Product Hunt exists, but that is for a very different audience than who I'm thinking about would be using this product that I want to build. So already this has been a good thought partner because it's like, oh, it's kind of like Product Hunt, but this. And I'm like, yeah, that, that makes sense. Okay, so here's a refined version of the concept and a breakdown of how you could build an mvp. Yes.

Nice. It's giving me some titles. We like that. One liner. A visual discovery board. Side note, I feel like so many of my product ideas are basically Pinterest board formats.

Okay, so summarizing what it does.

Cool that it's got ideas for my audience based. Because I do so much work in ChatGPT, it already knows my goals and what I'm trying to build towards. Feature set.

Visual board build in Lovable. Yes. Ability to tag and filter. You can do that in lovable. Chat GPT doesn't know that, apparently. Vote count.

I kind of think Lovable could probably do that and commenting too, but we'll find out once we get in there. User submission form. Okay. Your reviews. All right. This is honestly looking pretty good. If, if I was really invested in this product already, I might go back and forth with ChatGPT several times to continue refining the idea, but I'm kind of ready to just get going. So what to build first? Your top 10 AI tools SC content. Yep. Visual layout and Lovable. Yep. Submission form. Newsletter sign. Great. Oh, and look, it's giving me a prompt for Lovable without me even needing to ask. Let's read this. I want to build a beautiful website in Lovable.

Okay.

Oh, I see. It's actually giving me the prompt to feed into ChatGPT to generate the lovable build prompt. We love that. And it's saying, do you want me to generate the lovable prompt and sample layout for the first tool? 10 tools. And it knows that just today I was talking about these two tools that I like and since I do so much work in ChatGPT, it already knows the other tools I like. So I think it's going to do a pretty good job at this if I just tell it. Yes. Let's see. Okay, so this is the lovable build prompt that ChatGPT came back with and I've given this a read through and it's pretty much good enough to go on its first pass. The only thing that I'm going to change is it's given me sample content for my first 10 AI tool cards and I haven't actually read the content. It's good that it's got a placeholder for an image. The links are usually wrong when it does stuff. I'll have to check those. The first several are great. Tela, gizmo, granola, chatgpt, lovable, 11 labs, per Perplexity AI. Those are all tools that I use. And then it's gone in here and made up some. I do use Crisp sometimes. I have no idea what God Mode is and I have no idea what Magnific AI is, so it's just kind of made those two up. Maybe I should check them out. I don't know. But I need it to not include those in the initial prompt because I don't know what those are. So I'm gonna do a little bit of editing, probably just tell it a couple different tools to use and get that cleaned up and then I'm going to throw it in Lovable. So just how. So you can see how I'm working with ChatGPT here. All I'm saying to it to update this prompt is I don't know what those two things are. Instead, let's use Canva's AI tools, which I love. Big fan of Canva. And let's remove Crisp. So we'll have eight to start. Keep the rest of the prompt the same. And I still haven't really read the detail that it gave on these, but that's actually something to point out. I don't really care what the content is right now because I want to put it into Lovable and see how it's manifesting and kind of work with the product. And then I'll go back and refine the actual content once I know kind of more about the shape that it's going to take. So I'm just going to give it this little edit and.

It'S going to give me my updated list. But I'm going to have it stop and say, and I'm going to tell it, give me the entire prompt for Lovable for easy copy pasting.

And oh, look at that, it's even. Put it right in here so I can just hit copy. So now I'm going to go throw that into Loveable. Okay, so now that I'm happy with my prompt from ChatGPT, I am literally just going to copy paste that exact language into this starting box in Lovable. So as a reminder, I want to build a personal AI tool discovery board, blah, blah, blah, Blah, blah. I'm going to put that all in.

If I wanted to, I could start doing some of this stuff. But let's just start here and see what happens. Okay. So Lovable has come back in, given me some positive feedback. Thanks. Lovable telling me what it sees, this kind of summarizing what the design will feature. And now it's getting to work. Now, this very first prompt that you give it when it first creates your product, this one takes the longest. So this will probably take maybe 2 minutes, 2 to 3 minutes for it to come up with its first pass. So let's see what it's going to come up with. I'm so excited. Let's see what's the first pass going to look like. I'm going to close this sidebar. Molly's AI Playground Submit a tool, get my weekly picks. Wow. I love that it put these two things up at the top. That's smart because those are the actions that I would want people to take. So I love that it did that. And look at this. It's got my cards laid out. These are placeholder images, clearly. Ooh, I like that it formatted it with like the one sentence here and then the quote and then the tags and then the check it out. This is cool. Gonna have to work on some spacing things here. And we got a footer. So pretty good first pass. Hope that shows you the magic of this tool. Now let's talk about what my next steps would be now that I've got this first pass. So as I'm looking at this, I'm reviewing it for myself. So I'm looking at this and I'm thinking, first of all, I'm gonna have to make sure that all of these links work. Cause I'm guessing they don't don't currently work. And when I look at these boxes, there's going to be some functionality that I'm going to need to build out. But I'm kind of thinking, okay, what do I want to do first here? And I think what's going to be kind of fun for this is upvoting. And I'm curious if Lovable can do upvoting. So I'm going to go down this up voting.

Path for a second and see if Lovable can work with me there. So coming in here and look, by the way, Lovable is also giving me its ideas on what the next steps should be. So there was plenty that you could do just with what Lovable is telling you what's next. And if you're Ever stuck, you can literally say, hey, Lovable, what should I do next? In this case, because I'm curious if it can do this upvoting feature that I'm interested in, I'm going to ask it. And so when I ask Lovable something, I come down here and I click chat. Now, this is an important feature if you become a routine lovable user, because this chat feature enables you to chat to lovable, like how you chat to ChatGPT without using up your build credits. And so if I don't have this and I tell it to do something, it will make edits, it will build a part of the product, and that's how the payments work. It charges me. There's different ways you can pay level, but the simplest way to think about it is it charges you for every build it does. And so if I don't want it to build yet, and I just want to have a conversation with it about how we proceed, I turn on this chat feature. So now I'm in here and I'm going to say I want to add the ability for my visitors slash users to upvote.

AI tools that they like and maybe even comments. Not sure yet. See how I'm using it as my thought partner here. Is this something you can do? And I've got chat here, so I'm just going to ask it and I'm curious to see what it's going to say. Okay, so one thing I love about this chat feature is it gives me a lot of confidence because it will generally come back and say, I can, Yes, I can help you with this. Let me examine your current code. And then it takes some time and it looks at the code that it has created for this product and says, I can help you. More positive feedback. We love that. Here's what I'm thinking for the implementation. And now it gives me its proposed plan. And so I'll kind of read through this. And since I've been working Lovable for a while, there are sometimes things that I look at and I'm like, oh, that doesn't seem quite right. But honestly, like nine out of ten times or even more, you can just say yes to what lovable is suggesting, because it knows more than you do about how to build this. So let's read this. Data structure changes. Great. Use local storage. Okay, so this is one that I have learned because I've learned about adding backends. Um, this is fine for a temporary fix and I will add the backend later because I'm just prototyping Right now. UI components. Um, yep. We want a thumbs up button. We like that. Position it elegantly in the card layout. Awesome. Okay, so we can kind of read through this and then I'm just gonna go here, I'm gonna take off this chat feature and I'm gonna say implement the plan. And it's back and it says it's implemented the upvoting system. So let's scroll down here. And here it is. It just appeared now. It's got this little. Oh, I like this little animation here. Ooh, thanks for the upvote. Your vote helps others discover great tools. That's a nice sweet little thing that it thought to add there. Can upvote that one. We still got to fix the spacing here. This is out of whack. Let's look at it over here. Yeah, still out of whack. But look at that. It's telling me it can do it. Now. There's still a lot of testing that we're going to need to do and probably a lot of bugs that we're going to need to fix before this is, you know, ready to ship to more than just a few people for testing. But I'm going to end that here for today. And hopefully this has given you a sense of just how easy it is to get going with whatever your idea is with the combo of ChatGPT is your thought partner and lovable as your doer. And if and when you are ready to publish your product, you can just come over here and before you even connect your own domain, you can publish this and start sharing it with this lovable domain that they've provided you. So super, super easy, super fun. I hope this enables some creativity for you.