Introduction to Dify Workflows
In this video, I'm going to be showing you how you can leverage Dify 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 Dify 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 Dify.
Getting Started with Dify
Before we get started with the workflows, you can make a free account on Dify.ai, 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. Dify is a really impressive platform. 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 Dify 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, 'cause they have some really good examples on how to get started with the various pieces here.
To show you 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. The other nice thing with Dify 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 FireCrawl. You're able to just plug in your FireCrawl API, so say if you want to create a chatbot on your website, you can get an API key from FireCrawl, you can recursively crawl your website. By the end of the video, you'll see how you can incorporate something like this within workflows as well.
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 FireCrawl integrations, there's Tavily, 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 DALL-E, Yahoo Finance, you can even integrate GitHub or Slack, YouTube, a ton within here.
Configuring Model Providers and API Keys
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 OpenAI, you can plug in your API key here, you can plug in your Gemini key, Groq, 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 Mistral, you can basically use any of the big LLM providers. And then say if you are going to be using something like FireCrawl, 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 graph which you can interact with. You can move it 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 scaffolded 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 Groq 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.
Workflow Stage 2: Data Extraction and Report Generation
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 nodes 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 call 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 Dify 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, 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 Groq again to generate our response here.
Workflow Stage 3: Dynamic HTML Generation
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 Groq models, it is really good at generating HTML. I have a little bit more of a verbose 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.
Workflow Stage 4: Storing and Deploying the Website
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 Redis database. In this case, I'm going to be using Upstash 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 Redis 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 Redis database. This will allow us for each unique query, that will be the representation of how we retrieve that information from Redis 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 Upstash Redis 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, is essentially a Vercel 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, it's going to do a lookup on our Redis database. And if there is a key that exists, we're going to reach 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 Redis database.
Integrating the Workflow via API
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.
Debugging and Visualizing Workflows
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 Apple's 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.
Implementing the API Call in Code
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 workflow. 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 Next.js route where it will take in and generate the website from the Redis database. And then I'll also link to the Answer Engine project if you want to look through that and see that particular Dify workflow on how I integrated it within that particular application.
Conclusion and Final Thoughts
But that's pretty much it for this video. Thank you for Dify 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.
