Skip to main content

​
Overview

In this tutorial, we’ll walk you step by step through building an Agent with n8n and the MuleRun API that uses Nano-Banana to generate pixel-art style images. Difficulty: ★☆☆☆☆ (1 / 5) For n8n-related questions, check the official documentation. You can also ask in the n8n community. image-20250924142902872 We’ll build a workflow like the one above by combining n8n nodes. The workflow will:
  • Receive user input from MuleRun
  • Use an AI Agent to generate an image
  • Display the result in the user’s Session page

​
Step 1: Create a new n8n workflow

First, you’ll need a running n8n instance. You can either use n8n Cloud or install it locally. Check out this comparison to decide which option fits you best. Create a new workflow, and you’ll see an empty canvas like this: image-20250924144238762 A typical n8n workflow has three main parts:
  • Input nodes: receive user requests
  • Processing nodes: handle tasks (AI, data processing, etc.)
  • Output nodes: send results back to the Session page
You build workflows by dragging nodes onto the canvas and connecting them.

​
Step 2: Add an input node

Currently, MuleRun only supports starting a workflow with the n8n Form Trigger node. More details here. image-20250924144852506 Click the ”+” in the top-right corner and select On form submission to add an n8n Form Trigger node.
You can also search for “n8n Form” and select On new n8n Form Event.
image-20250924152142019 Here, we want to collect the user’s description of the image. Click Add Form Element, choose a Text field, and name it Image Description. Mark it as required.
The Field Name will appear in the Session form. You can also edit the Form Title and node name for a better display.

​
Step 3: Add an AI node

Now let’s add an AI Agent node to handle the LLM task. image-20250924153652908 Click the plus button after the input node, and from AI Nodes, select AI Agent.
We recommend only using the AI Agent node for LLM-related work.
image-20250924154248751 Before setting up the Agent, configure the AI model: image-20250924154408520 We’ll use the Gemini 2.5 Flash Image Preview model via an OpenAI-compatible API. So, set the provider to OpenAI.
MuleRouter’s LLM APIs (including Gemini) are all OpenAI-compatible. For the best compatibility, you should prioritize using the OpenAI format.
If you don’t yet have an API key, create one in the MuleRun Creator Studio. image-20250924155010239 In n8n, create an OpenAI-style credential:
  • API Key: your MuleRun API Key
  • Base URL: https://api.mulerun.com/v1
See this reference for API / Base URL details.
image-20250924155304922 Next, in the model node’s Credentials, select what you just created and set Model ID to gemini-2.5-flash-image-preview. You’ll find supported IDs in this list. image-20250924155634662 Back in the AI Agent node, click Execute previous nodes to fetch structured sample input. image-20250924155845854 After filling the form, you’ll see the input data on the left. Since we’re using a Form Input, set Source for Prompt to Define below, so we can map fields manually. Drag the Image Description (from Input) onto the Prompt field. image-20250924160300174 Now, add a System Prompt for the AI Agent: 
You are a pixel art master who will create pixel-style images based on the user’s requests.

After the generation is completed, you should provide a description of the image you generated.
The System Prompt defines the rules the AI follows. The User Prompt comes from the user’s input.
Click Execute step to test.

​
Step 4: Format Model Output

The model returns results, but we need to format them. We only want the generated description and image file. image-20250924161927410 Add two Edit Fields (Set) nodes: one for the image, one for the text. image-20250924162505853 Connect both from the AI Agent output. Rename them to avoid confusion.
Pro Tip: If you’re comfortable with JavaScript in n8n, you can handle both in one node.
image-20250924162722916 In the Image Output node:
  • Create a field named ImageBase64
  • Drag the image URL into it
Pro Tip: You can use JSON expressions like:
{{$json.output.find(o => o.type === 'image_url')?.image_url?.url}}
This avoids errors if output order changes.
image-20250924164413208 In the Text Output node:
  • Create a field named ModelTextOutput
  • Drag the text field into it
Pro Tip: Use JSON expressions like:
{{$json.output.find(o => o.type === 'text')?.text}}
image-20250924164806988 Next, add a Convert To File node after the Image Output. Choose Move Base64 string to file to turn the Base64 string into an image file. image-20250924165030704 Set the input field to ImageBase64 and output it as a file named Image. image-20250924165938988 Click Execute step and check the Output. Switch to Binary mode if you don’t see the image. image-20250924170044871\ image-20250924170035701 Finally, add a Merge node to combine the Image and ModelTextOutput.

​
Step 5: Output Result

To display results properly in the Session page, output them in a specific JSON format:
  • Images will render automatically
  • Text must go into a markdown_content field
See examples here. We’ll use another Edit Fields (Set) node for this. image-20250924172709099
Pro Tip: If you know JavaScript in n8n, you can directly pull from previous nodes.
Enable Include Other Input Fields and select fields to include. Add a field:
  • Name: markdown_content
  • Value: ModelTextOutput
The field name must be exactly markdown_content.

​
Step 6: Test Your Workflow

image-20250924173724568 Run Execute step to test. The final output should be a JSON object containing:
  • A markdown_content field
  • An image
If you want to find more mulerun-ready n8n workflows, check MuleRun n8n Examples

​
Step 7: Upload Your Agent to MuleRun

Click Download to export your workflow JSON. Open Creator Studio and create a new Agent. image-20250924174210215
  • Name your Agent
  • Upload the JSON file
  • Choose the correct n8n version
Then upload a cover image and description (see this guide). image-20250924175732334 Configure all credentials in the n8n nodes. Make sure they are Configured. image-20250924180013215 For LLM nodes, you can simply select MULERUN - LLM API, and credentials will auto-configure using your Creator Credits.
If you want to use models not supported by MuleRun, add additional credentials in n8n and configure separately.
image-20250924174516350 Once the Agent is created, test it before submitting for review. You can cancel out and return to Creator Studio.
Before submission, the Agent is Unpublished. You can still run it yourself.
image-20250924174841917 Click the Agent button to open the run page. image-20250924174948555 Click RUN to execute. Tags help distinguish versions. image-20250924175051504 In the Session page, enter a prompt, e.g. A Running Mule. image-20250924194406375 Wait a moment, and you’ll see the result: a description and an image. Click the image to enlarge.

​
Step 8: Submit Your Agent

When everything works, click Submit to send your Agent for review. image-20250924194632330
Editing an Agent under review will automatically reject the submitted version.
Agents under review are locked: you can’t delete them, but you can still run them yourself. After approval, your Agent will be published to the Marketplace for others to use.
⌘I