Build No-Code AI Applications with Dify Drag-and-Drop Workflows

--- type: transcript date: 2024-06-28 youtube_id: Y5BuJjViloE --- # Transcript: Build No-Code AI Applications with Dify Drag-and-Drop Workflows in this video I'm going to be showing you how you can leverage defi to build out llm applications I'm going to be highlighting their new workflow feature as well as how you can leverage these workflows within your application in this example I'm going to be showing you how you can set up where it takes in text and then it will ultimately output a deployed website for you as the final step here here's just an example of a website that I had generated basically all from the defi workflow that I had established I'm going to walk through the workflow that I created and then I'm going to be showing you how you can set up your own workflow and create your own custom bespoke AI application if you already have an existing application I'm going to show you a really easy way on how you can incorporate new features by building out these workflows in Define we get started with the workflows you can make a free account on def. and there is also a GitHub repository that you can spin up and deploy this on your own infrastructure if you're interested in doing that as well Defy is a really impressive platform form it's an open source project you can follow the steps within their GitHub repository if you're interested in doing that or alternatively you can get started for free by going over to the link which I'll put within the description of the video before I show you the example within the video I just want to give you a really quick overview on defy itself so you can head on over to the link that I'll pin within the video or I'll put it within the description as well I'd encourage you if you're new to the platform try out some of these examples CU they have some really good examples on how to get started with the various pieces here to show you a a little bit about it if you want to make a new chatbot or workflow all that you have to do is you can create from blank at present you can have up to 10 different apps for free on their platform other nice thing with Defy is you can upload your knowledge sources here so you can upload them from files but you can also sync them with websites with something like fir crawl you're able to just plug in your fir crawl API so say if you want to create a chatbot on your website you can get an API key from fir crawl you can recursively crawl your website by the end of the video you'll see how can incorporate something like this within workflows and Soles there's also a ton of different tools that are built into this so you have a bunch of search providers you have things like YouTube you have chart generators you're able to access a ton of different things so there's slack Integrations there's the fir craw Integrations there's tavali there's weather queries that you can incorporate all of these things can be really useful when you're building up these workflows by combining these llms with these workflows and then these knowledge bases you can start to create these cognitive agentic architectures which allow you to create these really interesting applications these are just some of the tools that you can access there's different search providers you can access W Yahoo finance you can even integrate GitHub or slack YouTube a ton within here and then when you sign up I encourage you off the bat set up your model providers say if you're going to be using open AI you can plug in your API key here you can plug in your Gemini key Gro what have you there's a ton of different options here you can even use local models if you'd like so you can use a llama you can use mistol you can basically use any of the big llm providers and then say if you are going to be using something like fir crawl you can just go ahead and plug in your API key here so you don't have to do that every time that you want to leverage that tool now to get started with the example that I built out here the way that this works is you have this graft which you can interact with you can move around and then you can start to go through the different flows and the way that you can think about this is these are different functions within your application if we just zoom into the starting node what the starting node is this is going to be where you pass in inputs say if you have a photo input or say if you have a text query input that's going to be what you wrote within this starting node here so in this case we have a query which is going to be our user's message Additionally you could also tie in a file say at any point within this graph if there's something that takes in an image you could pass that in at that point the first thing that we're going to do is we're going to set up a question classifier what the question classifier allows you to do is you can route that initial query to a number of different paths in this example I've scaffold out where it creates websites based on financial information but let's say I have another route that I want to take and if there's a website that I want to make about let's just say something completely different like knitting information or something like that so what this node will do is it will determine which path the query will take in this case say if it's related to stock or financial information it's going to go through the workflow that I created but you could also do something similar if it's knitting information or maybe if it's something completely different you can have it output there as well you can really scaffold this out to have a number of different classes and this is a good step on how to determine the initial workflow and you can also tie these in at any different point you can select pretty much any model that you have set up here I like using Gro because it is particularly fast for your queries in this case I'm deploying websites based on financial information but let's say you want to take a workflow where if it detects knitting information it's going to go on a completely different workflow you could just start to set up different nodes from the different classes that you have here now in this example since it is finance related what we're going to be doing is I'm going to be asking for one of the first notes here to respond back with only the ticker of the company name say if I say generate a report on Microsoft what I'm expecting this llm inference called to do is to return it only with the ticker name I've specified my system message here to only return the stock ticker name within the response of the message then from there what we're going to do is we're going to be leveraging this analytics endpoint as well as the ticker endpoint from Yahoo finance which are built-in tools within defy that you can leverage and then what we're going to be doing here is we're going to be passing in the ticker for both the analytics endpoint and then the ticker endpoint and then what we're going to be doing in the next step is we're going to be passing all of that data that we've received and then what we're going to be doing is once we've retrieved all of that financial information what we're going to be doing is we're going to be asking for a detailed financial report in 20 paragraphs minimum the reason that I specify 20 paragraphs minimum is when I initially set this up is sometimes it would respond back with sometimes pretty short answers I just wanted it to be as verbose as possible in this case we're going to be leveraging grock again to generate our response here within here we're passing in our system message but the other nice thing is say if you want to leverage any variables at any point within the workflow from the previous step you can go ahead and click this variable button and then you can pick which variable that you want to use from the previous steps here so you have that Global context from all of the different nodes and their output that you can include in the subsequent messages here in this case I'm passing in the context of everything that we get back from analytics and ticker and in this case it's going to be these larger Json payloads which is how it's going to generate all of this detailed financial information like you saw within the table here once we've generated all of those paragraphs and we want to create our HTML we're going to be leveraging Gemini 1.5 Pro which I found while it isn't as fast as something like the grock models it is really good at generating HTML I have a little bit more of a fose system message here and then we're passing in the response from the previous step of the llm what that's doing is it's taking in all of the text response from the previous step and then it's creating this website dynamically on the fly so that final output of the HTML is going to be generated at the step here from that point what we're going to be doing is we're going to be leveraging a little bit of JavaScript here and in this case we're just going to be in that HTML we'll be able to store within a reddis database in this case I'm going to be using up Rus in one of the subsequent steps that you'll see here essentially what this will do is if there's any strings and any special characters and all of that that will allow us to send a clean post request which will ultimately be decoding on the front end once we actually read and generate that information from the redus database to create our website so from there we're just going to have a really simple function to generate a random key here and what the random key is going to be used for is for the key within the key value storage for the reddest database this will allow us for each unique query that will be the representation of how we retrieve that information from reddis to ultimately generate and decode that HTML then from here what we're going to be doing is we're going to be leveraging the HTTP request and then all this is doing here is we're going to be passing in our authorization key and then we're going to be posting this to our up stash r database and in this case what we're going to be storing like I mentioned is the generated random key that we have generated as well as the encoded HTML within our database layer and then what we're going to be outputting there is the link to our web app and all that our web app is essentially a versell free endpoint that we're going to be deploying this to and then what we're going to be doing is once we pass in that random key is it's going to do a lookup on our reddest database and if there is a key that exists we're going to reach for for that key if there is a value associated with the key we're going to decode that HTML that we had previously stored and then we're just going to return that file as HTML to the user and that's going to be how these pages are generated here so all of the HTML in this case is stored within our redus database now the other nice thing once you've set up these workflows is you can actually access them from an API here you can generate an API key for each of the workflows that you've created and then what you can do is you can Leverage this API which streams back all of the different responses here I'm going to show you the previous example on how I leverage this within the answer engine project that I have here I have these new at mention features that I have here and let's just say I have an agent and I want to deploy a website here and I'll say I want to generate a website on Apple's financials what this is doing on the back end here is it's going to be making a request to their API and then the different statuses are going to be streamed out within my interface once it's done it's going to render within my application completely dynamically so it's fetching all of that information for me it's ultimately going to generate this website I have the view live website here where I can see what was generated the other nice thing with this is you can also test this and debug and preview it all within your application here if I say generate me a website on apples financials you will see as it goes through the different nodes here it will show you visually the different steps that it's going through you can see it goes through the question classifier it grabs all of that it grabs all that financial data it starts to route through the different llms and the benefit of being able to see this is you can start to see the different outputs of your application in this case if there are issues in the different nodes that you're setting up you can easily just see the workflow process and the inputs and outputs for all of the different steps it also gives you a really good visual representation of what might be slow or fast in this case it worked through all of the workflow that I set up and then again here we can see that we have this dynamically generated website to walk you through quickly on how to set this up within your own application so once you've declared your workflow what you can do here is you can pass in the API key and the API key is going to be specific to that workpl in this case we're going to be passing in our input that we have from our previous step here our query in this case is the value that we had declared that our initial starting node started with and then what we're going to be doing is we're going to be making that post request to this endpoint and then the nice thing with this endpoint is you can also specify that you do want the response to be streaming you can set the response mode to streaming and then what you can do with this is you can start to listen for all of the different payloads that are being sent and streamed back to your application so in this case I'm just going to be sending across my Json event for the loading State and then once it's done I'm going to be sending that answer key that I had declared with the website that I'm going to be rendering within my application but you can set this up where you can really log out all of the different steps within your application and there really is that nice flexibility where you have complete control over the different notes that you can set up here so say you want to set up this same workflow that I set up in this example I'll link a couple GitHub repositories on how I set this up I'll show you that simple nextjs route where it will take in and generate the website from the Rus database and then I'll also link to the answer engine project if you want to look through that and see that particular defi workflow on how I integrated it within that particular application but that's pretty much it for this video thank you for defi for sponsoring this video and allowing me to take the time to show you the really impressive platform here and I'm also curious to see what all of you build with this as well so if you have any ideas on how you could potentially leverage this within your application let me know in the comments below but otherwise if you found this video useful please like comment share and subscribe otherwise until the next one