Dynamic HTML Page Generation from User Prompts using AI - n8n Workflow

• n8n developers and specialists experimenting with complex AI structure enforcement and function calling.


• Web developers needing real-time UI prototypes generated from simple text prompts.


• Users looking for advanced n8n templates to deploy custom AI web services.


• Anyone seeking an example of a full-stack AI application built entirely within an n8n workflow.

This advanced n8n workflow provides a robust demonstration of leveraging OpenAI's Structured Output feature to generate predictable, clean, and styled web components. The primary challenge this n8n template solves is turning a simple natural language request into actionable, structured data (a JSON object defining the UI structure), and then transforming that data into a final HTML file that is immediately rendered to the user.

The process relies on a two-stage AI pipeline. First, the user request hits the n8n trigger, and the request is sent to GPT-4o with a restrictive JSON schema, ensuring the output defines UI elements (like divs, spans, buttons) compatible with the Tailwind framework. Second, a subsequent n8n node takes this raw structural data and converts it into the final HTML code, including CSS references. This sophisticated setup showcases the power of building complex, multi-step AI logic within a single n8n workflow.

This n8n workflow executes a series of transformations starting with a user request and ending with a rendered webpage:

1. Incoming Request (The n8n trigger): The process begins with the Webhook n8n trigger, which activates when a user sends an HTTP request, typically containing a query parameter (e.g., ?query=a%20signup%20form).


2. Structured JSON Generation: The input is immediately passed to the Open AI - Using Structured Output n8n node (configured as an HTTP Request). This node sends the prompt to the OpenAI API, enforcing a strict JSON schema. This schema forces the AI to define the webpage structure as a nested JSON object describing HTML components, attributes, and children.


3. JSON to HTML Conversion: The resulting structured JSON is then fed into the OpenAI - JSON to HTML n8n node. A secondary prompt instructs this AI model (GPT-4o-mini) to convert the complex JSON structure into raw, valid HTML code and extract a title, guaranteeing the output is usable in the next step.


4. Final HTML Formatting: The Format the HTML result n8n node acts as a templating engine. It takes the generated HTML body and title and wraps them in the necessary structure, crucial meta tags, and the Tailwind CSS CDN script, preparing the final document.


5. Serving the Page: Finally, the Respond to Webhook n8n node sends the complete, templated HTML back to the initiating user, setting the Content-Type header to text/html so the browser renders the output as a webpage. This completes the loop initiated by the n8n trigger.

To deploy this n8n workflow, follow these steps:

1. Import the JSON: Copy the provided n8n workflow JSON data and import it directly into your n8n instance.


2. Configure Credentials: This n8n workflow requires an OpenAI API Key. Ensure your credentials named 'OpenAi account - Baptiste' (or similar, if renamed) are set up correctly in your n8n credentials list and linked to the required n8n nodes.


3. Activate the n8n trigger: Activate the workflow. Once active, the Webhook n8n trigger will provide a production URL.


4. Testing: To test, access the production URL and append your query using the query parameter. Example: https://your.n8n.url/webhook/d962c916-6369-431a-9d80-af6e6a50fdf5?query=a%20simple%20contact%20form.

This robust n8n template is now ready to dynamically generate web content.

Here are the key n8n nodes utilized in this sophisticated n8n workflow:

Webhook (n8n trigger):
Function: Starts the n8n workflow upon receiving an HTTP request.
Key Configuration: Set to respond using a response node, allowing the final output to be custom HTML. It expects user input via a query parameter.
Open AI - Using Structured Output (HTTP Request n8n node):
Function: Calls the OpenAI API to generate a structured JSON object representing the UI components.
Key Configuration: Uses the POST method to the completions endpoint. Includes a mandatory response_format JSON schema definition to enforce strict UI element output (div, button, attributes, etc.), leveraging the advanced capabilities for this n8n workflow.
OpenAI - JSON to HTML (OpenAI n8n node):
Function: Converts the complex JSON structure generated in the previous step into ready-to-use HTML code and a page title.
Key Configuration: Uses gpt-4o-mini and is configured to output JSON containing html and title keys, ensuring predictable output for the next n8n node.
Format the HTML result (HTML n8n node):
Function: Wraps the generated HTML content and title into a fully compliant HTML page structure, including the necessary Tailwind CSS CDN link.
Key Configuration: Uses interpolation ({{ $json.message.content.html }}) to embed the AI-generated elements within the static document structure.
Respond to Webhook (n8n node):
Function: Delivers the final, rendered HTML page back to the user who initiated the n8n trigger.
* Key Configuration: Sets the response header Content-Type to text/html; charset=UTF-8 and uses the output from the HTML n8n node as the response body.