This AI Agent Replaces an $82k/yr Graphic Designer (N8N)

Hey, today I'm going to build a graphic design AI agent live in front of you that generates logos, ad creatives, style guides, literally any visual asset you guys want 24/7, plus you review it and revise it until these assets are perfect. Also, I'm going to include a chatbot that you guys can install in client workspaces and sell for a,000 bucks a pop or more. Templates, blueprints, everything you guys need is down below in the description. If this is your first time here, my name is Nick. I've scaled my own AI and automation agency at over 72,000 bucks a month. And I'm now leading the biggest AI automation community by revenue with almost 3,000 automation freelancers and agency owners. I'm going to build this entire thing from scratch using Naden. I'm going to walk you guys through my entire thought process. I'll also show you all the deadends and detours so you guys could see what actual real high value AI development looks like from first principles. If that sounds like something you guys want to get into, this is a video for you. Let's do it.

Okay, so this is the system. It's an AI agent built in N8N and AI agents have their pros and their cons, but one of the most valuable and best use cases for them is this sort of like gradual iterative design. Their ability to come up with cool prompts and then their ability to work with you until something is to the point that you like it. So in situations where accuracy is less of a big deal, they're fantastic and this is the design pattern I've chosen for this system. The way that it works is essentially you send it a message saying, "Hey, how's it going? " It then goes through and selects the OpenAI chat model, stores a bunch of stuff in memory, and then it has access to a number of tools. We can generate a logo, a style guide, a gradient background. We can upscale images, and then we can feed things back into the open API to do a revision process, which I've mapped out. You can add arbitrarily many of these subworkflows. The way that they're working to be specific is we are basically downloading a pre-existing asset using a highquality service like Canva. So this is a style guide for instance and then we're having it use that style guide as like an example of the thing that we want and it does a pretty good job of mimicking the layout, mimicking the way that things look and then just adding in our own data. So that's more or less what we're going to do here. We've also exposed a little chat endpoint over here and I just made some minor design changes. So you guys could take this, upload it into your business, sell it to people as like a chat endpoint. Do more or less whatever you want, but in this case I'm just going to communicate with it directly through this little widget. And what we're going to do to start is we're just going to generate a style guide. So I'll say, "Hey, I want to generate a style guide. " I'll show you guys the upscale functionality as well in a second. We also baked in logic to like have it ask you things and, you know, follow up. So I don't know, let's call it like leftclick, uh, preferred colors, pastel hues, rainbow, gradient, soft, light, ethereal. I want minimalistic flat icon design with no outlines. And then for fonts, I want serif fonts. Um, and then style guide will be yeah, nothing. Okay, let's just go for it. It's going to take all of that data and it's going to use it to generate a request which is now feeding into our style guide generator. Style guide generator was the um one that was using that example that I showed you earlier. Kind of look like this. So, what it's going to do is going to take this and it's just going to modify it so that you know instead of it saying orange or something, it's going to say what we want it to say, which in my case is going to be leftclick. Okay. And then once it's done, it returns it in a link format, which is kind of cool. This is what the leftclick brand looks like. Um, reasonably high quality. I didn't specify the date that I started the company, but that's something you can do as well. So, as you can see, it did match pretty closely to what we were looking for. Um, and I personally think that this is extraordinarily sexy. So, what I'm going to do next is I'll say upscale this. Let's do 2x for now. What it's going to do is going to take that image that we just outputed, send it over to the replicate API. Replicate being the service that does all the stuff. Um, and then yeah, we now have the upscaled image over here, which is twice as big. It's also much sharper, which is really nice. So now this is something that might be like client ready. You could actually send it over to a client or maybe you know, you're using this internally or whatnot. And then, yeah, just to show you guys an example of like a bunch of the other things you can do. I also had it like generate me a gradient background. Generate a gradient background based on these colors. Light pink. Let's do greenish pastel. Okay. So now what it's going to do is going to go down that third route. That's going to generate me a gradient background using another example that I provided. Okay. And though it generated me a nice pastel gradient. Opening that up. As you guys could see, we do have that beautiful pastel color. We could upscale it. We could do whatever we want. We could also ask it to change things. Hey, this is great, but could you make it darker? So now I'm going to ask it, could you make it darker? It's going to ask me for some clarification. Yes, make them deeper, more saturated pastel tones. The reason why you do this is because if you just ask it to make a change for you, um it's very uh general. So this allows us to cut the fluff and get hyper specific and then now we go through an edit or revised route which allows us to close the loop and it's uh one thing that a lot of these graphic design team tools are missing. I should also note we expose an endpoint where you could use this. Um so you could copy and paste this URL, send it over to a client, have the client specific templates or style guide stuff for that particular instance. Um, and then if I go to the darker edited version, you can see that it's done some edits. So, you could dial back the edits. You can make them even more intense. I'm not a big fan of this one, but is what it is. Uh, better than having to hire a fiber designer or something, right? And that's the system.

All right. So, as I mentioned, this is a live build, meaning I'm looking at a blank canvas now. I've yet to actually do anything. The only thing I actually have is a road map here. And this road map is just me thinking through what I believe is going to be how I'm going to proceed with the system. I don't actually know for sure, though. And the reason why I'm showing you guys this and leaving in all the detours and all the ugly bits is because I actually think this is a much better and easier way for you guys to learn how to build systems than just looking at the finished product. I think that seeing the detours that go into an actual live development process, seeing some of the mistakes that I make, seeing how I deal with debugging and stuff like that, I think that's actually just very valuable. And when I was learning naden and make. com and just no code and in general, I followed creators that did stuff like this specifically because they left it all in. I liked seeing their thought process. It was very informative. So yeah, all I have so far is this road map and this is what I think the system is going to look like in a nutshell. Um I want to start by building a workflow that just generates an image using OpenAI's GPT image 1. This is the current most advanced uh you know image model that I have access to and it's also in the OpenAI stack. So it makes it really easy to do everything I want to do. But the reason why I'm starting with the actual image generation is because I always just like to start at the end and then once I verify I can actually do the thing that I want to do, which in this case is going to be generate some designs, then I'll work backwards to, you know, putting together the agent logic and making it all nice and pretty. So, we're going to verify this first of all. Then I'm thinking we're probably just going to connect it straight to the NA agent, start setting up some prompts, and then I believe I'll have to build different routes for different asset types. Um, I don't know for sure, but I'm thinking like, you know, we'll have a logo, but what if somebody wants to design like a style guide, right? That's a pretty common thing for a design firm to do. What if maybe we want some sort of ad creative or maybe some website design? I think what I'm going to have to do, and I'm not entirely sure yet, but I believe that this is going to be fire, is I'm going to start with just one route. After I verify that route works, I'm going to create like a logo preset. Then style guide an ad creative preset. And maybe I'll do two or three for now. I don't actually know how many I'm going to go down, but I'm going to provide you guys the way and the nugget that you will need to build out however many of these you want. And the idea is like I'm just going to use winning templates that other people have already created for these things. I'm going to go on like Canva and I'm going to find examples of style guides that crush and then I'm going to provide it to GPT image one alongside a prompt. So that way we're going to take a template which we know looks super sexy and then we're just going to say, "Hey, I want you to do something like this, but here's a bunch of information about the specific client request. " That's how I think we're going to do things. I'm not entirely sure, but yeah, we'll give it a go. Then I want to build some a scaling functionality into the designer. And for those of you guys that don't know, Aab scaling basically just means like if an image is 1,024 x,024 pixels, we just scale it up to 2048* 2048. So we just increase the quality of it. AI is pretty good at that. And that'll avoid this from just being a simple agent chatbt wrapper, which I think a lot of agents are. Then I'm going to build some way to revise the images to make them better and like, you know, make some adjustments cuz revisions are pretty common. And then finally, I'll make it pretty and package it. Okay, this is everything in a nutshell that I'm going to try my best to do right now. In reality, we're going to have some detours. We're going to hit some stumbling blocks. Whatever. Let's get to it. First thing I want to do is I just want to verify, can I actually generate an image using GBT image one? In order to do that, I'll hit over here, click trigger manually, and then what I want is I want the open AI node. I'm going to click on that button. The specific node I want is generate an image. Now, I'm going to assume you guys don't have a credential. So, I actually set this up alongside you. Let's scroll down here. And what we need to do is we need to fill in this API key section. So in order to do that, just head over to platform. openai. com. Log in. I believe I'm already logged in. Yes, I am. Then I go to the top right hand corner settings. Go to API keys. Then just create a new secret key. So I'll just say I don't know like Nad June the 10th. You can see that I actually did this cuz I wanted to already have one, but spur the moment decided I would redo it. Cool. Now I'm going to copy this and I'm going to go down here. If anybody wonders why I was exposed my damn OpenAI keys, this is why. I'm going to save. Somebody ran the hell up my account the other day. Okay, open account 3. And then down here under model, it's a GBT image one. So, let's click that. And let's just verify we can actually do something cool. So, minimalistic flat logo for a brand called leftclick no text inspired by Google's flat iconic design. Let's do that. What sort of options we have? Quality for demo. I'm just going to go low. And then resolution. Looks like we can change the resolution to 1024 10 1536 or 1536. Okay. So, I'm just going to click execute step. The reason why I'm doing this, again, just to be clear, is I always like starting at the end. And I recommend you guys start at the end, too. Don't start at the beginning when you do a system like this. Start at the end. Verify you can do the thing that everybody is paying you to do anyway. Hardcode all the data. In our case, we're hard coding the prompt and stuff. And only once we verify that works are am I actually going to bother putting together an agent or something. Okay. All right. So, data. I'm going to click view. What do we got? That looks kind of cool. I mean, do I actually think it looks cool? No, I don't like the outline. Oh, okay. Yeah. Actually, I think when I put it on a dark background, it look like trash. Now that it's on a light background, it actually looks okay. Um, why don't I do no outlines? I don't really like the outlines. Let's do pastel hues and color tones. Let's do that. I'm just going to play around with it a little bit. I imagine this is why I'm thinking we need some revision feature. I imagine people are going to want to go back and forth a little bit, right? Insert their own things. So, yeah, I'm just trying to see what sort of like user experience the people that are using this are going to have. And I think this is somewhat realistic. So, it's a view. Oh, that's so clean. That's the logo right there. Look at that. Oh, that's way better than my current logo. I might actually steal that. Just save this. Okay, we'll call it binary data. Awesome. So, we verified this. Uh, do you notice how right now the output is in binary, though? I don't really like this. I imagine this is going to serve a problem. I don't know for sure, but like rather than having it be output in binary, why don't I um just add it to a Google Drive. So, I'll go to Google Drive. They have an uh node called upload a file. So, I'm just going to my Google Drive account. As opposed to just showing you guys how to set up the credential here, I'm not going to cuz I actually did have my Google client ID and secret leaked and that did lead me to paying quite a lot of money. So, I'm just going to give you guys the docs for this. Just click on open docs. If you guys want to connect Google Drive, you do have to set up what's called a Google Cloud console. And then after that, you have to create a you have to authorize the Google Drive app. And then after that's done, you create a project. And then in the project, you get a client ID and client secret. So assuming that you've done this now, and there's many videos out there, just Google, you know, Google Drive authentication. Assuming you've done this, what we want to do is we want to go to file name. I'll just say design parent drive my drive root folder. Okay. Input data field name. This just needs to match this. So it matches this. So I'm good. So, okay, now that I have all this stuff, why don't I just pin this and I click execute workflow. You guys probably can't see this in the bottom right, but it says problem in node Google Drive. The operation expects the nodes input data to contain a binary file data, but none was found item zero. So, why is this occurring? It's occurring because in N8, if you pin I just realized a second after I did it. If you pin a binary output, it doesn't work. So, you actually have to rerun the whole thing, which kind of blows, but whatever. Let's just rerun it. Let's see what happens. The way that I do debugging is I always just take a deep breath anytime I see a bug. H. And then I ask myself, okay, what node is the problem arising from? And then I find that just like isolates the problem and it makes it a lot easier to know where to go. And you know, sometimes you don't know the node. Looks like that actually worked. Um, there are a lot of links on the right hand side. I think it's web view. This is what the one I'm going to paste in. And we're going to see does it pop up? Cool. So, as you can see, it took a different approach this time. It didn't take that like little mouse gradient thing, which is unfortunate cuz I like that one more, but whatever. It did upload the thing and we got a web view link. So, let me just see. Can I see this in incognito? Can't really see that in incognito. That's unfortunate. Is there some way I can like make this more accessible? H a properties. What the hell does that mean? I don't know. Properties. Keep revision forever. OCR language. Yeah, I don't know. Let's see. Is there a node that can make this just accessible to everybody? H share file probably. Let's see. Google Drive account file resource share. the file I want to map by ID. I'll go expression and I'm just going to map this here. Okay, that looks good to me. And then permissions. What do I want? I want roll writer. So, I want the person to be able to edit it and then it'll be anyone. So, anyone gets this. I don't know what file discovery is. Oh, I don't want to make mine Googled Google. Okay. Now, if I pin this now, will this work? Maybe it will. I don't know. Hopefully, it will. Let's see. Okay, it worked. Cool. So now this is now accessible to anybody. So I'm going to open up an incognito, paste in my link. Can I see it? Yes, I can. Fantastic. Cool, cool. All right. So what does this mean, ladies, gentlemen, and anybody else that's watching this? Uh, we are now done the first hurdle. Okay, so this is now complete. 100% good to go. We've now built a workflow that generates the image using OpenAS GBT1. Now it's time to make this really fancy and build in some agent logic. Okay, so what I want to do is I want to connect this to an NAND AI agent and set up prompts. So in case you guys have never used an AI agent before, I used to all over AI agents all the time to be honest, but recently the technology has gotten to a point where AI agents are actually somewhat reliable, which is nice. So what they are is that this node right over here where you connect a chat model, memory, and a tool. In order to have this stop being read, we need to connect a chat trigger to it. So that's what I'm going to do here and drag it. Then under chat model, I'm going to type open AI. The one that I'm just currently addicted to using is GPT 4. 1. I just use it for everything. I don't use the mini. I just pay full price. Why? Because I'm a badass. Then I do sampling temperature 0. 7. That looks pretty cool to me. And then memory. I always just do simple memory. Now GPT 4. 1's context window is so big that you can actually totally get away with having like a 5,000 context window or something. I'm just going to do 10. But I just want you to know that this is like irrelevant now. Context window doesn't matter. And before I do this, let's just actually go ahead and chat with us. So, open chat. Hey, what's up? Just want to show you guys what this looks like in case anybody here is new to AI agents. So, what happened is I sent the chat message and then it thought for a second and then it passed over to the chat model. Sent my message. Hey, what's up? Hey, not much. Just here ready to help. What's up with you? And then it went back here, added it to memory and then it kind of responded and output this. Can you design me an image, good sir? No, I don't believe so. Why? Because it can't help you because it doesn't have access to a tool. But now what we're going to do is we're actually going to give it access to a tool. Tool is going to make everything super hunky dory. So now I'm going to go call NA workflow tool. So call this tool to generate a design. We'll say design for now, not image. I'm going to go create a subworkflow and personal. This is going to open up a new window. And now we can actually add the thing that we will be calling. Okay. It'll ask us to change the input schema. So what sort of data do we want to provide to it using AI? I want to provide the image prompt for sure. the resolution probably because that was a field. Uh and then let me see what else do we got actually uh prompt resolution. We should add the type as well. Like I don't know for sure what the logic is going to be here but uh hypothetically let's just say we have three types. We have logo style guide. Let's just say background for now. Logo, style guide, and background. Okay. And we're going to like you know hardcode those in. So okay. Anyway, now we have a sub workflow. Why don't we call this GPT image one generator? Okay. Then in brackets, what was the title of this? I always like to organize them. AI graphic designer. So this one's just in brackets going to be a graphic designer. That's how I know that the AI graphic designer agent is calling this. And then what am I going to do? I'm actually just going to copy all of this. Well, cut it and paste it in here. I'm going to remove this when clicking execute workflow. And then I'll feed this in directly. So what I've done now is I've taken the logic with the image generation the very end and I've added it to the subworkflow and I'm connecting that subworkflow as a tool to the main agent called AI graphic designer. Okay. So now when executed by a flow what do we have? Oh I think there's one more thing we might need. Actually you see the file name. I'm going to have it create a file name too. I'm going to go over here. I'll go a file name. Okay. All right. All right, so once we have all this, okay, how do we actually map the fields and like make our agent be capable of sending data to the subworkflow and then receiving it? What we need to do is we need to map them by clicking execute step. It's now just going to output a bunch of examples here. What I want to do is I just want to like give it something. So image prompt simple flat minimalistic icon with a C similar to the Google logo flat, no outline. Let's do that. Resolution. I don't actually remember what the resolution types were. Already forgotten. 10,024. Okay. So, let's just double check. Anytime you want to double check what the actual like code value is of a field, just go from fix to expression. So, this is 1024 x024. So, you know, I just feed in a string basically. So, let me go over here. Let's just pretend that this is actually 1024 x24. Image type. For now, we'll go logo and then file name. What do we want to do? Like uh C logo logo. Let's do that. Okay. Save. Great. Now that this is done, we actually need to map this. So, let me delete this. Image prompt goes here. Quality. We'll just keep it as low for now cuz I don't want to burn my tokens and I'm just testing. Resolution will go here. Uh what else did we need? Google Drive. Okay. So, we we don't actually have access to anything until we run this. That's how N works. So, we just have to execute this workflow. I'm just going to decouple it from the subsequent node so it doesn't run all the way. Then once I'm done with that, um, yeah, we'll, uh, we'll connect it and then map everything. Okay, I'm seeing that it just finished. Let's view this. Now, we got the logo. It's a C instead of a G. The copyright claims so I can hear them from here. Uh, what we do now is we go back to schema. And then what do I want? I want the file name. Stick that here. C logo. That looks good to me. Fine. Upload data file. That's good. Uh, can I Oh, you know what? I can't actually pin this. You guys remember there was that issue. All right. Well, that's fine. Everything else here looks okay, I think. I believe. I am not sure. Is it okay? You know, I think we have to edit uh edit some fields here actually too, which is annoying. Yeah, I think the way that the agent works is input goes here, output goes here. So, if the output node is the Google Drive share node, it's not going to work. I'm not entirely sure, but I think I need to use an edit fields node. Kind of sucks, but whatever. We'll go manual mapping. We'll go web view link. I think that's the only thing we need. Web view link. Anything else? Maybe we'll just add the initial prompt as well, just in case we need the initial prompt for editing purposes. Uh, do I not have the initial prompt? Where the hell is the initial prompt, man? Why is this so long? H, We'll call this initial prompt. We'll call this file name as well. Okay. Oh, and then we'll also call this uh file uh image type. Okay. I'm just providing a bunch of additional data just in case. Uh we can now just pause these execute the workflow. Does this output what I was expecting? Web view link. Copy paste C logo. Nice. That does work. All right. All right. I think we're now ready to actually call this agent and just see what happens. Let's give it a try. So let me just add a system message and say you are helpful intelligent design assistant. You generate high quality designs using the provided tools. I'll say when you receive an image from a tool, wrap it in nice looking markdown ATX format and present it to the user. Uh markdown is just a simple way that you can format image outputs and just make it really pretty. And let's just rename this now to generate design. And I'm just going to go general for now. Okay, I believe NAND also has a tidy up selection now, which is cool. So, just um doing that. And now let's clear our previous output and say, "Hey, how's it going? " It says, "Hello, I'm doing well. How can I assist you with your designing today? " I'd like to generate a logo. What is the name or text for the logo? Let's go left click. No, left click. But don't include the text. Minimalistic, flat, no outlines, gradient, Google colors. Um, let's do a mouse pointer. Then let's go company. All right. Awesome. Just sent it all in. I'm not seeing anything here. Oh, my bad. I forgot the most important part of the prompt. Uh, which is the fact you have to have AI do it all. So, sorry. Anytime you're working with an agent, let the model define all of the parameters. Okay. All right. I'm just going to say try again. It should now be okay. Crossing my fingers. Okay. The fact that it's already taking some time to generate is good. And don't be like me. Um, there's a little bit of nuance there. they're inside of your AI agent tool fields. You can actually specify the data that you send over there. And what we're doing is we're always letting AI define that logic no matter what. So just always make sure to go down here, click define automatically by the model. Okay. Anyway, it looks like it's giving me the logo, but I can't actually click it. Why can't I click it? H I think there's a bug of some kind. This is the input. This is the output. Let's go here. Odd. It looks like the output was generated fine. Oh, hold on a second. Ah, no. There is some problem with this. I'm copying the JSON, not the actual output. All I want is the output. So, no. How do we actually see just the output data? It did the mouse. The mouse looks pretty cool. has some slight gradients and stuff, but um why isn't this wrapped? Maybe call this tool to generate a design. Then return the web view link in markdown ATX format so the user can click it and open a new tab. Maybe we try that. All right, let's do this one more time. Repeat this, please. Oh, and you know what? There's um some option here to pass through binary images. Let's do that as well, just in case that I'm missing something. Okay, I think this now worked. View logo, left click, mouse pointer. Clicking on it. Nice. Okay, cool. We got our little leftclick mouse pointer in there. Beautiful. Awesome. I should probably clarify. That's the name of my company. That's why I keep on saying left click over and over again. Cool. So, what have we done now, ladies, gentlemen? We have connected to NAND agent and we set up the prompts. Our next step is to build routes with design presets for different asset types. Now, you're probably wondering, Nick, what the hell is a design preset? Well, here's what I'm thinking. I know for a fact that if you give OpenAI GPT image 1 an example of something that you want, and then you say, hey, I want you to do it kind of like this, but I want you to swap out a bunch of stuff, it'll actually do a pretty good job. So, what I want to do is I want to give it a bunch of examples of things that I like that I've verified are great designs, and then I want to have it like change it up a little bit. Now the thing is I know for a fact that you also just can't use the GPT generate image node here. We have to actually take a different approach which kind of sucks. If I go to OpenAI here, you see how there's if I type in image or something. There's only analyze an image or generate an image. There's no actual like edit an image here. Unfortunately, there's nothing for editing an image. So you can't actually supply an image as an input through their thing that I know of. I mean maybe I'm stupid. I don't know. Yeah, I don't believe you can. I think you tech Yeah, I think you have to do an API call. So, that kind of sucks, right? But whatever. We'll make it work regardless. Somewhere in here, I have a cyclic content generator that I generated forever ago. And I was playing around with image01 or GPT image one, and I came into the HTTP request. So, I'm just going to copy this being lazy, but I'll run you guys through what it looks like. Basically, previously, I was using Dolly 3 to generate images of handdrawn squiggly cute subjects to put in a newsletter. And the newsletter outputs are actually pretty great. Um, but I was just testing it with GBT image, but I'll actually show you guys what it looks like. Let's just paste it back in here. Uh, should I paste it here? Should I paste? Okay, anyway, let's paste it here. And then I'm just going to add a manual trigger. So, what I want to do is, um, this is an HTTP request to the OpenAI back end, which does V1 images edits. Okay, I'll run you guys through how to set all this stuff up, and I'll pretend that I'm, you know, doing it live for you the first time, even though I'm copying this over from another workflow. But I want you guys to know that like I copy stuff from previous workflows all the time. Like you want to talk about live builds, like 70% of my live builds are just like, hm, how the hell did I do that API spec before? And this is normal and it's actually recommended. Like I recommend you do this because every time you do an HTTP request like this, you are building a component. Why not make use of that component again? I mean, AI automation is all about leverage, right? So that's what I'm doing. And yeah, I mean, this is very similar to what I want to do. But anyway, let me actually show you guys an example of it first and then we'll I'll kind of run you through the rest of this. Let's actually just use my Google Drive. That'll be easier. I'm going to download the file as binary and then I'm going to send it over to GPT image. What am I going to do for the image? I'll go to Canva and then I'm going to do style guide. Yes, this is where I make all my crappy thumbnails. That is definitely not me. Let's go. I guess just create then style guide. I want to see style guide doc. Is that really the only thing that we have for style guides? Wow, that sucks. Actually, my goodness, that's terrible. A brand guide. I think it's called a brand guide. Um, I'm going to go brand guide. Okay. Yeah, this is what I wanted. Okay. Okay. You see this? This is what I'm going to use as an example. I'm going to feed this into AI and I'm going to say, "Hey, I want you to generate stuff that's kind of like this. Let's do a PNG for now. We're not going to do the same aspect ratio, I don't think. Maybe we'll do 1536 or whatever. " But I'm going to download this. And then what I'm going to do is I'm going to upload this to Google Drive. And then I'm going to access this. So, let's go drive. So, now what I'm going to do is I'm going to drag this over here. I don't know why that isn't coming in. I'm then going to open this. Um, I need to grab the link. So, I'll go share and then I'm just going to copy this link. This is the ID over here. So, if I just copy this and then go back to my AI workflow, I can actually just paste the ID directly in here. This should download my file now as binary. We'll see. But, um, yeah, let's execute this step. We should have a binary file, right? View. All right, cool. That's pretty big, but whatever. We'll feed it into a one. So data using this image as inspiration, let's create a new style guide for a dark and moody brand called leftclick ink. Use sand sarah fonts and dark pastel hues along yes for design. Okay. So now what I'm going to do is I'm going to feed this in and then can we do resolution? Oh, I don't know if we can do resolution as output h. All right, whatever. I'm going to try execute step. Okay. Now, the output of this is always going to be B64_JSON. That just stands for base 64. It's kind of annoying, but what you can do is you can pin this node. And then let's just pin the rest of this over here. You can go base 64 convert to file feed in this data and put output in file. And then mime type. I think you have to go image image. Uh, I actually kind of forgot. Uh, I think it's PNG. Yes, PNG. There we go. And this will actually now create a PNG for you. At least it should We'll see. Right now, we actually have a PNG that we can view and download. And what does the actual PNG look like? Check this out. Leftclick ink S 2018. Left click ink. Left slick ink. Nice. Fonts. Quick sand. Color palette. Mouse pouring. It's dark and it's moody and this is our color palette. Listen, that's actually pretty good. I mean, that looks clean as hell. If I could generate these sorts of brand guides on demand and this is like part of the work that I did. Hell yeah. So, I'm thinking this is going to be the approach I'm going to take for all of the content. We're going to do like templated for style guides. We're going to do templated for I don't know. I'll probably do like a nice background gradient just to make my life easy and show you guys what's possible. And then I'll do some for logos too. And we'll just like pass this in. Now that I'm thinking about it, we can actually just add HTTP requests as tools. So, we could probably just map this one to one. That's going to be so easy. Basically, what I'm thinking of doing is we're going to have this call this generate logo. Okay. If we generate a logo, this is the tool we call. Then I'll say if you want to generate a style guide, then call that other tool. If you want to generate something else, then call that other tool. So this is just going to be our logo generator right here. Okay. Then what I want to do is I want to do HTTP request. Actually want to map this HTTP request from this. So, unfortunately, there's no way to map it. You just have to kind of copy and paste it one over one because the HTTP request nodes are a little different, but I know that it's a post. Nope. Post. I know that the authentication's predefined credential type. Under credential type, I'm going to go open AAI. This will allow you to actually collect or select the same credential that you created for OpenAI earlier. So, even though you're doing an HTTP request, you don't have to rebuild the wheel. Then underneath uh let's see what else did I do. underneath body we have to do form. So send body content type form data I think and then we just go one for one model GPT image one and then NAN binary file image and then that last one is going to be the prompt sorry prompt we can have AI fill this in maybe I'll have that in for now and then I think that's all we need to do I'm not entirely sure probably let's just give it some instructions here as well call this tool to generate a style guide, then return the web view link in Markdown X format so the user can click it and open a new tab. Okay, so after we call the HTTP request to generate um style guide, we actually do have to um now that I'm thinking about it, do a couple a little bit of post-processing, right? So it's not actually that when we generate a style guide first we have to generate a bunch of binary using this. So, let's think. Okay, maybe we have one thing that downloads a specific file and then we'll download this file and I think it's called orange or something, right? No, this one right over here. Then we'll call this the gener uh grab style guide example. Then we'll feed that in here. And then we're also going to convert the file. Do we have any processing? No, we don't actually have the ability to do any processing. It's kind of annoying. Okay. Actually, now that I'm thinking about it, probably makes less sense to do it this way and it makes more sense just to feed it in as a subworkflow. As cool as it would be just to bang this out in one shot and then I, you know, I could edit it here. There's also the simplicity aspect, I like the idea of them all looking the same, feeling and working the same. Uh, and then obviously I wouldn't have to do this get style guide example, right? Yeah, probably makes sense. So, I think I'll call it there. You know, we're just going to duplicate this. Instead of a logo, it's going to be a style guide. then return the web view link in markdown format. And then what I'm going to do is I'm just going to create a new sub workflow. And instead of it being, you know, GBT1, I'll call this logo generator. This one right over here is going to be called style guide generator. I'll go back to my style guide generator and then copy this. Paste this in here. Now we should be able to yeah if you think about it download this file generate the image and then convert it to a file and then upload it to Google Drive at the very end as well. Why am I uploading to Google Drive? Because I want the format of this to be the same as the other generate which has the Google Drive upload and then share basically at the end. Uh, did I do this again for some reason? I think I did. That's stupid. Let me delete that. Right. So now we should be able to map this from the previous node. The only difference is it's going to be base 64. We're still going to upload it from data that we should also get when executed by another workflow. So I just want to make sure the schemas are the same. So can I just copy this? Is that going to work? I don't really know. Nah, you can't just paste one uh one node to another like that. We have to manually put them in. Kind of sucks, but it's what it is. Let's just manually add four. Image prompt is the first thing. Resolution is the second thing. Image type is the third thing. And then file name is the fourth thing. We're going to execute this step. We now have access to all of these. So, let me plug it in. Let's just copy these as examples for this so that we can actually run it too. So that's one. This is another. I don't like how it always goes on lines here. This is now going to be style guide. And let's do 1536. And then this one down here is going to be called C logo. Then we'll say image prompt is style guide for leftclick a dark moody brand with sans sarah font and a frightening pastel frightening yet pleasant pastel hue. Okay, that sounds sufficiently that I think he could pass off for graphic design work. I'm going to get uh some hate for that, I take it. Uh generate image using GPD image one. So, what are we going to feed in here? Using this image as inspiration. No, we're not. What we're going to do is we're going to feed this in. I'll say create. Then I'm just going to feed this in using this image as inspiration. create and then going to do all that. Okay. Then after we're done with this, we are going to convert the file. Uh I think this is the right field. I'm not entirely sure. Then we're going to upload the file. And that should be fine. Just data with the file name. And then we're going to share the file, which also looks good to me. And then just copying the last thing from here. I'm then going to grab the Google Drive web view link. Cool. Cool. Let's drag all this now. And then let's just tidy up selection. Space them out all nicely. Very, very big fan of that feature. And then I just want to run this once. Just make sure that it works. Well, not No way in hell it's going to work on the first go. Things never Um, but I'm just giving this a test. Oh my goodness. It might actually work in one shot. Good lord. I think it just worked in one shot. Okay, generate image. We generated it. Let's move on. We then generated or we grabbed the data. Oh my goodness. Talk about spooky. That's pretty funny. I like it. It's actually pretty close to my own logo. What does that say about me? Uh, okay. And then what? Web view link. We don't have web view link. Why not? Oh, cuz this one's called Google Drive, too. There we go. So, it was null. So, that wouldn't have actually worked. Cool. Um, just because I changed the way that the things were named a bit under edit fields. Everything else work though? Yeah, everything else worked. Okay, cool. So, now we should actually be able to like specify two different assets that we're generating. I should note that these run times are going to be a little while. Uh, but that's okay. So, AI agent, it's going to have two tools. You're helpful intelligent design assistant. And then I always like to just like make it really clear what those tools are, right? Logo and generate style guide. When you receive an image from a tool, the user, the only two things you can generate are logos and style guides. Make sure to clarify which as well as any additional information needed. So your prompt is optimal. The prompt you send to the image model is optimal. Okay, great. Looks good to me. Am I missing anything? I don't think so. We're going to refresh this. Open this. Hey, what's going on? Hot stuff. Hi, I'm here to help you create amazing logos and style guides. If you have brand, project, or ID in mind, just let me know what you need. Logo, style guide, or both. Okay, let's start with a logo. And I'm kind of curious, what sort of questions is it going to ask me? So, name or text? Let's say workflow loop. I want it sleek, clean, minimal, flat icon style. Um, pleasant pastel hues reminiscent of the Google logo. Pick whatever images you'd like. Pick whatever symbols you'd like. Okay, send that over. We should now call the generate logo. And we are calling the generate logo. Cool. I should also note that all the images that were generated so far using the low resolution. So, it's like about as crappy as it'll ever be. But hey, just zoom out a little bit here just so that I could see the outputs and messages that I'm sending. Okay, it's done. We should now return it. Clicking it open workflow loop. Very, very cool. I really like this. The only downside is, as you see, there are still some issues with the text processing. That actually still looks pretty sweet, though. Not going to lie. I mean, this does a much better job than I'd ever be able to do. Okay, great. I'd now like you to generate a style guide. base it on the prompt I sent you above light pleasant etc. Okay, it should now turn that prompt that I used to generate the logo into a concordant style guide which should have some sort of similar data. Let's go to input style guide for workflow loop with a sleek clean minimalist flat icon style. Pleasant pastel hues reminiscent of the Google logo and ensure an overall light modern and inviting feel include suggested logo use color palette typography iconography and sample branding elements. Looks like it's feeding in a resolution that is not possible though. 1792 * 1024. That may be a little bad. Uh we should probably specify the resolutions, right? We should supported resolutions. Let's go 1024 * 1024. Can already tell that's going to be a bug. Um 1536 and then 1536. Cool. We should probably add this to the other one as well so it doesn't screw that up later. Yeah. So, we did run into an issue with that. Oh, wow. No, we didn't. Very cool. Look at this. Oh, so clean. Type typography. Regular iconography. Workflow loop. Oh, this is very, very sexy. I am surprised it's that sexy, honestly. Was not expecting that at all. I like the green as well. Very cool. So, now we have like a designer in-house basically that we can send this stuff off to. Um, let's do one more. And I'm going to breeze through this just because, you know, I want this to be like a very domain specific thing. So, like what's something that we always get asked for? Generate some cool gradient or something. Instead of you having to build like a gradient tool, you could totally just do this. So, let's do it. I'm just going to copy and paste this. Instead of style guide, it's just going to be like gradient background. So, let me rename this. We'll go gradient background. By the way, I'm using manual stuff for all this, but like you can just press space and then you can rename. Um, they've updated their hotkeys, which is pretty nice. This is going to be gradient background. So, space. Let's go generate gradient background. Over here, I'll say call this tool to generate a gradient background. and then return the web view link and markdown so the user can click it and open a new tab. Then I give you some supported resolutions. Very cool. Image prompt, whatever. I actually need to generate a new subworkflow, right? This one needs to be for gradient image background. Let's just copy this. Very cool. Then I just basically want to, you know, duplicate this workflow. If you think about it, all this is going to be the same. Logic here We're going to hook this puppy up. And now we just need to add those four schema types. So I think it was image prompt. resolution. I think it was image type. And then I think it was file name. And it doesn't look like we're actually going to use image type. Um why? Because I'm a silly goose. That's why. What am I going to do now? Just to make my life a lot easier. This is about as fast as I'd do it if I wasn't explaining everything. I'd say gradient for left click. Dark moody brand. Simple gradient background for left click. A dark moody brand that prefers dark pastel tones. Okay, looks good. Now, the file that I'm going to download has to be a gradient background. So, I like the noisy gradient backgrounds. Let me see if I can add noise to it. Oh, you see that? Oh, I love them noisy back. Oh, look at this. Oh, that's so sexy. Let's do that one. Open image in new tab. We're going to download this now. Uh oh, AVIF. No, sorry. We need a PNG. I don't actually know for sure what you can use, but um this is way too big. I don't want to spend all that money. Okay, we'll use something that's midsize like this. This is JPG. I don't actually know if JPG is fine. Why don't I go JPG to PNG just in case? Um, it probably works. Yeah, you know what? I think it does work. Open AI API image. Can we support like a JPG? Let me just double check this really quickly. Yeah. Okay. Yeah, we can do just JPEG. So, let's just do JPEG. So, I'm going to grab this now. Oops. I'm just going to paste this somewhere. Let me just rename this to cool gradient background. Cool gradient background is now uploaded. We should be able to click this button to show the file location. And we got it. Um, so how are we going to get the ID? I'm just going to copy the link again. I'm going to grab this URL. Now, I can delete all this stuff cuz I don't need it anymore. Okay. Uh where are we here? I think it's this one. So, I'm just paste this ID in. And then generate the image. I'm going to say using this image as inspiration. Create. That should be good. Revert to file. Upload. Share. And this field should say Google 2. Okay, it does. Awesome. So, now what we're going to do is we're just going to run it. We're going to see how this one works. You'll notice that while I do all of this, I test after every run. Um, when I say every run, I mean every run. Like, I legitimately test after more or less any change that I make. And the reason why is because it's just much more effective. Like, let's say I were to run into some issue at some point with any part of my flow. And I didn't know what the issue was. Well, now that I because I test everything and then I do the next thing after, I know that if there's any issue with any part of my flow, it is the specific thing that I'm testing. It's nothing before or after. Okay. So, let's go to edit fields here. Let's see the web view again. Let's see how it did generating that gradient. I mean, it's okay. It's not the best gradient I've ever seen, but it is pretty dark and moody, so I think that works. Let me just see what sort of size was sent to it. I mean, you know, we said low resolution, so I imagine that's why it was kind of grainy back there, but what kind of size was sent to it? 1536 by 1024. Does that 1536 x 1024? I don't know. It's tall. It's tall for sure. It's taller than it is wide. You know, this would have been square, something like that. But this is taller than it is wide. All right, whatever. I'll leave it at that. Looks pretty good to me. So, now we have three tools. An AI graphic design tool for gradient images, one for style guides, and one for logos. Notice how the logo I just left without any preset or example, but you guys could do whatever preset or example you want for any of this. The idea is I just want to give you guys the nuggets that you could use to make this better. Um, so where do we go from here? Well, we've actually done this now. So, we now have our Asian capable of doing this. So, why don't I do one more just little test with the gradient tool. And then from there, we'll mark that as done. Let me not mark that as done until we're 100% sure. So, let's refresh this. Generate me a cool breezy gradient background. Cool, breezy, light blue, almost ethereal gradient background. Okay. And you know, I think I just realized we've only given it two tools. Generate logo, generate style guide, and generate gradient background. Logos, style guides, and gradient backgrounds just so it doesn't make a uh make a major mistake. Still, the fact that it's taking a while to generate is a really good sign. We have our little sweat shop in the background. Let's see what that reel background looks like. Ooh, that is so much better. Oh, look how clean that is. I really like that. What sort of logo design do you think would fit with this? What do you think? Mhm. Okay, this is great. I like all of this. Let's generate a logo for workflow loop using your above tone above uh directions. We're going to take those directions. We're then going to feed that into the generate logo. And now you guys can see how there's a little bit of back and forth. you know, we're actually capable of having it generate something, asking it for some more refinement as a result, then feeding that into the next thing. This is very similar to the end result that I want to get to. The one final thing we need is we need a way to revise images. Well, I guess two final things. I want a way to upscale images cuz I don't like the resolutions that are provided. And I also want a way to um upscale im uh revise images. Okay, so look at this. This looks really sexy. It did make that mistake with the eye again. But hey, I mean, what are you going to We have magic intelligence in the can. Are you really going to break a blood vessel or something because it forgot a tiny subset of pixels here? I definitely wouldn't. Um, so that's pretty cool. I'm pretty stoked on this. I'm building this in part because somebody asked me in a previous video about this, but also because I've wanted something like this for myself, so I'm pretty stoked on it. Let's now talk about that third last step, which is building an AI upscaling functionality into the designer. Upscaling is just an HTTP request with the image basically. Um, there's a variety of upscalers out there. I'm thinking replicate upscaler. And I know for sure that there are a few. The one I'm thinking using is this Google one. So, it's just going to upscale it two to four times. Pretty simple. Pretty high quality. The way that you do this is you need to create an account. So, I haven't I don't think I've done this yet. Okay. So, I just signed in. Now, I'm authorizing. Cool. So, now I want to run with this API. Uh, I just want to do curl requests. Looks like this is how you do it. But I'm just going to copy this over into this. And what am I going to do now? Well, now I can actually do just an HTTP request. Like that's fine. I'm going to import the curl. Paste this in. I don't know what EOM means. I have no idea to be honest. Call this tool to upscale an image. And then let me see what sort of parameters can we provide. So we need Yeah, we need our API key. So I'm going to grab the API key in a sec, but that's it. Just input image upscale factor X4. Okay. for upscale factor you can write 2x or 4x nothing else okay let's just be very clear about that we need the replicate API token so how the hell do I get the API token dashboard private AI models I honestly don't know who knows oh API tokens there we go all right this my default API token we're going to go back here feed that in so do I need a dollar sign no probably not just feed in the token right this is going to be the URL that I'm feeding in so let's just double check this is Okay, bold one. Let's just give this a try. Um, the only thing that I really care about at this point is giving it a try. So, let's give it a try. Payment required. Check your payment details. All right, so that makes sense. Should probably add some payment details. So, can I now just call this please? Okay, we're now upscaling the image. That's pretty neat. Um, looks like the output is called output. Sorry. Well, damn, that is upscaled as hell. Okay, cool. So now we have the ability to upscale return the output response zero output parameter wrapped in markdown nice markdown ATX format for the user actually I mean I guess the model's going to do it all but whatever let's now call this upscale image okay and now why don't we do this we do need to change one thing this over here is going to the dollar sign from AI and this is going to be like the input image URL. Then this over here is also going to have to be from AI. This is how you sort of do 50, you know, 50% upscale factor. Okay, so now I don't know for sure if this is going to work, but we'll give it a try. Let's just clear everything. Clear execution. Clear this. Hey, what's up? What tools do you have available? Oh, and I think I need to ask add one more tool here. Then you can also upscale them. Okay. We ask. And what will it say? It'll say we can generate these three or upscale them. Okay. Great. Generate me. Oops. Me a super funky Dory gradient. We want funky and we want Dory, baby. Let's make a funky dory. Super funky. Yeah, I think I should record these videos with sunglasses on for max funk. Get that max funk on. All right. Uh let's see what we got here. Let's go. Chop chop. Giant galaxy brain. I got places I need to be. You know, I think when the robot uprising occurs, they're coming for me first because I just make them generate super funky dory gradient backgrounds. Great. Please upscale this. Now, it should do your request is invalid. Now, why is the request invalid? No. Tell me. What was your input, man? Can we see the input that we are feeding into this or is it just going to give me the error? image input URL is this. Oh, that's why. Oh, yeah. We can't uh we can't feed a Google Drive link in. It's not going to work. I think what we need to do is we need to feed in a direct uh image link. One sec. This is the gradient background. No, this looks good. We have the download function on, don't we? So what was the object forex and then the UC right? Your request is invalid. Could we just pin all of these? I'd kind of forget if you could just pin these. Hm. All right. One sec. Let's just see if we could hardcode this and make this work. Yeah, it's a Google Drive link for sure. Definitely a Google Drive link. Uh, how about this? If we feed this in, is this going to work? Let's see. 4x. Uh, why is the four red? Okay, let's just go to imager. Open up this. Uh, and then go over here. Feed that in. Press is invalid or cannot be. Huh. Is there some issue here that I'm not understanding? Because I thought this worked fine earlier. Let's go back to the replicate API. Let's see what my usage this month has been so far. 2 cents, right? So, no. Here's the upscaler, right? So, curl request input. This is the Is it only a PNG that this works with? Maybe. If I just feed this example in again and then I say 2x, is it going to work fine? If it does, then yeah, definitely an image. No, there's um actually just like some fundamental image with this. Okay, so it's not actually me. That's great. Um, that's fantastic. This is really good. Authorization content type application JSON prefer weight. Oh, X2. Oh, okay. My bad. So, I just made a very simple mistake where I was saying X2. I was saying um 2X when it should be X2. So, let's see now if this works on my Google Drive file. That was fast. I don't know if that works. It says output and null. So, I don't think that this works as an input. Okay. Well, now let's try this again. We're going to unpin all this. Going to get the link here. Try again. Feed that in. No, I definitely just want it to finish. I don't want to wait like this. Oh, right, right. Sorry, I didn't I mapped it wrong. Right, right. I got to go um dollar sign from AI. And then this has to be input image URL. Then this over here has to be dollar sign from AI. And this one has to be upscale factor, right? Just make sure this looks good. Yes, it does. Okay. Try again. Let's do that. Oh, did we run out? I think we ran out. So, use the funky dory. It's now feeding in the funky door. It's taking some sweet ass time. This is a good sign. Hey, there's the super funky dory upscaled gradient. Look at that. Oh, that's so much better. Wow. Clean. Look at that. Oh, I'm so excited about this. All right, sweet. So, now we have the upscaling functionality built in. Wonderful. And hell, it even actually just like put the whole file in here. Why did it here? Do we have the binary or something? I don't know. Weird. Super cool, though. Super cool. Um, got the input image URL. Looks like it actually converted into a downloadable Google Drive file. So, I don't even need to make any edits. And yeah, we now have that. All right. So, we can head over here. Build AI upscaling functionality into designer. build a way to revise images is that's the last thing that we kind of need to do if you think about it. So, how are we going to do that? Well, we use something very similar to what I just showed you guys a moment ago with the generate style guide, generate gradient background. At least this is what I'm thinking. You know, we want to edit the image, right? So, in order we're going to have to feed in some previous image obviously. And then we're going to say no, make these minor adjustments to it. So, what am I going to do? I'm just going to copy what I did for gradient background. Then, I'm going to drag this over here. Okay. And then this one here will be called edit. Let's say edit /revise image. Call this tool to edit or revise an image. Only call this if you are explicitly asked to change something. Okay. And then supported resolutions. We're going to include those. And then I'm going to create a new subworkflow. This is now subworkflow number four. This subworkflow is going to be called the same thing as the rest of these just for organizational purposes. I'll just call this image editor. Maybe design editor revisor or something. And then over here, just going to copy all of these nodes, paste them right the hell back in, making use of previous time and logic. And then what I'm also going to do is I'm just going to get the uh right input schema like I had before. So I'm going to add image prompt including one new one. We'll do resolution. We'll do image type. Then we will do file name as well. Then the last one we're going to do is we're going to go previous image URL. The reason why we're feeding in the previous image URL is because we're then going to download the file directly from there. So, we actually just map it by URL. Okay. What I'm going to do here is I'm going to go grab the pinned output. I'm going to go back to this. Change it. The last thing is though, I want the previous image URL. And what do I want? Let's do this. I think this is this. Yeah, I believe this is okay for URL. I'm going to feed this in. Leave this and let's just say make this darker. 1024. This is revision and this is workflow loop logo. Okay. So now when this is executed, we should feed this in. Grab the previous image URL, which I don't know if this is going to work. We're going to find out. Then generate an image using GPT image 1. Then I'm going to say this is the former image. The client wants these revisions. Make them. Let's just try that. Okay. So, first thing is I'm just going to test to make sure the Google Drive node works with that URL mapped in. Does it? It does. So, we've now got the image back inside of NAN. We're now going to generate the image using GPT1. It's automatically going to model. Okay. And we also have the image prompt that we're pulling, which is good. After we're generating it, we're going to convert it. Then we're going to upload it. So that's cool. And then we're going to go Google Drive. edit the fields again. We're going to return everything. We want Google Drive to web view link, right? I think it's two. Yeah. Cool. So honestly, we should have everything that we need now. I'm not entirely sure, but why don't we just try one whole run through from start to finish with the adjustments that we asked for. uh where we're going to feed in the actual image itself plus a request to change and we're going to see how all this stuff goes. Crossing my fingers here. That looks like it worked reasonably well. Now we're editing the fields. Let's see. Is this uh change visible? Well, it definitely did make it darker and it fixed the workflow loop. Um realistically, if I were to get this, I would probably see this and then I would say, well, I don't I didn't want it this dark. I mean, the background's black, you know. Realistically, I would say, you know, make this darker without changing the background, right? So, maybe there's going to be some issue where like when people make these changes, it'll specifically always screw up the background. I don't know for sure. Make them without materially changing anything not explicitly asked for, including backgrounds if relevant. Okay, I'm just going to try this one more time and just see if my minor little correction solved this one edge case. Now, obviously the issue with agents in general is that there's just so many edge cases, so many things that people could ask, right? So, we're not entirely 100% sure if this is necessarily going to cover all the edge cases, but we know that it can cover the specific background one, and that's okay. And then we can slowly build in some more um suggestions, I would say, to guide it towards the right answer. Okay. So, now with this adjustment, I'm just going to paste this in and see if we can grab the same thing. Maybe the issue is not necessarily that we should guide the rails at the generate image side. Maybe what we need to do is we need to force the user to construct a more explicit change. Make the logo part of this a darker blueish color. And maybe we have some sort of, you know, I like this, but make the logo part of the design a darker bluish color. Keep the background light white for transparency reasons. Let's do that. So maybe the problem is actually earlier up in the chain and we can achieve similar results if we adjust the way that the agent is making the call. And over here we say only call this if you're explicitly asked to change something. make sure that the user has explicitly defined what edits or change that they want, right? Something like that, I think, could work re realistically. It may also have something to do with the resolution. Maybe because we're having it generate like the lowest quality or something like that. Maybe it's just not as good. I don't know. But yeah, I mean, this obviously is significantly darker than the previous design. Um, which is nice. So, I think if I were to compare this design to this one, I obviously like this design more, but um you know, also maybe Oh, wow. Look, it didn't even really change the shape at all. Very, very barely. I mean, you know, there are some minor adjustments to sizing and stuff like this, but still pretty solid. Okay, so I think that's what we need to do. So, I'm just going to go back to the agent, then I'll say. And finally, you can revise them. If you are asked to adjust or revise an image, ask the user to define their changes as explicitly as possible. Okay, let's try this. Now, I'm going to open the chat again and I will say, "Hey, uh, well, let's just verify. Does this work? Hey, could you make funky Dory darker? Let's see if it's going to ask me. Uh, okay. So, there is an issue with this. Why is there an issue with this? Oh, right. We're missing one um field here which we can define automatically. There we go. Okay. Maybe we add give them a very simplistic ask. Uh the parameters value is in Oh, interesting. Image link I used to make the gradient darker. Why? What did we feed in here? Interesting. Well, we got to go up the stack again. So, opening a chat model, right? So, edit revise. So, what did we feed in? Replicate delivery. What the heck is this? Hm. Previous image URL was replicate delivery. I don't think it was. Oh, yes, it was. Huh. Does it look like the URL is incorrect, though? Why is it when I copy this, I'm pasting the wrong link? Well, this looks good to me. Can I access this without being signed in? Yes, I can. Strange. We need to be able to feed in the input URL, the previous image URL in order for it to do something with it. Right. So, what's going on here then? This is the designer. I fed in the previous image URL. So, let me unpin this. Maybe it has something to do with the pins. I don't entirely remember to be honest. We then download the previous image URL. Okay. Generate the image using that download thing. Google Drive 2 3. Okay. Hm. Let's try again. Getting the same details again. Are we feeding in something that we shouldn't be feeding in? H I'm going to view the subexecution and see what data was fed in. Okay. So, when executed by another workflow, we did feed in the replicate data. Looks like Google Drive. Oh. Oh, of course Google Drive can't download the replicate data. That would be silly. Okay, so this is an edge case and I'm glad we found it. Most of the changes that we're going to ask for are presumably going to be changes to the source files that are generated from the gradient generator, the sty generator, or the logo generator. But in this case, I asked it to make a change using the upscaled image itself. And the likelihood of that occurring is low because it just doesn't really make logical sense. Why would you upscale the image and then be like, "No, actually, I want to change the upscaled image. " Silly, right? So, what we should probably do instead of this is we should have some routes available where if somebody uploads a non- Googlele image, we should download the image and then we should upload it to Google and then continue with the route. That makes sense to me. So yeah, that's probably the best way to do it. Are there any other things that we might do? No, this is the only route where this would be immediately applicable. Yeah, that's it. No other route. Why? Because logically this is the only route in which we would need something like that. So what we have to do is we have to switch and I will say if previous image URL contains we will say um Google then we go down route number one otherwise if previous image URL does not contain Google then I want to go down route number two so or route number one I should say so this should be route number zero right one um Google this should be non Google. Okay. So, Google goes down here. Non- Googlele is actually going to do an HTTP request to that data first. And it's unfortunate, but I have to grab the execution history from here, don't I? Yes, I do. So, bear with me one second. Let's bring this up. Can we change this to be JavaScript? Yes, we can. Let's do this. Let's go back here. And then what I want is I need to pin this just like I was doing before. Oh, this is not what I wanted. Um, this is what I wanted. And then Oh, no, no, nope. I actually wanted the real data, but it looks like I'm copying the schema over. Why is that? It's pretty annoying. Can I just copy this whole thing or is it No, it is definitely going to do that. That's really crappy. Can I just copy this manually and then it'll work? Yeah. Okay, that works. Let's go here. Nice. So, we should now have everything, I think. Save. Yeah. Okay. So, now it's feeding the replicate URL in for our test. Because our test, it should always go down to this, which means we can feed in previous image URL here. What we're going to want to do is we're just going to want to download the file. And um I'll be honest, I don't remember how to download a file. So, let's just give it a go. That is an invalid URL, ladies and gentlemen. That is very invalid. So, why don't we delete this? Execute the workflow. Are we downloading the file? Hey, we are down downloading the file. Okay, great, great. So, then what we do is we upload this to Google Drive. You don't have to do this, mind you, but I'm doing it because I uh am a stickler for consistency. You know, like if everything else is going to be like this, then I'm going to include the same logic everywhere. So, if it's Google, it's going to go in here. Oh, sorry. And then if it's not Google, it's going to go in here. So, no matter what, uh, it should always get JSON previous image URL. And I think that's enough to close the chain. I may be wrong. I don't know. I might need a merge node or something. But, uh, why don't we just select everything and then how do we tidy up selection? Was it shift option t? Nice. I don't really like how it tidies it up, but what are you going to do? Execute workflow. Download. Upload. The parameters value is invalid. Why? Because this output is not going to be called previous image URL. Obviously, this is going to be called web view link. I'll go if make an expression here. Dollar sign if. Can we do that? Yeah. dollar sign if JSON previous image URL then we'll do if not we'll go JSON dot web view link probably uh I'm not seeing this web view link I think that's sufficient I don't know for sure I think this is going to grab the web view link Um, no, this shouldn't. Okay, let's try this again. Okay, it's now downloading the file, generating the image using GBT1. Okay, cool. So, I think that logic worked. Let's see. So, it downloaded this URL. Cool. Which is nice. We've now put in a little bit of code here just to route it correctly. And uh yeah, we should now be good to go. So now, no matter what happens, we will always generate uh the right thing, which is nice. At least that's the idea anyway. And that is how you do a debug. That seemed like a pretty material issue. Obviously, we had to implement like different logic in order to handle it. And yeah, still pretty cool. Let's see what it looked like. Change is indeed much darker and much funkier. Okay, we are funk maxing. So given the funk maxing, let us now try. I'm going to be angry. I'm going to say try again. I fix it is now calling edit revise image. And we did not error out immediately. Meaning the editing is actually occurring as we speak. The logic was correct. I can close all this stuff. We can go back to the main route. What a beautiful, cool, simple, and easy example uh of an AI agent that actually adds value. Super cool. You know, just 3 or 4 months ago, these agents had nowhere near as much accuracy or reliability. I'm happy to say that the hype bubble that I saw explode over the course of the last little bit is now finally gotten a little bit more reasonable. And these agents are actually a little more uh yeah, they're a little more valuable. Just the fact that it can automatically convert like a Google Drive file URL to a download link is pretty sweet. So awesome guys, that is that we are now done with that second last chunk. Building a way to revise them just to close loop. Now all we need to do is make it pretty and package it. What do I mean by make it a pretty and package it? Well, it's cool that it's like kind of in NAN, right? But who actually cares about that? Definitely nobody that you'll be selling this to. Definitely nobody that maybe you'll install this in the business of. What we need to do is we need to take this out of NAND now and we need to embed it on a website or give people a link. We also need to change the style and make it really pretty. I mean we are selling a design thing at the end of the day, right? So what are some ways to do that? Simplest most straightforward way is in the AI agent side you guys can actually like generate a link. What I'm going to do is when it says when chat message received click publicly available. We'll do hosted chat for now. And now if you guys just go inactive to active, you save this, paste this in, you actually now have a link. And that link allows you to communicate with this agent. So it's saying that his name is Nathan Nat, right? But uh it's obviously not. The cool thing is we can customize this to be whatever we want. So maybe I'll just say, "Hi, it's your graphic design agent. How can I help? I can generate a logo, style guide or background gradient for you. Let me know how I can help. Okay, so let me just test this. Uh, not test. Sorry. Let's just exit this out. We can clear the logs and the execution history. I think I need to save first, then refresh. Cool. And now we can actually go back and then we can change the font and the style and all that stuff. So how do we do that? Uh title. So title is hi there up here. So why don't we call this leftclick design agent. Maybe we'll do a little wave. Subtitle. What's subtitle? Subtitle is over here. So maybe we'll go I'm your friendly neighborhood design agent. Is that how you spell neighborhood? I think it's yelling at me because I'm Canadian. Yes, it is. I'm your friendly neighborhood design agent. And I need to save this. Cool. Then underneath, we can now go custom chat styling. Now, this is going to seem pretty intimidating to a lot of you guys. You guys, what the hell's going on here? Custom chat, chat color, primary chat color, whatever. Base layout, right? Uh, you can actually just add whatever the heck you want here. So, you know, window dimensions, you change the height of the embed, the input area color, and you can override any class that you want with like the chat message functionality. So, if I save this now and I go back here and I refresh, you'll see that this is now different. Why? Because it added some sort of like Times New Roman style to it. I don't really like the Times New Roman style. So, uh, let's just not do Times New Roman. No, thank you. Why don't we do Robboto first? I like Robboto. We'll do Robboto. That seems pretty nice. If I save this and refresh this now, I'm still getting that weird thing, I think. Why is that? Maybe because I don't have access to robboto. Let's open up this puppy. Apple system UI. Uh, what's Seigo UI? Sans serif is at the end. I think sans serif should be at the beginning probably. I probably just don't have most of the fonts that I'd want to be honest. Why don't I just remove this? Yeah. Okay, cool. Nice. Um, that's all right. I just double changed it, which is why it asked me. Why don't we change the uh palette a little bit? So, I don't like this blue. Um, let's go over here. If you guys like don't know what element is responsible for this, just go over here, go styles, and then find that blue. See where it says background chat-header-background. You guys can actually change this. So I always go to like Tailwind colors and then I just generate like a nice background gradient. And um I'm a big fan of these colors here. They're kind of like greenish tealish whatever. Um let's do 800. So that's this. So I'm going to go back over here to the code and then where it said what was it again? chat header pad or chat header. Go over here to where it says chat header color and it's just going to take from this variable. I don't really want that. I'm actually just going to hardode it. Um, sorry, I keep on clicking test chat, but that's not what we want to click. And I know I'm alt tabbing back and forth quite a bit, but okay. So, that actually changed the font. That's not what I wanted to do at all. Not in the slightest. Um, I believe we can't actually Yeah, that kind of sucks. We can't actually um reverse this easily. So that blows. We can just go FF FFF. That should be fine. FF is just white. Cool. Nice. That looks a little bit more left clicky. Uh maybe we'll go even darker than that to be honest. Maybe we'll go down here. You know, I'll go back here. Nice. That's much darker and much cleaner. Uh, we can also change the background color. It looks like the background color is this weird kind of like light thing. I don't really like it. So, I think it's probably h chat input background probably. So, I'm just going to change this all to white. Like I don't think this is white. Is this white? Might be white. If it's white, I'm cooked, man. Can hardly see colors anymore. No, this is white. This is not white. Obviously, they change the colors of this for a reason. Anyway, I guess the point that I'm making is you can actually go through and you can change basically every aspect of this. Um, you can also embed this on a website, which is kind of neat. So, as opposed to me having just this URL that I chat with, um, I can also embed it. But, uh, yeah, you guys can go arbitrarily deep on this if you want. You know, just take this, feed it into chat GBT, then ask it to design you like a color palette or something. And then, you know, we can actually do this side by side with let's do 03 Pro, which is like the most advanced model. So, I'm going to feed this in. I'll say this is a custom chat style for an NAND chatbot. I've attached an image of the NADN chatbot visuals as well. adjust the color palette and design so it's minimalistic, sleek, and uses a pastel blue color instead of the teal. Now, I'm going to go over here. Going to I guess hide this somewhere or it doesn't see it. It does see it. That's unfortunate. I think it'll be smart enough to know that that's actually part of its input. Paste that in there. And now we are going to click go. What's going to do now is send this off to 03 Pro. Okay. And the end result is uh we got this cool kind of sleek white design. I just called a design agent and said message anytime. You can just get rid of the stuff if you want. Obviously you can actually customize the hell out of this. Like I just changed a few of the colors around, but you can package this and make it as sexy as you want. Uh you can assign your own URL to it. A lot of different ways you can implement this in your own organization if you wanted to as well. Anyway, let's just have it actually go and do something that we want. So, hey, let's see what it says. How can I assist you with your design needs today? Would you like a logo, a style guide, or a gradient background? Let me know what you're looking for. Big fan of the I don't know, light pastel blue vibe. Thinking of creating a new brand around it. Cool color featuring light pastel blue as the main color. Sure, let's do it. Yeah, let's make a light blue pastel logo, but I want it to be flat and minimalistic, sort of like Google's, but with variations of that light blue color. In terms of what the company is is, it's called Whirlpool Automation. I don't want any text in there. Help me brainstorm something. A prompt first. Let's do that. So, it's going to help me come up with a prompt now. Flat minimalistic logo using only variations of light pastel blue. Abstract geometric whirlpool or swirling shapes. Nice. I like that. Cool. Now, it's actually going out and generating the design. So, that's pretty nice. Cool. Looks like we got something. Let's take a peek. Nice. This looks pretty interesting. I like that it's geometric. I'm not a big fan of this exactly to be honest. So, why don't I say, "Yes, I like this, but could you add sections to the whirlpool? I want them to be varying hues of that light blue. " So, now we're going to test out the revision feature. Essentially, what should be occurring is we're going to have it distinct sections or segments. Yes, that's right. Okay, we're now um clarifying because if you guys remember, I asked it to clarify the hell out of any revision or design request so that it was as simple and as straightforward and as exact as possible. Now, we're sending off the revision track. So, it's going through and it's actually revising the design for us. And then we now have that finished. So, let me take a peek at it. I like this. If you notice, these are now slightly different colors, which is kind of cool. Um I like the fact that this one here is a noticeably darker shade of blue. And to be honest, this almost looks like the Open AAI logo. Anyway, that's kind of cool. Um, yeah, looks great. Upscale the hell out of this, please. So, now it's going to send that over to replicate and then it's going to deliver a higher quality one. Okay, now I'm going to check out the upscaled version. If we zoom in, you'll see there are these slight little artifacts um around it. The reason why we have these artifacts is uh this is just been trained on millions of images that human beings find sharper. And what's really interesting is they found that when you have a slight little outline like this, human beings rate the images sharper, aka higher resolution, aka better quality. And so, you know, I'll be honest, this does seem significantly better quality to me. You guys may not be able to tell just through the uh the camera, but yeah, this is like sharp as hell. It's super clean. The lines are very exact. So, I like it a lot. All right. Anyway, so this isn't really enough for me. Let's go a little bit further and let's ask for a whole style guide. Great work. I'd like a style guide for a brand. Um, in the same fashion, let's have it now take my request and let's convert it into some sort of prompt. Now, what it's done is it's basically under the hood converted my request to a prompt. And now it's sent that out. And now it is now generating me a style guide. Similar, if you guys remember, to the template that I sent it over. So, in terms of what to expect, it's not just whipping stuff out of its ass. Like, it knows what I want essentially. Okay, so we've now generated a style guide. If I take a look at it, you can see that we Oh, look. I like what I did with the O rollpool automation. Here's the logo. Here's that. Here's the typography. Robboto color palette. Oo, I love the color gradient icons. Now, now we're not feeding in the logo that we just generated automatically into the style guide. So, um, ideally, we'd probably do the style guide first and we'd look at the style guides logo and then I don't know, maybe make some minor adjustments or something like that. We could obviously have built in the functionality to like, hey, when you're making the style guide, if anybody asked for any other image, then add that image to the style guide. But it's still pretty clean. I found it really interesting how it like picked uh inter and robboto here and then it even provided us some icons and stuff like that uh which is neat. Okay, awesome. Now let's do a light gradient background. So now it's going to generate me said light gradient background. Okay, and now we have a beautiful white uh/blue gradient as well. Just going to download that. And if we just head over here, I just want to show you guys what these assets look like on a brand board because I don't think they're you can really fully appreciate them without it. Um, these are really high quality assets. Like this is no joke. This is really good stuff. I mean, you know, I used to I mean, it looks like the colors here are just a tiny bit different. We could have asked to revise it so that the hues were just a bit off. Um, but still, uh, these are really high quality assets. These are things that you otherwise would have had to pay people for realistically just a few months ago. And the fact that we can generate them all autonomously using AI, you know, is one of the craziest things ever. So, let me just download this one as well. Arrange this right over here. I mean, like the fact that we just got all of these for nothing and we have a system that can now generate these things on demand basically for people, scale it up. So maybe instead of just doing the gradient background, the logo, the style guide or whatever, now you're doing some sort of like advertising stuff that's specific to the template or format that you like or characters for some video game or whatever. Um, the value in a system like this is that you basically get to do whatever the heck you want. And you know, I've hopefully shown you guys how to build the start of a system like this, but there's no reason why you just have to stick to these three or these four tools. You guys could realistically expand this to be however complicated you want. Okay? the core parts of the logic obviously uh we started at the end so we just verified that we could do what we wanted to do before we actually spent all the time effort and energy building logic to do it as we debugged as issues came up you know we took a deep breath we sort of confronted them step by step we took advantage of a couple of simple straightforward APIs we took advantage of some built-in NN functionality like import curl and so on and so forth and yeah the end result is ultimately a pretty high quality system so whether you want to install something like this in your own business or whether you want to sell a package service like this to other people. The world is your oyster and you can do whatever the heck you want with it. Really appreciate you guys watching

all the way to the end of the video. You guys know who you are. Y'all are the real ones. If you guys like this sort of stuff, definitely check out Maker School. It's my day-by-day accountability roadmap where I show people not just how to build automations like this, but how to get up and running selling them to real people. The guarantee portion of the program is 90 days. What I mean by that is if you join the program and you do not land your first customer within 90 days, I literally send you all of your money back. That's how confident I am that you could do this sort of thing. It's been followed by well over 4,000 people to date and uh yeah, it works. So, if you guys like this sort of thing, definitely check that out. Otherwise, if you guys just do me a big solid like, subscribe, do all that fun YouTube stuff that bumps me up to the top of the algo. And I'll catch you on the next video. Thanks so