Prompt Viewer

{"meta":{"instanceId":"e409ea34548a2afe2dffba31130cd1cf2e98ebe2afaeed2a63caf2a0582d1da0","templateCredsSetupCompleted":true},"nodes":[{"id":"430f2ed6-ccbe-4ccd-844b-c7458d0e87b0","name":"Gemini 2.5 Flash","type":"@n8n/n8n-nodes-langchain.lmChatGoogleGemini","position":[-580,480],"parameters":{"options":{"temperature":0},"modelName":"models/gemini-2.5-flash"},"credentials":{"googlePalmApi":{"id":"AXawYbABK5aZbGBE","name":"IA2S"}},"typeVersion":1},{"id":"fc337c72-6ce9-43fa-96b2-1581b54983ca","name":"Prompt Request","type":"n8n-nodes-base.formTrigger","position":[-1180,40],"webhookId":"bef818b2-581a-44ad-bd07-a8b26cfb5b8c","parameters":{"options":{"path":"prompt-maker","customCss":"/* --- ROOT VARIABLES (DARK THEME) --- */\n:root {\n\t/* --- FONT MAPPING --- */\n\t--font-family: 'Inter', sans-serif;\n\t--font-weight-normal: 400;\n\t--font-weight-bold: 600;\n\t--font-size-body: 12px;\n\t--font-size-label: 14px;\n\t--font-size-test-notice: 12px;\n\t--font-size-input: 14px;\n\t--font-size-header: 20px;\n\t--font-size-paragraph: 14px;\n\t--font-size-link: 12px;\n\t--font-size-error: 12px;\n\t--font-size-html-h1: 28px;\n\t--font-size-html-h2: 20px;\n\t--font-size-html-h3: 16px;\n\t--font-size-html-h4: 14px;\n\t--font-size-html-h5: 12px;\n\t--font-size-html-h6: 10px;\n\t--font-size-subheader: 14px;\n\n\t/* --- COLOR MAPPING (Dark Theme) --- */\n\t--color-background: #1a1b26;\n\t--color-card-bg: #24283b;\n\t--color-input-bg: #1e202e;\n\t--color-card-border: #414868;\n\t--color-header: #ffffff;\n\t--color-label: #c0caf5;\n\t--color-input-text: #c0caf5;\n\t--color-header-subtext: #c0caf5;\n\t--color-html-text: #c0caf5;\n\t--color-input-border: #414868;\n\t--color-focus-border: #7aa2f7;\n\t--color-link: #9eceff;\n\t--color-html-link: #7aa2f7;\n\t--color-submit-btn-bg: #7aa2f7;\n\t--color-submit-btn-hover-bg: #9eceff;\n\t--color-submit-btn-text: #ffffff; /* CORRECTED: Changed back to white for better readability */\n\t--color-clear-button-bg: #414868;\n\t--color-error: #f7768e;\n\t--color-required: #f7768e;\n\t--color-test-notice-text: #c0caf5;\n\t--color-test-notice-bg: #2a2f41;\n\t--color-test-notice-border: #7aa2f7;\n\n\t/* --- BORDER RADII & SPACING --- */\n\t--border-radius-card: 12px;\n\t--border-radius-input: 6px;\n\t--border-radius-clear-btn: 50%;\n\t--card-border-radius: 12px;\n\t--padding-container-top: 24px;\n\t--padding-card: 24px;\n\t--padding-test-notice-vertical: 12px;\n\t--padding-test-notice-horizontal: 24px;\n\t--margin-bottom-card: 16px;\n\t--padding-form-input: 12px;\n\t--card-padding: 24px;\n\t--card-margin-bottom: 16px;\n\n\t/* --- DIMENSIONS --- */\n\t--container-width: 500px;\n\t--submit-btn-height: 48px;\n\t--checkbox-size: 18px;\n\n\t/* --- OTHER MAPPINGS --- */\n\t--box-shadow-card: 0 10px 30px rgba(0, 0, 0, 0.3);\n\t--color-card-shadow: rgba(0, 0, 0, 0.3);\n\t--opacity-placeholder: 0.5;\n}\n\n/* === GLOBAL & ELEMENT-SPECIFIC FIXES === */\n\n/* 1. Add the dot grid background to the page */\nbody {\n background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 0);\n background-size: 20px 20px;\n}\n\n/* 2. Explicitly style the TEXTAREA */\n/* Targets the specific class n8n uses */\ntextarea.form-input {\n background-color: var(--color-input-bg);\n color: var(--color-input-text);\n font-family: var(--font-family); /* Force font inheritance */\n}\ntextarea.form-input::placeholder {\n color: var(--color-input-text);\n opacity: var(--opacity-placeholder);\n}\n\n/* 3. Explicitly style the BUTTON */\nbutton.submit-btn {\n transition: background-color 0.2s ease;\n font-family: var(--font-family); /* Force font inheritance */\n font-weight: var(--font-weight-bold);\n color: var(--color-submit-btn-text); /* Ensure text color is applied */\n}\nbutton.submit-btn:hover {\n background-color: var(--color-submit-btn-hover-bg);\n}\n\n/* 4. Completely new CHECKBOX styling for n8n's structure */\n/* Target the label that wraps the checkbox and text */\nlabel.multiselect-label {\n display: flex;\n align-items: center;\n cursor: pointer;\n position: relative;\n}\n/* Target the text part of the label */\nlabel.multiselect-label span {\n padding-left: 12px; /* Space between box and text */\n}\n/* Hide the default browser checkbox */\nlabel.multiselect-label input[type=\"checkbox\"] {\n appearance: none;\n -webkit-appearance: none;\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n}\n/* Create a custom checkbox box using a pseudo-element on the text span */\nlabel.multiselect-label span::before {\n content: '';\n position: absolute;\n left: 0;\n top: 50%;\n transform: translateY(-50%);\n width: var(--checkbox-size);\n height: var(--checkbox-size);\n background-color: var(--color-input-bg);\n border: 1px solid var(--color-input-border);\n border-radius: 4px;\n transition: all 0.2s ease;\n}\n/* Style the custom box when the (hidden) checkbox is checked */\nlabel.multiselect-label input[type=\"checkbox\"]:checked + span::before {\n background-color: var(--color-focus-border);\n border-color: var(--color-focus-border);\n /* Add a checkmark using an embedded SVG */\n background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e\");\n background-position: center;\n background-repeat: no-repeat;\n}\n/* Add a focus ring for accessibility */\nlabel.multiselect-label input[type=\"checkbox\"]:focus-visible + span::before {\n outline: 2px solid var(--color-focus-border);\n outline-offset: 2px;\n}","buttonLabel":"Create Prompt","appendAttribution":false},"formTitle":"AI Prompt Maker","formFields":{"values":[{"fieldType":"textarea","fieldLabel":"What prompt do you want ?","placeholder":"Talk about the goal of the prompt, any related context and any input format (e.g. input variables). You can also provide output examples.","requiredField":true},{"fieldType":"dropdown","fieldLabel":"Select Sections","multiselect":true,"fieldOptions":{"values":[{"option":"System Instructions"},{"option":"Examples"},{"option":"Inputs"}]}}]},"responseMode":"lastNode","formDescription":"Let AI create your perfect prompt.."},"typeVersion":2.2},{"id":"f036c843-4723-47e8-8eb0-3b5ec639e0c6","name":"Generate Prompt","type":"@n8n/n8n-nodes-langchain.chainLlm","position":[-680,40],"parameters":{"text":"={{ $json['What prompt do you want ?'] }}","batching":{},"messages":{"messageValues":[{"message":"=You are an expert prompt generator for AI language models. This is what you output :\n{{ $json['Select Sections'].includes('System Instructions') ? \"\\n\\nThe role that the AI should take (for the system prompt)\\n\\n\" : \"\" }}\n\n\nThe goal or task at hand\n\n\n\nAll the context for the task or goal\n\n{{ $json['Select Sections'].includes('Examples') ? \"\\n\\n\\n\\n<...>\\n...\\n\\n\\n\\n...\\n\\n\\n...\\n\\n\" : \"\" }}\n\n\n...\n\n{{ $json['Select Sections'].includes('Inputs') ? \n\"\\n\\n\\n<[input_tag]>\\n[USE FILLER TEXT TO EXPLAIN WHAT TO PUT HERE]\\n\\n...\\n\" : \"\" }}"}]},"promptType":"define"},"typeVersion":1.7},{"id":"3292f7f6-cd6a-47d8-a58a-e57d2bf61871","name":"Go to Site","type":"n8n-nodes-base.form","position":[-20,40],"webhookId":"65b26fc2-22c6-424f-85c9-f91502a02d72","parameters":{"operation":"completion","redirectUrl":"={{ $env.WEBHOOK_URL + ($env.N8N_ENDPOINT_WEBHOOK ?? \"webhook\") }}/prompt/result?prompt={{ $json.text.urlEncode() }}","respondWith":"redirect"},"typeVersion":1},{"id":"f0949115-9ea1-4507-963f-b75c9d5bfb7e","name":"Get Prompt Webpage","type":"n8n-nodes-base.webhook","position":[-1180,1040],"webhookId":"99651075-3d83-4d67-963f-06c7a5e6a3d3","parameters":{"path":"prompt/result","options":{},"responseMode":"responseNode"},"typeVersion":2},{"id":"294a6d6c-2312-4c3e-91b0-e1e03ab1fea0","name":"Display Webpage","type":"n8n-nodes-base.respondToWebhook","position":[-620,1040],"parameters":{"options":{"responseHeaders":{"entries":[{"name":"Content-Type","value":"text/html; charset=UTF-8"}]}},"respondWith":"text","responseBody":"=\n\n\n \n \n Prompt Viewer\n \n \n \n \n \n\n \n\n\n\n

\n \n\n

\n \n\n \n

\n \n \n

\n\n \n \n\n \n\n\n"},"typeVersion":1.1},{"id":"29733433-2142-4177-9f5f-9a05de1c5436","name":"Sticky Note","type":"n8n-nodes-base.stickyNote","position":[-2180,-440],"parameters":{"color":6,"width":760,"content":"## Workflow Overview\nThis 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."},"typeVersion":1},{"id":"bbbb0e8a-ccc4-469e-bb54-e7f1d298071f","name":"Sticky Note1","type":"n8n-nodes-base.stickyNote","position":[-1380,-440],"parameters":{"color":7,"width":500,"height":640,"content":"### 1. Prompt Request (Form Trigger)\n* **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.\n* **Configuration:**\n * **Form Title:** \"AI Prompt Maker\"\n * **Form Description:** \"Let AI create your perfect prompt..\"\n * **Form Fields:**\n * \"What prompt do you want ?\": A required textarea for the user to describe the prompt's goal, context, input format, and examples.\n * \"Select Sections\": A multi-select dropdown allowing users to choose whether to include \"System Instructions\", \"Examples\", and \"Inputs\" sections in the generated prompt.\n * **Webhook Path:** `/prompt-maker`\n * **Custom CSS:** Includes extensive CSS to style the form for a modern and cherent appearance with the webage.\n* **Logic:** Upon form submission, it captures the user's input and passes it to the next node for prompt generation."},"typeVersion":1},{"id":"aa874d0f-3551-48f3-9926-ae556d2c2c73","name":"Sticky Note2","type":"n8n-nodes-base.stickyNote","position":[-860,-300],"parameters":{"color":7,"width":620,"height":500,"content":"### 2. Generate Prompt (LLM Chain)\n* **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.\n* **Configuration:**\n * **Text:** Uses the user's input from the \"What prompt do you want ?\" field.\n * **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 .\n* **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)."},"typeVersion":1},{"id":"d153908d-ac4c-4af1-ba29-ac468142aece","name":"Sticky Note3","type":"n8n-nodes-base.stickyNote","position":[-740,220],"parameters":{"color":7,"width":400,"height":380,"content":"### 3. Gemini 2.5 Flash (Google Gemini Chat)\n* **Purpose:** This is the Large Language Model (LLM) that performs the actual prompt generation.\n* **Configuration:**\n * **Model Name:** `models/gemini-2.5-flash` (a fast and cost-effective model, but smart enough to build prompts).\n * **Temperature:** `0` (ensures deterministic and consistent output, ideal for structured generation).\n* **Logic:** Receives the meta-prompt from \"Generate Prompt\" and returns the newly created, structured AI prompt."},"typeVersion":1},{"id":"88ca6809-5621-48c8-ba70-171508137a1c","name":"Sticky Note4","type":"n8n-nodes-base.stickyNote","position":[-220,-300],"parameters":{"color":7,"width":480,"height":500,"content":"### 4. Go to Site (Form)\n* **Purpose:** After the prompt is generated, this node redirects the user's browser to a new URL where the generated prompt will be displayed.\n* **Configuration:**\n * **Respond With:** `redirect`\n * **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.\n* **Logic:** Ensures a seamless transition from the form submission to the prompt display page.\n"},"typeVersion":1},{"id":"0fddd040-5e20-4bb0-be61-ac4cf8772548","name":"Sticky Note5","type":"n8n-nodes-base.stickyNote","position":[-1380,640],"parameters":{"color":7,"width":520,"height":560,"content":"### 5. Get Prompt Webpage (Webhook)\n* **Purpose:** This webhook serves as the target for the redirect from \"Go to Site\". It receives the generated prompt as a URL query parameter.\n* **Configuration:**\n * **Path:** `/prompt/result`\n * **Response Mode:** `Using Respond to Webhook Node` (delegates the response generation to the next node).\n* **Logic:** Listens for incoming requests to the `/prompt/result` path and extracts the `prompt` query parameter."},"typeVersion":1},{"id":"19ce7d51-ad08-491e-bb1a-4ad7d4348130","name":"Sticky Note6","type":"n8n-nodes-base.stickyNote","position":[-840,640],"parameters":{"color":7,"width":600,"height":560,"content":"### 6. Display Webpage (Respond to Webhook)\n* **Purpose:** Renders a custom HTML page to beautifully display the generated prompt and provide a \"copy to clipboard\" functionality.\n* **Configuration:**\n * **Respond With:** `text`\n * **Response Body:** Contains a complete HTML document with embedded CSS for styling and JavaScript for handling the prompt display and copy functionality.\n * **Content-Type Header:** `text/html; charset=UTF-8`\n* **Logic:**\n * The HTML page is designed with a dark theme and a code block (

) to present the prompt.\n    *   A JavaScript snippet safely embeds the received prompt (from `$json.query.prompt`) into a variable using `JSON.stringify()` to handle special characters.\n    *   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."},"typeVersion":1},{"id":"f21a289d-1665-4888-9a4c-9c59d390375c","name":"Sticky Note7","type":"n8n-nodes-base.stickyNote","position":[-2180,-260],"parameters":{"color":5,"width":760,"height":680,"content":"## Required Credentials\n*   **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. The example credential name is \"IA2S\".\n\n## Setup & Configuration\n\n1.  **Import the Workflow:**\n    *   Copy the provided workflow JSON.\n    *   In your n8n instance, go to \"Workflows\" and click \"New\".\n    *   Click the \"Import from JSON\" button and paste the JSON.\n\n2.  **Configure Google Palm API Credential:**\n    *   Ensure you have an active Google Gemini API credential configured in n8n.\n    *   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).\n\n3.  **Environment Variables (Optional but Recommended):**\n    *   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.\n    *   `WEBHOOK_URL`: This is usually automatically set by n8n to your instance's base URL.\n    *   `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`.\n\n4.  **Activate the Workflow:**\n    *   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)."},"typeVersion":1},{"id":"dc720dcd-784e-4368-9b11-f2115deaf215","name":"Sticky Note8","type":"n8n-nodes-base.stickyNote","position":[-2180,440],"parameters":{"color":4,"width":760,"height":500,"content":"## Usage\n\n1.  **Access the Prompt Maker Form:**\n    *   Once the workflow is active, navigate to the \"Prompt Request\" node.\n    *   Copy the \"Public URL\" displayed in the node's settings (e.g., `https://YOUR_N8N_URL/form/prompt-maker`).\n    *   Open this URL in your web browser.\n\n2.  **Fill Out the Form:**\n    *   Enter a detailed description of the prompt you want to create in the \"What prompt do you want ?\" textarea.\n    *   Select the desired sections (System Instructions, Examples, Inputs) using the \"Select Sections\" options.\n\n3.  **Generate and View Prompt:**\n    *   Click the \"Create Prompt\" button.\n    *   The workflow will execute, generate the prompt, and redirect your browser to a new page displaying the generated prompt.\n\n4.  **Copy the Prompt:**\n    *   On the prompt display page, click the \"Copy\" button to copy the entire generated prompt to your clipboard."},"typeVersion":1},{"id":"7cd9e2ea-5e68-4b1d-a5b1-da17bb1063d8","name":"Sticky Note9","type":"n8n-nodes-base.stickyNote","position":[-2180,960],"parameters":{"color":3,"width":760,"height":520,"content":"## Troubleshooting\n\n*   **Form Not Loading (404 Error):**\n    *   Ensure the workflow is active.\n    *   Verify the \"Public URL\" for the \"Prompt Request\" node is correct and accessible.\n    *   Check your n8n instance's `N8N_ENDPOINT_WEBHOOK` environment variable if you are using a custom webhook path or reverse proxy.\n*   **Prompt Generation Fails (LLM Error):**\n    *   Check the n8n execution logs for the \"Generate Prompt\" and \"Gemini 2.5 Flash\" nodes.\n    *   Verify your Google Palm API credential is valid and has sufficient permissions.\n    *   Ensure your Google Gemini API key is correctly configured and not expired.\n    *   Check for API rate limits on the Google Gemini side.\n*   **Redirect Not Working / Blank Page:**\n    *   Confirm the workflow is active.\n    *   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.\n    *   Check the execution logs for the \"Go to Site\" and \"Get Prompt Webpage\" nodes for any errors.\n*   **Prompt Not Displaying Correctly on Page:**\n    *   While unlikely due to the `JSON.stringify` and `textContent` usage, very unusual characters in the generated prompt might cause rendering issues.\n    *   Ensure your browser's JavaScript is enabled."},"typeVersion":1}],"pinData":{"Generate Prompt":[{"text":"\n\nSay \"Hello, World!\".\n\n\n\nThis is a basic test to ensure the model is functioning and can produce a simple output.\n\n\n\nHello, World!\n\n"}]},"connections":{"Prompt Request":{"main":[[{"node":"Generate Prompt","type":"main","index":0}]]},"Generate Prompt":{"main":[[{"node":"Go to Site","type":"main","index":0}]]},"Gemini 2.5 Flash":{"ai_languageModel":[[{"node":"Generate Prompt","type":"ai_languageModel","index":0}]]},"Get Prompt Webpage":{"main":[[{"node":"Display Webpage","type":"main","index":0}]]}}}

Command Palette

Ai Prompt Maker

Workflows