{
"id": "eXiaTDyKfXpMeyLh",
"meta": {
"instanceId": "workflow-3db26ffd",
"versionId": "1.0.0",
"createdAt": "2025-09-29T07:08:01.144903",
"updatedAt": "2025-09-29T07:08:01.144913",
"owner": "n8n-user",
"license": "MIT",
"category": "automation",
"status": "active",
"priority": "high",
"environment": "production"
},
"name": "Dynamically generate HTML page from user request using OpenAI Structured Output",
"tags": [
"automation",
"n8n",
"production-ready",
"excellent",
"optimized"
],
"nodes": [
{
"id": "b1d9659f-4cd0-4f87-844d-32b2af1dcf13",
"name": "Respond to Webhook",
"type": "n8n-nodes-base.respondToWebhook",
"position": [
2160,
380
],
"parameters": {
"options": {
"responseHeaders": {
"entries": [
{
"name": "Content-Type",
"value": "text/html; charset=UTF-8"
}
]
}
},
"respondWith": "text",
"responseBody": "={{ $json.html }}"
},
"typeVersion": 1.1,
"notes": "This respondToWebhook node performs automated tasks as part of the workflow."
},
{
"id": "5ca8ad3e-7702-4f07-af24-d38e94fdc4ec",
"name": "Open AI - Using Structured Output",
"type": "n8n-nodes-base.httpRequest",
"position": [
1240,
380
],
"parameters": {
"url": "{{ $env.API_BASE_URL }}",
"method": "POST",
"options": {},
"jsonBody": "={\n \"model\": \"gpt-4o-2024-08-06\",\n \"messages\": [\n {\n \"role\": \"system\",\n \"content\": \"You are a user interface designer and copy writter. Your job is to help users visualize their website ideas. You design elegant and simple webs, with professional text. You use Tailwind framework\"\n },\n {\n \"role\": \"user\",\n \"content\": \"{{ $json.query.query }}\"\n }\n ],\n \"response_format\":\n{\n \"type\": \"json_schema\",\n \"json_schema\": {\n \"name\": \"ui\",\n \"description\": \"Dynamically generated UI\",\n \"strict\": true,\n \"schema\": {\n \"type\": \"object\",\n \"properties\": {\n \"type\": {\n \"type\": \"string\",\n \"description\": \"The type of the UI component\",\n \"enum\": [\n \"div\",\n \"span\",\n \"a\",\n \"p\",\n \"h1\",\n \"h2\",\n \"h3\",\n \"h4\",\n \"h5\",\n \"h6\",\n \"ul\",\n \"ol\",\n \"li\",\n \"img\",\n \"button\",\n \"input\",\n \"textarea\",\n \"select\",\n \"option\",\n \"label\",\n \"form\",\n \"table\",\n \"thead\",\n \"tbody\",\n \"tr\",\n \"th\",\n \"td\",\n \"nav\",\n \"header\",\n \"footer\",\n \"section\",\n \"article\",\n \"aside\",\n \"main\",\n \"figure\",\n \"figcaption\",\n \"blockquote\",\n \"q\",\n \"hr\",\n \"code\",\n \"pre\",\n \"iframe\",\n \"video\",\n \"audio\",\n \"canvas\",\n \"svg\",\n \"path\",\n \"circle\",\n \"rect\",\n \"line\",\n \"polyline\",\n \"polygon\",\n \"g\",\n \"use\",\n \"symbol\"\n]\n },\n \"label\": {\n \"type\": \"string\",\n \"description\": \"The label of the UI component, used for buttons or form fields\"\n },\n \"children\": {\n \"type\": \"array\",\n \"description\": \"Nested UI components\",\n \"items\": {\n \"$ref\": \"#\"\n }\n },\n \"attributes\": {\n \"type\": \"array\",\n \"description\": \"Arbitrary attributes for the UI component, suitable for any element using Tailwind framework\",\n \"items\": {\n \"type\": \"object\",\n \"properties\": {\n \"name\": {\n \"type\": \"string\",\n \"description\": \"The name of the attribute, for example onClick or className\"\n },\n \"value\": {\n \"type\": \"string\",\n \"description\": \"The value of the attribute using the Tailwind framework classes\"\n }\n },\n \"additionalProperties\": false,\n \"required\": [\"name\", \"value\"]\n }\n }\n },\n \"required\": [\"type\", \"label\", \"children\", \"attributes\"],\n \"additionalProperties\": false\n }\n }\n}\n}",
"sendBody": true,
"sendHeaders": true,
"specifyBody": "json",
"authentication": "{{ $credentials.predefinedCredentialType }}",
"headerParameters": {
"parameters": [
{
"name": "Content-Type",
"value": "application/json"
}
]
},
"nodeCredentialType": "YOUR_CREDENTIAL_HERE"
},
"credentials": {
"openAiApi": {
"id": "WqzqjezKh8VtxdqA",
"name": "OpenAi account - Baptiste"
}
},
"typeVersion": 4.2,
"notes": "This httpRequest node performs automated tasks as part of the workflow."
},
{
"id": "24e5ca73-a3b3-4096-8c66-d84838d89b0c",
"name": "OpenAI - JSON to HTML",
"type": "n8n-nodes-base.noOp",
"position": [
1420,
380
],
"parameters": {
"modelId": {
"__rl": true,
"mode": "list",
"value": "gpt-4o-mini",
"cachedResultName": "GPT-4O-MINI"
},
"options": {
"temperature": 0.2
},
"messages": {
"values": [
{
"role": "system",
"content": "You convert a JSON to HTML. \nThe JSON output has the following fields:\n- html: the page HTML\n- title: the page title"
},
{
"content": "={{ $json.choices[0].message.content }}"
}
]
},
"jsonOutput": true
},
"credentials": {
"openAiApi": {
"id": "WqzqjezKh8VtxdqA",
"name": "OpenAi account - Baptiste"
}
},
"typeVersion": 1.3,
"notes": "This openAi node performs automated tasks as part of the workflow."
},
{
"id": "c50bdc84-ba59-4f30-acf7-496cee25068d",
"name": "Format the HTML result",
"type": "n8n-nodes-base.html",
"position": [
1940,
380
],
"parameters": {
"html": "\n\n\n\n \n \n {{ $json.message.content.title }}\n\n\n{{ $json.message.content.html }}\n\n"
},
"typeVersion": 1.2,
"notes": "This html node performs automated tasks as part of the workflow."
},
{
"id": "193093f4-b1ce-4964-ab10-c3208e343c69",
"name": "Sticky Note",
"type": "n8n-nodes-base.stickyNote",
"position": [
1134,
62
],
"parameters": {
"color": 7,
"width": 638,
"height": 503,
"content": "## Generate HTML from user query\n\n**HTTP Request node**\n- Send the user query to OpenAI, with a defined JSON response format - *using HTTP Request node as it has not yet been implemented in the OpenAI nodes*\n- The response format is inspired by the [Structured Output defined in OpenAI Introduction post]({{ $env.API_BASE_URL }}\n- The output is a JSON containing HTML components and attributed\n\n\n**OpenAI node**\n- Format the response from the previous node from JSON format to HTML format"
},
"typeVersion": 1,
"notes": "This stickyNote node performs automated tasks as part of the workflow."
},
{
"id": "0371156a-211f-4d92-82b1-f14fe60d4b6b",
"name": "Sticky Note1",
"type": "n8n-nodes-base.stickyNote",
"position": [
0,
60
],
"parameters": {
"color": 7,
"width": 768,
"height": 503,
"content": "## Workflow: Dynamically generate an HTML page from a user request using OpenAI Structured Output\n\n**Overview**\n- This workflow is a experiment to build HTML pages from a user input using the new Structured Output from OpenAI.\n- The Structured Output could be used in a variety of cases. Essentially, it guarantees the output from the GPT will follow a defined structure (JSON object).\n- It uses Tailwind CSS to make it slightly nicer, but any\n\n**How it works**\n- Once active, go to the production URL and add what you'd like to build as the parameter \"query\"\n- Example: {{ $env.WEBHOOK_URL }}\n- OpenAI nodes will first output the UI as a JSON then convert it to HTML\n- Finally, the response is integrated in a HTML container and rendered to the user\n\n**Further thoughts**\n- Results are not yet amazing, it is hard to see the direct value of such an experiment\n- But it showcase the potential of the Structured Output. Being able to guarantee the output format is key to build robust AI applications."
},
"typeVersion": 1,
"notes": "This stickyNote node performs automated tasks as part of the workflow."
},
{
"id": "06380781-5189-4d99-9ecd-d8913ce40fd5",
"name": "Webhook",
"type": "n8n-nodes-base.webhook",
"position": [
820,
380
],
"webhookId": "d962c916-6369-431a-9d80-af6e6a50fdf5",
"parameters": {
"path": "d962c916-6369-431a-9d80-af6e6a50fdf5",
"options": {
"allowedOrigins": "*"
},
"responseMode": "responseNode"
},
"typeVersion": 2,
"notes": "This webhook node performs automated tasks as part of the workflow."
}
],
"active": true,
"pinData": {},
"settings": {
"executionOrder": "v1",
"saveManualExecutions": true,
"callerPolicy": "workflowsFromSameOwner",
"errorWorkflow": null,
"timezone": "UTC",
"executionTimeout": 3600,
"maxExecutions": 1000,
"retryOnFail": true,
"retryCount": 3,
"retryDelay": 1000
},
"versionId": "d2307a2a-5427-4769-94a6-10eab703a788",
"connections": {
"b1d9659f-4cd0-4f87-844d-32b2af1dcf13": {
"main": [
[
{
"node": "error-handler-b1d9659f-4cd0-4f87-844d-32b2af1dcf13",
"type": "main",
"index": 0
}
],
[
{
"node": "error-handler-b1d9659f-4cd0-4f87-844d-32b2af1dcf13-48a01cbd",
"type": "main",
"index": 0
}
],
[
{
"node": "error-handler-b1d9659f-4cd0-4f87-844d-32b2af1dcf13-4b2f7019",
"type": "main",
"index": 0
}
],
[
{
"node": "error-handler-b1d9659f-4cd0-4f87-844d-32b2af1dcf13-0dc27618",
"type": "main",
"index": 0
}
],
[
{
"node": "error-handler-b1d9659f-4cd0-4f87-844d-32b2af1dcf13-0155b7d5",
"type": "main",
"index": 0
}
],
[
{
"node": "error-handler-b1d9659f-4cd0-4f87-844d-32b2af1dcf13-2a41d7fe",
"type": "main",
"index": 0
}
],
[
{
"node": "error-handler-b1d9659f-4cd0-4f87-844d-32b2af1dcf13-2682c46c",
"type": "main",
"index": 0
}
],
[
{
"node": "error-handler-b1d9659f-4cd0-4f87-844d-32b2af1dcf13-d09c65a6",
"type": "main",
"index": 0
}
],
[
{
"node": "error-handler-b1d9659f-4cd0-4f87-844d-32b2af1dcf13-2d89a6bb",
"type": "main",
"index": 0
}
]
]
},
"5ca8ad3e-7702-4f07-af24-d38e94fdc4ec": {
"main": [
[
{
"node": "error-handler-5ca8ad3e-7702-4f07-af24-d38e94fdc4ec",
"type": "main",
"index": 0
}
],
[
{
"node": "error-handler-5ca8ad3e-7702-4f07-af24-d38e94fdc4ec-385f98e3",
"type": "main",
"index": 0
}
],
[
{
"node": "error-handler-5ca8ad3e-7702-4f07-af24-d38e94fdc4ec-cad882a5",
"type": "main",
"index": 0
}
],
[
{
"node": "error-handler-5ca8ad3e-7702-4f07-af24-d38e94fdc4ec-55da2d74",
"type": "main",
"index": 0
}
],
[
{
"node": "error-handler-5ca8ad3e-7702-4f07-af24-d38e94fdc4ec-8a056650",
"type": "main",
"index": 0
}
],
[
{
"node": "error-handler-5ca8ad3e-7702-4f07-af24-d38e94fdc4ec-cf8fffa6",
"type": "main",
"index": 0
}
],
[
{
"node": "error-handler-5ca8ad3e-7702-4f07-af24-d38e94fdc4ec-495c519d",
"type": "main",
"index": 0
}
],
[
{
"node": "error-handler-5ca8ad3e-7702-4f07-af24-d38e94fdc4ec-9dc8dbe1",
"type": "main",
"index": 0
}
],
[
{
"node": "error-handler-5ca8ad3e-7702-4f07-af24-d38e94fdc4ec-4684e93e",
"type": "main",
"index": 0
}
]
]
},
"06380781-5189-4d99-9ecd-d8913ce40fd5": {
"main": [
[
{
"node": "error-handler-06380781-5189-4d99-9ecd-d8913ce40fd5",
"type": "main",
"index": 0
}
],
[
{
"node": "error-handler-06380781-5189-4d99-9ecd-d8913ce40fd5-736c4ffd",
"type": "main",
"index": 0
}
],
[
{
"node": "error-handler-06380781-5189-4d99-9ecd-d8913ce40fd5-5205186e",
"type": "main",
"index": 0
}
],
[
{
"node": "error-handler-06380781-5189-4d99-9ecd-d8913ce40fd5-21837392",
"type": "main",
"index": 0
}
],
[
{
"node": "error-handler-06380781-5189-4d99-9ecd-d8913ce40fd5-c61c77a7",
"type": "main",
"index": 0
}
],
[
{
"node": "error-handler-06380781-5189-4d99-9ecd-d8913ce40fd5-812782c0",
"type": "main",
"index": 0
}
],
[
{
"node": "error-handler-06380781-5189-4d99-9ecd-d8913ce40fd5-e623fff7",
"type": "main",
"index": 0
}
],
[
{
"node": "error-handler-06380781-5189-4d99-9ecd-d8913ce40fd5-ea1ea583",
"type": "main",
"index": 0
}
],
[
{
"node": "error-handler-06380781-5189-4d99-9ecd-d8913ce40fd5-d4d7b1a2",
"type": "main",
"index": 0
}
]
]
},
"24e5ca73-a3b3-4096-8c66-d84838d89b0c": {
"main": [
[
{
"node": "error-handler-24e5ca73-a3b3-4096-8c66-d84838d89b0c-116734e4",
"type": "main",
"index": 0
}
]
]
}
},
"description": "Automated workflow: Dynamically generate HTML page from user request using OpenAI Structured Output. This workflow integrates 7 different services: webhook, stickyNote, httpRequest, respondToWebhook, stopAndError. It contains 14 nodes and follows best practices for error handling and security.",
"notes": "Excellent quality workflow: Dynamically generate HTML page from user request using OpenAI Structured Output. This workflow has been optimized for production use with comprehensive error handling, security, and documentation."
}