Before you get started with MediaFlows, you\u2019ll need to sign in to the MediaFlows website through your Cloudinary account and create a new project<\/a>.<\/p>\n\n\n\n Once you\u2019re logged in, there are a few different ways to create a new flow<\/a>. You can:<\/p>\n\n\n\n However you end up building your MediaFlows, it will be useful to understand the building blocks so you can make adjustments as needed.<\/p>\n\n\n\n Templates are a great way to start a new MediaFlow, especially if it\u2019s similar to what you\u2019re trying to accomplish. Even if you can\u2019t find a MediaFlow that fits your use case exactly, it could still be a good place to start. Looking through the template library will give you a good idea of the types of workflows that you can create.<\/p>\n\n\n\n The template library has categories that are useful to find what you\u2019re looking for:<\/p>\n\n\n\n MediaFlows are composed of blocks. There are several different types of blocks to accomplish various things. Each block is typically a well-defined and self-contained unit of work.<\/p>\n\n\n\n In the UI, this idea is represented by blocks that are connected by some arrows. Each block takes input, does some work, and provides output. It\u2019s not exactly like a pipe where the input is just<\/em> the output from the previous block. Instead, the output of a block is made available as a state to any following blocks in the flow. We\u2019ll see what this looks like in the next section.<\/p>\n\n\n\n The most simple and common flows consist of a trigger and transformation.<\/p>\n\n\n\n Trigger<\/strong>: Upload Image \u2192 Transformation<\/strong>: Crop<\/p>\n\n\n\n The upload image block being the trigger will pass the data of the newly uploaded image to the crop block in this example. Most flows will build and add more layers on top of this basic idea.<\/p>\n\n\n\n Trigger<\/strong>: Upload Image \u2192 Transformation<\/strong>: Optimize Media \u2192 Integration<\/strong>: Shopify Upload Image<\/p>\n\n\n\n In the MediaFlows UI, it\u2019s pretty easy to imagine and visualize how various blocks fit together. This makes building flows feel natural and intuitive.<\/p>\n\n\n\n Each block has its own configuration. You can click a block in a flow and it will open a slide-out. The slide-out will typically contain information about the block and fields for configuration. Block configuration is a more involved part of creating a flow, and where the testing and prototyping will happen. The best way to get a handle on block configuration is by looking at blocks in templates that are already configured.<\/p>\n\n\n\n Let\u2019s look through the Upload to Shopify template to learn more about configurations.<\/p>\n\n\n\n The flow consists of four blocks: a trigger, two conditions, and an integration.<\/p>\n\n\n\n The example provided from this template is a great starting point to get a handle on how block composition and configuration work.<\/p>\n\n\n\n MediaFlow provides a lot of power for quickly prototyping and debugging flows. We\u2019ll look at how we can use FlowAI to give us a good starting point and use some of the debugging tools available to quickly get to a working flow that we can share or deploy.<\/p>\n\n\n\n This is a new feature that uses generative AI to create a flow based on a prompt. Let\u2019s get started with a new flow by prompting FlowAI with what we want.<\/p>\n\n\n\n To use FlowAI, click on the template link. There is a section at the bottom of the template view for providing your prompt.<\/p>\n\n\n\n Let\u2019s provide a prompt to get started:<\/p>\n\n\n\n When an image is uploaded to Cloudinary, analyze the image with OpenAI and send the result to Slack.<\/em><\/p>\n\n\n We get a flow with all the blocks we need already put together! I can\u2019t think of an easier way to get going.<\/p>\n\n\n\n We have our blocks but we do need to go through and make sure that they\u2019re all configured correctly. At the very least we\u2019ll need to make sure that we add our Webhook URL for Slack. After you have your blocks configured, you\u2019ll want to save your changes.<\/p>\n\n\n\n Since this is the first time we\u2019ll run our flow, click the cog icon first to make sure you have the run configured. The setup involves providing the media or whatever data is required for our initial trigger block. For this example flow, it\u2019ll be an upload. It comes prefilled with a URL to an image, but you might want to test with one of your own files instead.<\/p>\n\n\n Next, click Run<\/strong> to test out your flow! If you\u2019ve configured the example flow, you\u2019ll receive a Slack message with the analysis of the image that was uploaded. If you didn\u2019t, you\u2019ll need to do some debugging.<\/p>\n\n\n\n There are a few developer tool blocks dedicated to parsing and marshaling data, which can come in handy outside of debugging as well. It\u2019s hard to beat good ol\u2019 fashioned logging for debugging in a lot of situations though.<\/p>\n\n\n\n If we ran our example flow and didn\u2019t receive a notification, start debugging by connecting the OpenAI block to a Add To Log<\/strong> block to see if there\u2019s a response from the API.<\/p>\n\n\n\n
Templates<\/strong><\/h2>\n\n\n\n
\n
Blocks<\/strong><\/h2>\n\n\n\n
Block Types<\/strong><\/h3>\n\n\n\n
\n
Block Composition<\/strong><\/h3>\n\n\n\n
Configuring Blocks<\/strong><\/h3>\n\n\n\n
![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_493,c_scale\/f_auto,q_auto\/v1728673891\/Web_Assets\/blog\/blog_Prototyping-media-processing-workflows-with-MediaFlows_1\/blog_Prototyping-media-processing-workflows-with-MediaFlows_1.png?_i=AA\")
<\/figure>\n\n\n\n\n
[DAM App].result.assets<\/code> selected. This means that the following connected blocks will be executed for each item for this value.![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_500,h_413,c_scale\/f_auto,q_auto\/v1728673888\/Web_Assets\/blog\/blog_Prototyping-media-processing-workflows-with-MediaFlows_2\/blog_Prototyping-media-processing-workflows-with-MediaFlows_2.png?_i=AA\")
<\/li>\n\n\n\nPrototyping Flows<\/strong><\/h2>\n\n\n\n
FlowAI<\/h3>\n\n\n\n
![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_389,c_scale\/f_auto,q_auto\/v1728674283\/Web_Assets\/blog\/blog_Prototyping-media-processing-workflows-with-MediaFlows_3\/blog_Prototyping-media-processing-workflows-with-MediaFlows_3.png?_i=AA\")
<\/figure><\/div>\n\n\nCheck Block Configuration<\/strong><\/h3>\n\n\n\n
Testing Our Flow<\/strong><\/h3>\n\n\n\n
![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_905,h_1024,c_scale\/f_auto,q_auto\/v1728674277\/Web_Assets\/blog\/blog_Prototyping-media-processing-workflows-with-MediaFlows_4\/blog_Prototyping-media-processing-workflows-with-MediaFlows_4.png?_i=AA\")
<\/figure><\/div>\n\n\nDebugging Flows<\/strong><\/h3>\n\n\n\n
![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_472,c_scale\/f_auto,q_auto\/v1728674273\/Web_Assets\/blog\/blog_Prototyping-media-processing-workflows-with-MediaFlows_5\/blog_Prototyping-media-processing-workflows-with-MediaFlows_5.png?_i=AA\")
<\/figure><\/div>\n\n\n![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_752,h_276,c_scale\/f_auto,q_auto\/v1728674268\/Web_Assets\/blog\/blog_Prototyping-media-processing-workflows-with-MediaFlows_6\/blog_Prototyping-media-processing-workflows-with-MediaFlows_6.png?_i=AA\")
<\/figure><\/div>\n\n\n![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_757,h_1024,c_scale\/f_auto,q_auto\/v1728674261\/Web_Assets\/blog\/blog_Prototyping-media-processing-workflows-with-MediaFlows_7\/blog_Prototyping-media-processing-workflows-with-MediaFlows_7.png?_i=AA\")
<\/figure><\/div>\n\n\n