Overview This n8n workflow provides a user-friendly web interface to generate structured prompts for Large Language Models (LLMs) using Google Gemini.
Users can describe their desired prompt, specify which sections (e.g., System Instructions, Examples, Inputs) they want included, and the workflow will leverage AI to create a well-formatted prompt.
The generated prompt is then displayed on a dedicated webpage, ready to be copied.
Workflow Architecture The workflow implements a two-phase web application: Input Phase : User fills out a form describing their prompt requirements Output Phase : AI generates and displays a structured prompt with copy functionality Node Components 1.
Prompt Request (Form Trigger) Purpose : Serves as the public-facing entry point for the workflow.
It presents a customizable web form to collect user requirements for the AI prompt.
Configuration : Form Title: "AI Prompt Maker" Form Description: "Let AI create your perfect prompt.." Form Fields: "What prompt do you want ?": A required textarea for the user to describe the prompt's goal, context, input format, and examples. "Select Sections": A multi-select dropdown allowing users to choose whether to include "System Instructions", "Examples", and "Inputs" sections in the generated prompt.
Webhook Path: /prompt-maker Custom CSS: Includes extensive CSS to style the form for a modern and coherent appearance with the webpage.
Logic : Upon form submission, it captures the user's input and passes it to the next node for prompt generation.
2.
Generate Prompt (LLM Chain) Purpose : This node acts as the orchestrator for the prompt generation.
It constructs a meta-prompt based on user selections and sends it to the connected LLM.
Configuration : Text: Uses the user's input from the "What prompt do you want ?" field.
Messages: Contains a system message that instructs the LLM (Gemini) to act as an expert prompt generator.
This message dynamically includes placeholders for , , and based on the user's "Select Sections" choices.
The core structure includes , , and .
Logic : It dynamically builds the prompt for the LLM, ensuring the generated output adheres to a specific, structured format (e.g., using XML-like tags for sections).
3.
Gemini 2.5 Flash (Google Gemini Chat) Purpose : This is the Large Language Model (LLM) that performs the actual prompt generation.
Configuration : Model Name: models/gemini-2.5-flash (a fast and cost-effective model, but smart enough to build prompts).
Temperature: 0 (ensures deterministic and consistent output, ideal for structured generation).
Logic : Receives the meta-prompt from "Generate Prompt" and returns the newly created, structured AI prompt.
4.
Go to Site (Form) Purpose : After the prompt is generated, this node redirects the user's browser to a new URL where the generated prompt will be displayed.
Configuration : Respond With: redirect Redirect URL: Dynamically constructed using n8n environment variables ( WEBHOOK_URL , N8N_ENDPOINT_WEBHOOK ) and the URL-encoded generated prompt ( $json.text.urlEncode() ).
This URL points to the "Get Prompt Webpage" webhook.
Logic : Ensures a seamless transition from the form submission to the prompt display page.
5.
Get Prompt Webpage (Webhook) Purpose : This webhook serves as the target for the redirect from "Go to Site".
It receives the generated prompt as a URL query parameter.
Configuration : Path: /prompt/result Response Mode: Using Respond to Webhook Node (delegates the response generation to the next node).
Logic : Listens for incoming requests to the /prompt/result path and extracts the prompt query parameter.
6.
Display Webpage (Respond to Webhook) Purpose : Renders a custom HTML page to beautifully display the generated prompt and provide a "copy to clipboard" functionality.
Configuration : Respond With: text Response Body: Contains a complete HTML document with embedded CSS for styling and JavaScript for handling the prompt display and copy functionality.
Content-Type Header: text/html; charset=UTF-8 Logic : The HTML page is designed with a dark theme and a code block ( ) to present the prompt.
A JavaScript snippet safely embeds the received prompt (from $json.query.prompt ) into a variable using JSON.stringify() to handle special characters.
Another JavaScript snippet then populates the block with the prompt using textContent (to display it literally, including angle brackets) and implements the copy-to-clipboard feature.
Required Credentials Google Palm API : This workflow requires an n8n credential for the Google Palm API (which supports Gemini models) to connect to the Google Gemini service.
Setup & Configuration 1.
Import the Workflow Copy the provided workflow JSON.
In your n8n instance, go to "Workflows" and click "New".
Click the "Import from JSON" button and paste the JSON.
2.
Configure Google Palm API Credential Ensure you have an active Google Gemini API credential configured in n8n.
If not, open the "Gemini 2.5 Flash" node, click "New Credential", and follow the instructions to set it up (you'll need an API key from Google AI Studio).
3.
Environment Variables (Optional but Recommended) This workflow uses WEBHOOK_URL and N8N_ENDPOINT_WEBHOOK environment variables for constructing the redirect URL.
They will be in red, but this is normal.
WEBHOOK_URL : This is usually automatically set by n8n to your instance's base URL.
N8N_ENDPOINT_WEBHOOK : If your n8n instance is behind a reverse proxy or has a custom webhook path (e.g., https://yourdomain.com/custom-path ), you might need to set this environment variable in your n8n configuration.
By default, n8n's webhook path is webhook .
4.
Activate the Workflow After importing and configuring credentials, activate the workflow by toggling the "Active" switch in the top right corner of the workflow editor (To make the webhook accessible).
Usage Instructions 1.
Access the Prompt Maker Form Once the workflow is active, navigate to the "Prompt Request" node.
Copy the "Public URL" displayed in the node's settings (e.g., https://YOUR_N8N_URL/form/prompt-maker ).
Open this URL in your web browser.
2.
Fill Out the Form Enter a detailed description of the prompt you want to create in the "What prompt do you want ?" textarea.
Select the desired sections (System Instructions, Examples, Inputs) using the "Select Sections" options.
3.
Generate and View Prompt Click the "Create Prompt" button.
The workflow will execute, generate the prompt, and redirect your browser to a new page displaying the generated prompt.
4.
Copy the Prompt On the prompt display page, click the "Copy" button to copy the entire generated prompt to your clipboard.
Technical Features Security & Reliability Uses JSON.stringify() to safely handle special characters Implements textContent instead of innerHTML to prevent XSS URL encoding for safe parameter passing User Experience Consistent dark theme across both pages Visual feedback for copy operations (icon changes, color transitions) Responsive design with professional styling Seamless flow from form submission to result display Development Features Comprehensive documentation via sticky notes Pin data for testing (includes sample "Hello, World!" prompt) Modular architecture enabling easy modifications Environment variable usage for flexible deployment Troubleshooting Form Not Loading (404 Error) Ensure the workflow is active.
Verify the "Public URL" for the "Prompt Request" node is correct and accessible.
Check your n8n instance's N8N_ENDPOINT_WEBHOOK environment variable if you are using a custom webhook path or reverse proxy.
Prompt Generation Fails (LLM Error) Check the n8n execution logs for the "Generate Prompt" and "Gemini 2.5 Flash" nodes.
Verify your Google Palm API credential is valid and has sufficient permissions.
Ensure your Google Gemini API key is correctly configured and not expired.
Check for API rate limits on the Google Gemini side.
Redirect Not Working / Blank Page Confirm the workflow is active.
Verify that the WEBHOOK_URL and N8N_ENDPOINT_WEBHOOK environment variables are correctly set in your n8n instance.
The redirect URL must be valid and point back to your n8n instance.
Check the execution logs for the "Go to Site" and "Get Prompt Webpage" nodes for any errors.
Prompt Not Displaying Correctly on Page While unlikely due to the JSON.stringify and textContent usage, very unusual characters in the generated prompt might cause rendering issues.
Ensure your browser's JavaScript is enabled.
Workflow Flow Diagram User Form → AI Generation → Redirect → Display Page ↓ ↓ ↓ ↓ Form Trigger → LLM Chain → Form Response → Webhook → HTML Response Key Innovations Dynamic Prompt Structure : Conditionally builds prompts based on user selections Seamless UX : No page reloads, just smooth redirects Professional Presentation : Code block styling with syntax highlighting preparation Copy Functionality : One-click clipboard access with visual feedback Modular Design : Each phase is cleanly separated and documented This workflow demonstrates advanced n8n capabilities, combining form handling, AI integration, dynamic templating, and custom web interfaces into a cohesive application that's production-ready and serves as a foundation for prompt engineering automation.