Build a Fully Functional AI SaaS in 10 Minutes for Free

Hey there! 0:00 In this video, I'm going to show you how you can build your own AI-powered 0:01 LinkedIn content generator using WeWeb, n8n, and OpenAI. 0:05 I'll explain where you can get the free WeWeb 0:11 and n8n templates to build this on your own in 15 minutes or less. 0:13 I'll show you exactly what you need to update 0:17 and give you a few tips on how to improve those templates 0:21 to build your own SaaS product on top of it. 0:25 But first, let's have a look at the end 0:29 result of the apps available in the template. 0:32 So this is the UI I went for. 0:35 The user enters their OpenAI key. 0:38 They can update this prompt 0:40 with their specific needs, 0:43 and then they can generate six LinkedIn topics. 0:46 So this, when I click this button, it triggers an n8n webhook 0:49 that generates six topics through OpenAI 0:55 Now I have these topics, the user has these topics available 0:59 and we can just edit them. 1:03 So streamlining your content calendar with AI automation, that's great, 1:06 as solopreneurs, maybe we say as SMBs, juggle multiple tasks, we can edit it. 1:10 And then we can trigger another n8n webhook 1:15 by clicking on generating post. 1:20 Okay, 1:23 now we have a LinkedIn post with some text 1:24 and potentially a few hashtags depending on the topic. 1:27 We can copy-paste it and publish it to LinkedIn if we want to, 1:30 or we can generate an image. 1:34 This will trigger a third n8n webhook 1:35 that also calls on OpenAI. 1:39 Alright, 1:44 now I have an image, I can download it or regenerate it, whatever I choose. 1:45 And The reasoning for breaking down 1:49 this automation in three webhooks is to give more control to the end users. 1:52 But of course you can decide to change that 1:56 and change the n8n template and the WeWeb template 1:58 so it just generates the entire content in one go. 2:02 It's just that in terms of user experience, it's not my preference 2:06 because the user has to wait longer for content that 2:10 they're potentially not agreeing with. 2:13 So I to give them more control with the ability to edit the topics, 2:15 for example. 2:19 Okay, so this UI is 2:21 built in WeWeb, the entire logic is built in n8n. 2:23 Let's have a look at how you can recreate this app in 2:26 under 10-15 minutes for free. 2:29 Okay, so you'll go to the marketplace, the WeWeb marketplace, 2:33 and get the template, the LinkedIn content generator template. 2:36 So I'll get this template, it will create a project in my workspace 2:40 I can just open it and 2:44 edit it as I see fit 2:46 Alright 2:51 and in n8n 2:53 the n8n marketplace I can look for AI LinkedIn content generator 2:55 one created by WeWeb, and I will use it for free. 3:00 I will get started in my case with this, I'm 3:03 going to create a brand new account and for now I'm going to skip this. 3:08 I will show you exactly how that works and how to update this, 3:12 but first I want to show you what the template looks like 3:15 So remember I mentioned three webhooks? 3:19 This is the first, an n8n webhook to generate topics, 3:22 then we have a second one 3:25 to generate a single post with related hashtags, 3:26 and then we have the one to generate an image. 3:29 So I'm going to need to update 3:31 the URLs of these webhooks in WeWeb. 3:35 So let me take the production URL, copy this, 3:38 and then in my WeWeb project, I'm going to look for the form container. 3:42 So the first workflow is on form submit, we generate topics. 3:47 So I'm going to update my action here 3:52 with the n8n webhook. 3:55 I also have a disabled action for testing, so I'm going to update 3:58 this with a test URL from 4:02 n8n. Okay. 4:05 Now let me try this 4:14 and see if it works okay. 4:17 It doesn't. 4:21 I get an error. Why? 4:21 Because I did not enable 4:23 activate 4:29 my workflow, please resolve outstanding issues before you activate it. 4:30 Okay, so I need to update the Open Chat model first. 4:33 So here I need to create credentials. 4:39 And the thing is, I want my users to be able to enter their own OpenAI key. 4:41 I don't want to connect my own OpenAI account. 4:47 I'd rather make the app available for free to users, 4:50 but then I don't want it to cost me any money, so I'm going to 4:54 set up credentials that are actually a variable 4:58 that will take the variable from the input sent by WeWeb. 5:00 Okay, so I'm going to create new credentials 5:05 and my API key will be an expression. 5:08 I wanted to take the input that WeWeb is going to send to n8n. 5:11 So if I go back to my WeWeb 5:17 project here it an input from the user and 5:18 here I am 5:27 sending the API key from that input Don't worry 5:28 I will delete it later so you can steal it from me 5:32 This is a secret key We not storing it anywhere in the app 5:36 we just preserving it on navigation so that we still have access to it 5:40 when the user is redirected to the second page. 5:43 Okay, so I want this, I'm sending this information 5:47 to n8n and I want n8n to be able to do something. So, 5:50 it's going to be the body from the JSON 5:54 that it receives from WeWeb and API key. 5:59 Alright, so 6:03 let's save this. 6:05 The OpenAI account. 6:09 Actually, I will rename it 6:11 OpenAI 6:14 user input. 6:18 Just to be a little bit more explicit 6:22 to remember that it's not my own API key. 6:24 All right, now that I fixed this issue and do I have the same issue here? 6:29 Let's fix it now. 6:33 Open AI, that's good. 6:35 Let's fix it now as well. 6:38 Perfect. 6:40 And we have it here. 6:42 HTTP request. 6:44 Okay, here 6:48 we are using the same credentials. 6:49 So all good now. 6:52 I should not have any errors left in my 6:53 n8n workflow. Perfect. 6:58 So I'll save this and I will activate it. 7:00 Yes, I understand. 7:06 Now let me clear the logs and try again. 7:14 So in preview mode, I will click on this. 7:19 The request was made, so that's good. 7:26 And I am redirected here. 7:34 Now the user is allowed to edit 7:36 and I want to make sure I update the URL for the second webhook. 7:41 So let's go here and edit the topic pop-up. 7:44 I'm going to edit this generate post button. 7:48 And here I will update with a URL of the second webhook. 7:53 So the second webhook is here. 7:56 I'll first update the production URL. 8:00 Here we go. 8:03 And then I will update the test URL. 8:05 There we go 8:14 Okay let see if that works 8:16 I going to generate a post 8:19 Alright view 8:26 the generated content Very cool I have my content my hashtags 8:27 I can copy it and I can also generate an image. 8:31 First, again, I'm going to have to update 8:36 I will update this button and make sure I 8:39 get to the workflow and update 8:43 the URLs of the webhook. 8:48 So production URL, 8:51 there we go. 8:55 And then the tests URL 8:59 I will update here. 9:04 And if I want to use the test URL, you know, here 9:06 I can activate it and then I would disable the production URL. 9:10 Okay, let's switch back to preview 9:16 and I'll just clear the logs again, generate the image. 9:18 Okay, the call went through fine. 9:23 And there we go. 9:31 I can regenerate the image if I want to, I can download 9:33 the image, whatever I choose to do. 9:36 So that's how you can make this AI-powered 9:39 LinkedIn content generator your own. 9:42 And you could just deploy it 9:45 and publish it for free on a WeWeb subdomain. 9:48 But you can also improve it. 9:52 You can turn it into a full-blown SaaS product 9:53 and actually sell it, make it available to other people. 9:57 A few ideas for that would be adding user authentication 10:01 so that they can save this, because right now the topics are saved 10:04 in local storage, so in the user's browser. 10:09 But you could save those to your backend. 10:13 If you set up a proper backend, then you can also improve the n8n 10:16 AI so that the AI learns from the user's additions. 10:21 So when the user edits a topic, for example, 10:25 then the AI learns from that and little by little gives better 10:29 and better topics or topics that are more and more relevant to the user. 10:32 You can also improve the UI, so make it like really slick and 10:36 a beautiful experience. 10:41 Lots of things you can do to improve this, but hopefully you already have 10:43 a lot of fun with this, you already learned a lot, and yeah, happy building! 10:47 If you'd me to create any other of these types of videos, 10:52 if you have a use case 10:56 that you've been meaning to try but you're struggling with it, 10:57 and you'd us to put together a build guide, please do not hesitate 10:59 to let me know in the comments, and I will do my best to deliver. 11:03 Alright, thanks everyone! 11:06 Don't forget to subscribe to the WeWeb YouTube channel. 11:07

You need to sign up for Treehouse in order to set up Workspace

Sign up