AI UI Design Image Generator using Replicate - n8n Workflow

Designers & Prototypers: Quickly generate UI concepts based on textual prompts.
Automation Specialists: Users needing sophisticated n8n templates for asynchronous API integrations.
Developers: Those looking to integrate AI image generation seamlessly into other systems via a robust n8n workflow.
n8n Users: Individuals exploring how to build custom polling logic within an n8n node network.

Generating complex AI images often involves asynchronous processes, meaning the initial request doesn't immediately return the final result. This specific n8n workflow is designed to master this challenge. It utilizes the Replicate API and the justingirard/draft-ui-designer model to create high-quality UI design concepts. The core value of this n8n template lies in its robust polling mechanism: it initiates the generation job, pauses using an n8n node, and then repeatedly checks the status until completion. This ensures your n8n workflow accurately captures the final image URL, making it a reliable solution for production environments where immediate results are not guaranteed. The initial n8n trigger makes testing simple.

This n8n workflow executes a series of steps to manage the asynchronous image generation process:

1. Trigger and Setup: The process begins with the manual 'On clicking 'execute'' n8n trigger. A subsequent Set n8n node securely defines the replicateapikey for authentication.


2. Start Prediction: The first HTTP Request n8n node sends a POST request to Replicate to initialize the image generation job, passing the required prompt and model parameters (e.g., width, height). This request returns an initial prediction ID.


3. Extract ID: An Extract Prediction ID Code n8n node parses the response to retrieve the unique predictionId and constructs the necessary polling URL. This prepares the n8n workflow for monitoring.


4. Polling Loop Initiation: The n8n workflow enters a loop starting with the Wait n8n node, pausing execution for 2 seconds to prevent overwhelming the API with requests.


5. Check Status: The Check Prediction Status HTTP Request n8n node polls the prediction URL using the previously extracted ID to retrieve the current job status.


6. Conditional Check: The Check If Complete If n8n node determines if the status equals 'succeeded'. If the status is still processing, the n8n workflow follows the 'False' path and loops back to the Wait n8n node to pause and poll again.


7. Final Output: If the status is 'succeeded', the n8n workflow follows the 'True' path to the Process Result Code n8n node, which cleans and extracts the final generated image_url and other key metadata, completing the execution of this complex n8n template.

To deploy and use this n8n workflow:

1. Import: Copy the provided n8n workflow JSON data and paste it directly into your n8n instance via the 'New' menu -> 'Import from JSON'.


2. API Key Setup: In the 'Set API Key' n8n node, replace YOURREPLICATEAPI_KEY with your actual Replicate API key. Ensure the value is correctly passed as a Bearer token in the 'Create Prediction' and 'Check Prediction Status' n8n nodes.


3. Prompt Configuration: In the 'Create Prediction' HTTP Request n8n node, modify the JSON body's prompt value to describe the UI design you wish to generate.


4. Execution: Save the n8n workflow. Use the 'Execute Workflow' button (or the manual n8n trigger) to run the automation.

This n8n workflow relies on several core nodes to manage asynchronous AI generation:

On clicking 'execute' (Manual Trigger): The starting n8n trigger for the automation, allowing for simple manual testing.
Set API Key (Set n8n node): Used to inject the Replicate API key as a variable, which is then dynamically accessed by the subsequent HTTP Request n8n nodes for secure authorization.
Create Prediction (HTTP Request n8n node): The crucial step that initiates the job on Replicate. It uses specific authorization headers derived from the Set n8n node output.
Extract Prediction ID (Code n8n node): Essential for dynamic workflow control. This n8n node processes the initial API response to extract the unique identifier required for polling.
Wait (Wait n8n node): Implements a short 2-second delay, which is vital for managing API rate limits and giving the AI model time to start processing before the n8n workflow checks the status.
Check If Complete (If n8n node): The flow control mechanism that powers the polling loop. It redirects the n8n workflow based on whether the job status is 'succeeded'.

• Process Result (Code n8n node): The final transformation n8n node, responsible for extracting the clean image_url and presenting the final results of the generation.