Dynamically generate HTML page from user request using OpenAI Structured Output
Configured with Html, HTTP Request, Open Ai, Respond To Webhook, and additional nodes. Review the connections and setup before adapting this template.
Node categories in this workflow
- Web / API
- AI & models
- Transform
- Trigger
Icons describe general node roles, inferred from node types. Inspect the parameters for the configured action.
Drag to pan; use + and − to zoom. Reconstructed from the exported node positions; nothing runs here. Dashed lines represent non-main connections. Full node names and notes appear below.
How it works
The exported workflow contains the following configured nodes. Their connections are shown above; inspect the JSON for the complete logic, expressions, and external actions.
| Node | Category | Type | Operation |
|---|---|---|---|
| Respond to Webhook | Web / API | Respond To Webhook | See node parameters |
| Open AI - Using Structured Output | Web / API | HTTP Request | POST |
| OpenAI - JSON to HTML | AI & models | Open Ai | See node parameters |
| Format the HTML result | Transform | Html | See node parameters |
| Webhook | Trigger | Webhook | See node parameters |
Setup
- Download the JSON and import it into an isolated n8n instance. Leave the workflow inactive.
- Connect your own credentials through n8n’s credential store. Replace
REPLACE_WITH_*values with your resource identifiers. - Inspect API destinations, Code nodes, database queries, file paths, and outbound actions.
- Run with synthetic data and harmless destinations. Enable triggers only after checking the actual outputs.
Requirements
An n8n instance with the listed node types and compatible versions. Service-connected workflows may require accounts, credentials, or paid APIs.
Credential types declared in the source
openAiApi
Workflow notes
Generate HTML from user query
Generate HTML from user query
HTTP Request node
- 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
- The response format is inspired by the Structured Output defined in OpenAI Introduction post
- The output is a JSON containing HTML components and attributed
OpenAI node
- Format the response from the previous node from JSON format to HTML format
Workflow: Dynamically generate an HTML page from a user request using OpenAI Structured Output
Workflow: Dynamically generate an HTML page from a user request using OpenAI Structured Output
Overview
- This workflow is a experiment to build HTML pages from a user input using the new Structured Output from OpenAI.
- 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).
- It uses Tailwind CSS to make it slightly nicer, but any
How it works
- Once active, go to the production URL and add what you'd like to build as the parameter "query"
- Example: https://production_url.com?query=a%20signup%20form
- OpenAI nodes will first output the UI as a JSON then convert it to HTML
- Finally, the response is integrated in a HTML container and rendered to the user
Further thoughts
- Results are not yet amazing, it is hard to see the direct value of such an experiment
- But it showcase the potential of the Structured Output. Being able to guarantee the output format is key to build robust AI applications.
Dynamically generate HTML page from user request using OpenAI Structured Output
Dynamically generate HTML page from user request using OpenAI Structured Output
Purpose and structure
This folder contains the Dynamically generate HTML page from user request using OpenAI Structured Output workflow. Its executable nodes use html, httpRequest, openAi, respondToWebhook, webhook. The table and connection map below are derived from the JSON, not an inferred guarantee of behavior.
Setup
Import inactive. Configure your own credentials and replace REPLACE_WITH_* values. Review external destinations and Code nodes before running.
Entry points
Webhook
Verification
Sanitized source candidate; not runtime-tested. This overview is generated from node metadata. Read the folder README for the connection map, credential types, and license.
Attribution
https://github.com/Zie619/n8n-workflows/blob/94007c1445d9258a7da116646b79473e7c7c3282/workflows/Webhook/1416_Webhook_Respondtowebhook_Create_Webhook.json MIT; preserve source notices.