Build an Event-Driven AI Backend with Supabase & N8N

Key Takeaways

Okay. So, what you're going to learn here is how I use Superbase as a eventdriven system [music] using N8N as the backend or active pieces. We use Superbase's integration with web hooks and therefore we can use it whether it's from the or just backend stuff. We use it as an event driven system. And what you're going to see scrolling across the screen is all the videos I keep doing this on because it's such an important pattern in my day-to-day building for customers. And so what I'm going to show you is a pattern that is basically an event system and we're going to use Superbase's amazing web hooks or integrations that then have database events that then we could trigger a web hook to NAD. So I'm going to show you two real life examples I use all the time or I train people on. One will be I'll do the backend starting there first where we trigger automation with a file upload to superbasis storage. The next one will be a driven integration where I'll go to a blog post which I'll upload a title for a recipe and some content so that then we can trigger multiple events and those N8N workflows will then do things like tag write the content the TLDDR and more and I'll show you how I do that. All right, let's dig in. So the first step is integrations and this just it just connects the dots so well. When I go over here to Superbase under integrations, I should see database web hooks. If I don't, I just have to search for it here and install it. And that's it. Once I'm into web hooks, I can This is it. This is the best part. Okay. So, the first thing we're going to do is this backend integration where if I upload a file, it's going to go trigger nad. So, look at this for a moment. Here we have our NAN rag system. Now, this was made originally by Cole Medin. He has I'll link to his YouTube below. It's a great rag workflow. Nice. It's good. Not simple, but good and simple enough. And what we want to do is just say, hey, every time a file is added, I take that file and ingest it into the system. Okay, so here we have file added web hook and here we have file deleted web hook. So in NAN, I can add web hooks, right? And then here I can say immediately with some authentication bearer token. We're going to look at that in a moment because that's important. A post again important. I don't think yeah I think it's we'll go look I think it's required. And then I give it a name. Okay. So what's going to happen then is every time we add a file or update one in this case we're going to do something. And every time we delete a file we're going to do something. So how did that work? And this is this is file storage but this is everything. Superbase did an amazing job of taking Postgress and wrapping it in events and so then you can listen to the event. Okay. So now what I do here and let me close this because I use the AI here to just go build things, right? I added a new web hook. So I create a new web hook and you get this pop-up screen and I typically name the web hook after the sorry yeah I typically name the web hook after the N8N title just so I can find them. And in this case, I want to react to an event based around the objects. Now, first, and this is confusing, there's a ton of schemas in Superbase, and those schemas are just schemas, and they're ways of organizing tables and all this other stuff in a nice way. So, I it took me a while to get used to it. Once I did, I realized, okay, we have public, which are the tables we're going to deal with next chapter of this video. But the one that I want to look for is storage because I basically want to say when someone adds an object, let's go do something. Right now, I could have multiple storage buckets. In this case, I'm just going to react to any file uploaded. But you'll see in a moment where we could filter out buckets. We don't care about buckets. It's an AWS term, but we're going to use it here. So now we're going to say, hey, on storage object, insert or update, let's do something. And that's it. It's just so good. Here's my post, which I guess could have been all the things. Here's my URL to the you to the NAN web hook. And then here is the authorization bearer token information. That is so important. Now, we're done. So we have now made this so that when I upload a file or delete a file, something's going to happen. Okay? And remember, if something does not happen, make sure your passwords are correct or remove them for a moment and just let it work without a password. That typically is the only time this doesn't work for me. The other time that I get caught is when I forget to enable the NAN workflow. All right. So now if we look in the past here just so we could just see this. If I click on past upload. So when I uploaded the file to that folder, we can see that it triggers this system and it's just a record in the database which is so awesome because now I get the record, I get the ID, I even have an old record if it's an update so I can compare the two and I have all the information I need to do the next things. And I'll share this workflow after. But my point is I'm now going to go delete the file from the system. And again look at this like Postgress is part of Superbase. So I can then use the Postgress node instead of the Superbase node. Why? It just depends on what you're doing. Sometimes I'll use a Postgress node for quick oneoff. Sometimes I'll then use Superbase when I want to trigger other web hooks or other sockets. So it just depends. In this case, I just go delete the data from the rag and then I use the HTTP node in N8 and to go get the file from the storage system to then go do stuff with that and then upload it. And that's it. These two HTTP nodes go get create a signed URL and then get the file. All right, first pattern just amazing. File uploads trigger an event. You have your listener and you're ready to go. Let's go to the next one where I add a recipe and you'll see how we can trigger so much more. All right. Nothing like live demos this one or live doing. This one we're going to go build. I made a quick blog system and or recipe system, whatever. And then when we add a recipe, I'm going to give it a title, a little bit of a recipe, and I'm going to let AI finish it. Now, at this point, we're going to set up Superbase to trigger, and then we're going to set up Naden to listen to that blog post added, and we're going to generate an image, generate the recipe itself, do some tags as well. But we're going to learn how we can go from front end to all of the stuff happening in the back end with no weird connections to NAD. We don't have to do any AI code to do things. We just saving to the database. It's a it's like your code just has to write a row to a table. There's no way AI can mess this up. That's the thing. All your permissions are in superbase. You can then per not have to write a bunch of code for permissions and the events and the websocket. Such a good pattern. Okay, we're going to I want to go turn the web hook on first so we can see it all happen as we add this. Okay, so here is just one I put together really quick to make some images. So, I'm going to leave that there for a moment, but I'm going to make a web hook. And I'm going to make that web hook here. I'm going to make it a post. And that's about it. I could give it a nice name, and I should give it authentication, but just for this demo, I'm going to crank through this. Then, I'm going to make sure I make it active because that's what I always do is I mess up the making it active. Then, I go over here to integrations and we then go to database, web hooks, and then web hooks. Now I'm going to go create a new web hook and I'm going to call it usually I'll name it after the NAN just so I could find it again. A recipe created event. Okay. So then we go back to here and we do that. And now what is the table? And like I mentioned in the first part public it's sorry it's going to be in the public schema. Okay. That's where you typically do things unless it's a user thing or whatever. And in in this case I'm going to go look for the blog. Now the ordering here is just what it is. It might even be reverse but let's see where we get to the blog when I made here it is blog post. So when a blog post is inserted not updated or deleted we can do things there but it gets more complicated and I'll teach you that but not right here. And then we just add our particular URL that we had a moment ago. So let's go back to here and grab not the test one. Grab that one. All right. And that's it. So now we are ready to roll. Now if my little recipe system worked, then we'll we'll end up saving that to the database. So let's go look at that really quick. We have our table. We have our blog post. And then we can see a bunch of recipes here. So what do we have? 10 rows. AI made these rows for me. Again, superbase built-in AI just so good to just get stuff done. Make me a table. Fix this issue. give me some dummy data. The list goes on, but I'm focusing on events. So now, if I add this, let's say beef stew, we'll say a recipe for crockpot. Beef stew. I don't even know how to spell. And then I'm going to set it to draft. I don't know if that matters. I'm going to click add and see if we have a database issue, which we shouldn't. I don't know. Boom. There we go. So now this will load. And the speed here is unrelated to anything. That's just my thing. Now error displaying the data. Don't worry. I want to focus on the back end. So we got beef stew. All right, let's do this. So if we go back to here, we're going to see in our past executions that we just got something in from Superbase. Okay, so that's the web hook. And this is where the workflow this gets so easy. This is just amazing. So I'm going to copy to the editor the incoming data there. So I'm already pinned with the inserted data. Okay, so now I can start doing the work I need to do to make this work. And I could make multiple web hooks to do different things. That's the cool part. Like I might want to do images and then tags and other things. All right. Hopefully that makes sense because I might not want one workflow doing images and tagging and writing the recipe. I want might want more. Okay. In this case, we're going to go down the line and just do and I'm using chatbt for no good reason. So just remember you could use whatever you want. And then I'm going to say generate a message. Message a model. Okay. So, keeping this simple as possible, I'll just do 4.1 for a moment. Type text and the prompt is the user prompt. Okay. So, now I'm going to just make a quick system prompt and I'll just type this out. We're going to toss in the title and oops, not the tlddr. And you're going to really see how this could be done so many different ways, right? So, there's a title and then there is the content. And the user isn't asked to enter much. And I'm going to ask for structured output. So let's just do this really quick. Oh, look at this. This is neat. Uh I want to do structured. I'm going to do just simple JSON there. And we're going to say JSON format recipe. All right. So we have a simple JSON structure. And we have that. None of this stuff is that uncommon. So I'm going to give that a go. And then we're going to pin that. And then eventually we'll save it back to the database, which is the coolest part of this. So I'm going to go back to Superbase. Now remember, Superbase has websockets. So if I was using a websocket front end that could listen to these like Nex.js or anything, then it would just be popping like that as I write back to the front end. So keep that in mind as you think this through because I do that a lot and it helps out a lot. I just didn't want to write a front end for this. So we're say go update to the record. So now if we go back to our web hook and pull over that ID, we have our record we can just keep doing things with along the way. So here I'm going to say the TLDDR and then the content and then the tags. Hopefully the tags I got right because they're an array. So let's see what else do we want to do here. I think that might be it. We could change the status which is cool again. Then the front end would pop as it writes it. So now we could say okay is done. It has a content and it should only have one content. That's interesting. It says it's an array. Who knows? So then we're going to say here's your recipe. Here's your TLDDR. And then here are the tags it thought was worth tagging. And let's see what happens if I run that. Boom. There we go. Now I'm going to pin that for a moment. So now we have that. I want to go get the image. So let's just do this here. And the image guy is okay. Just a simple image. It's demo data. But I don't really care. it it is demo data but not anymore because we've actually made this better and it's going to go generate for us an image and then I want to go upload that image to my superbase. Now let's look at this one really quick. Basically it's a post to the area that we are uploading to. So the storage v1 object recipes using my superbase API credentials. Now how did I get that? All I had to do was go into the project settings uh and then the database API and then there's the URL and then I went and got the key and I used the service key from what they consider the legacy area. You don't use the anonymous key in N8. So you want to use that one. All right. So we go back to the work we're doing here and we now want to take that file. Let's go generate it and then we'll pin that. So we're going to pin it the whole way through so we can just work this through. And then we're going to update the superbase table once and for all in in mark it as published. Again, we could have changed the status to running or we could have changed it to ready for review. So you can have the human in the loop moment. Just this is so key to all the AI driven workflows we're talking about lately, the agentic dashboards in all the automation. So just really keep this in mind. So here we're going to pin that and then we're going to upload it. Now there's our binary data. We'll see what it looks like. Good enough. Okay, that's cool. That's a style I wish I kind of thought about earlier. So now, what do we want to do with this? I'm just going to name it after the ID of the record we are updating. So I'm going to go back to my web hook just because it's a constant source of truth here and I'm going say, hey, take that that ID and put the file naming it that with the extension. So see it's going to be that. So we're going to say storage v1 object. The recipe is the bucket I made and then the file name. All right, perfect. And then we're going to pass the send body binary data data because it comes out of here as data. So if you look here for a moment, we see that it's data. Okay. And we must just default to that. We could probably override it. No need to. Okay. So now we have our upload to public and we're going to go do that. And I'm going to pin that one moment. Now if you get an error, it could be because you have already done it. So you can't overwrite it unless you set a parameter to override true. Now I want to take this guy here and go update the the the recipe. Okay. So now I want to say hey so let's go back to the ID and let's go grab that web hook. So this is your source of truth here. This is an event driven by a web hook driven by the record. So we keep going back to it. Okay. And at this point we can say okay there's the web hook. Let's go update it. Now we want a URL for this. So the URL, these are public images. So I'm going to just show them as public images and I'm going to just go get the URL for them. But I could do a signed URL as well as needed. And I show that in the first one. Okay. Now this one is the storage v1 object public and then the key. And the key includes the bucket name. So it's public is just the API for this, right? And so public and then the key has the storage path name which could be many folders deep. And that's it. So now, oh, let me change the status to something. Let's go say status. And then we'll say I don't know what my status options are. Let's go look here. I think it was just published, right? Let's just go look. And the UI is a little slow, but that's just a root. Nothing to do with this. Published. Okay. So, let's go back to this guy and we're going to set it to published. All right. And that's it. So now that will be done. Now we have this set to active. This will trigger for real. If we were to add another recipe. So let's reload this guy. This error displaying the data. I might have to go fix that and pause for a moment. It's unrelated to what we're doing. All right. Beef stew. And there's the image. That's it. Let's go add one more and watch it work. Okay. So we have our execution area in and now remember we would set a password if we're not getting anything here. It's just a password issue. And we're going to get something in here without what do they call that thing? A beaker or testing thing. Okay. So now if I go to my UI and I add a new recipe. Now I like how it made the slow cooker tag over here. That's cool. And if I prompted better, I would have made sure it said that long recipe, short recipe, slow cooker, whatever. It's cool. Error deploying it. Don't worry about that. That's just uh the UI has nothing to do with superbase. So now if we go back to our NAN over here, we should see that kick in any moment. And so if we look at the time and we look in there, it's going to kick in. And of course, we don't see it working until it's done. All right, 33 seconds later, we have a blog post with a recipe with tags. Think about like saving all your bookmarks here. There's so much you can do. And now imagine if this was three workflows with three web hooks, all of them doing their independent thing. Not only would it be faster, but a little bit more robust because if anything breaks there, it breaks. Let's reload the page. And there we go. Now, let's sum this up. All right, those are two really good patterns that you've learned with the Superbase integration event listener flow. It has changed the game for everything I've built in the past eight months since discovering this with Superbase and these patterns. Okay, so please give it a go. Watch this again to give it a try. Share, subscribe, join as I go into more deep dive paid membership material. Now, I do have an affiliate link below for Superbase. So, use that if you want to go learn more about them. They do open source as well. So, just to show our appreciation for a company that is giving us both sides, both options. All right. All right. Thanks for watching and I hope you enjoyed