Dynamically Generate HTML Pages from User Requests with OpenAI
Overview
This workflow lets you submit a natural language description of a web page (e.g., "a signup form" or "a landing page for a coffee shop") via a webhook URL and instantly receive a fully rendered HTML page. It leverages OpenAI's Structured Output feature to guarantee that the AI response follows a strict JSON schema, which is then converted into HTML with Tailwind CSS styling. This is ideal for rapid prototyping, generating UI components on the fly, or exploring the capabilities of structured AI outputs.
How It Works
The workflow is triggered by an incoming HTTP request (webhook). The user's query is passed to OpenAI, which returns a JSON object describing the UI structure (elements, attributes, children). A second OpenAI call converts that JSON into raw HTML. Finally, the HTML is wrapped in a complete document with Tailwind CSS and returned to the caller.
Nodes in the Workflow
-
Webhook (type:
n8n-nodes-base.webhook) — No auth. Listens for incoming HTTP GET/POST requests. Configured with a unique path andresponseModeset to "responseNode" so the workflow can respond later. The user passes their query as a URL parameter namedquery(e.g.,?query=a%20signup%20form). -
Open AI - Using Structured Output (type:
n8n-nodes-base.httpRequest) — API Key auth (predefined credential typeopenAiApi). Sends a POST request tohttps://api.openai.com/v1/chat/completionswith:- Model:
gpt-4o-2024-08-06 - System message: instructs the AI to act as a UI designer and copywriter using Tailwind.
- User message: the query from the webhook (
{{ $json.query.query }}). response_format: a JSON schema that defines allowed HTML elements (div, button, etc.), labels, children, and attributes. This forces the AI to output a structured JSON object.
- Model:
-
OpenAI - JSON to HTML (type:
@n8n/n8n-nodes-langchain.openAi) — API Key auth (uses the same OpenAI credential). Takes the JSON output from the previous node ($json.choices[0].message.content) and converts it to HTML. It uses modelgpt-4o-miniwith a low temperature (0.2) and a system prompt that asks for JSON output with fieldshtmlandtitle. -
Format the HTML result (type:
n8n-nodes-base.html) — No auth. Takes the HTML and title from the previous node and wraps them in a full HTML document. It includes the Tailwind CSS CDN script so that any Tailwind classes in the generated HTML are rendered correctly. -
Respond to Webhook (type:
n8n-nodes-base.respondToWebhook) — No auth. Sends the final HTML back to the caller withContent-Type: text/html; charset=UTF-8. The response body is the HTML string from the previous node.
Setup Instructions
- OpenAI API Key: You need an OpenAI account and an API key. Create a credential in n8n of type "OpenAI" and paste your key.
- Activate the Workflow: Toggle the workflow to "Active".
- Get the Webhook URL: Copy the production URL of the Webhook node (e.g.,
https://your-n8n-instance.com/webhook/...). - Test: Open a browser and visit the webhook URL with a
queryparameter. For example:https://...?query=a%20simple%20landing%20page%20with%20a%20hero%20image. The page will load with the generated HTML.
Use Cases & Variations
- Rapid UI Prototyping: Quickly generate HTML for forms, landing pages, or dashboards based on a text description.
- Dynamic Content Generation: Integrate this workflow into a larger system where users can request custom UI components.
- Educational Tool: Demonstrate how structured outputs from AI can be used to generate code.
- Variations: You can modify the JSON schema to restrict or expand allowed HTML elements, change the system prompt to use a different CSS framework (e.g., Bootstrap), or add authentication to the webhook for private use.
Workflow JSON
{
"id": "eXiaTDyKfXpMeyLh",
"meta": {
"instanceId": "f4f5d195bb2162a0972f737368404b18be694648d365d6c6771d7b4909d28167",
"templateCredsSetupCompleted": true
},
"name": "Dynamically generate HTML page from user request using OpenAI Structured Output",
"tags": [],
"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
},
{
"id": "5ca8ad3e-7702-4f07-af24-d38e94fdc4ec",
"name": "Open AI - Using Structured Output",
"type": "n8n-nodes-base.httpRequest",
"position": [
1240,
380
],
"parameters": {
"url": "https://api.openai.com/v1/chat/completions",
"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": "predefinedCredentialType",
// ... truncated (copy to see full JSON)How to Import This Workflow
- 1Copy the workflow JSON above using the Copy Workflow JSON button.
- 2Open your n8n instance and go to Workflows.
- 3Click Import from JSON and paste the copied workflow.
Don't have an n8n instance? Start your free trial at n8nautomation.cloud
Related Templates
Automated Blog Post Creation from News with AI and Blogger
This workflow automates the entire process of creating a fully SEO-optimized blog post from a news article. It fetches a trending technology news headline from Mediastack, generates relevant images from Pexels, uses two AI agents (via OpenRouter) to produce a title, slug, meta description, and a complete WordPress-compatible HTML blog post, then posts it directly to Blogger and sends you a Telegram notification. It's perfect for content marketers, bloggers, or anyone who wants to consistently publish fresh, data-driven content without manual effort. Node Breakdown Schedule Trigger (No auth) — Runs the workflow at a set interval (configured every minute by default, but you should change it to daily or hourly). Mediastack News (API Key auth via query parameter) — Fetches the latest technology news article in English from the Mediastack API. Parameters: set to . Genarate image (API Key auth via header, ) — Searches Pexels for up to 2 images related to the news title. Parameters: = , = 2. Send a text message1 (Telegram bot token auth) — Sends a Telegram message with the generated image URLs to the chat ID stored in . AI Agent (Uses OpenRouter Chat Model — API Key auth) — This agent takes the news title and returns a JSON object with three fields: , , and (meta description). The prompt includes strict guidelines for SEO-friendly output. OpenRouter Chat Model (API Key auth) — The language model for the first AI agent, using . Parsing (No auth) — A Code node that cleans the raw AI output (removes markdown code fences) and parses the JSON into usable fields. Copywriter AI Agent (Uses OpenRouter Chat Model2 — API Key auth) — This agent writes a complete 1,000-word SEO blog post in HTML format. It uses the title, meta, and the two images from Pexels. The prompt is very detailed, specifying structure, keyword placement, and styling. OpenRouter Chat Model2 (API Key auth) — Same model as the first, but used for the second agent. Cleanup HTML (No auth) — A Set node that removes any leftover htmlurlhttps://www.googleapis.com/blogger/v3/blogs/$vars.bloggerid/postsPOSThttpQueryAuthAuthorization$vars.telegramchatid$vars.bloggeridbusinesssports`) to match your niche. Multi-language Support — Modify the Mediastack query to fetch news in other languages, and adjust the AI prompts to write in that language. Custom Image Sources — Replace the Pexels node with another image API (e.g., Unsplash) or use a local image generation model. Different CMS — Swap the Blogger HTTP Request node with WordPress or any other CMS API (just change the URL and body format). Human-in-the-Loop — Add a Slack or email approval step before publishing to review the AI-generated content. Newsletter Integration — Instead of posting to a blog, send the formatted content as an email newsletter via Gmail or SendGrid.
AI Chat Agent with OpenAI, Memory, and Web Search
Overview This workflow creates an intelligent AI chat agent that combines OpenAI's language model with conversational memory and real-time web search capabilities via SerpAPI. It is designed to power interactive chat applications where the AI can remember context across messages and fetch up-to-date information from the internet when needed. This is particularly useful for building customer support bots, research assistants, or any conversational interface that requires both knowledge retention and live data access. The workflow is triggered by incoming chat messages and processes them through an AI agent that coordinates between the language model, memory buffer, and search tool. The agent can decide when to use web search to answer questions that require current information, while maintaining conversation history for coherent multi-turn dialogues. Workflow Steps Manual Trigger (No auth) — This node allows you to manually start the workflow for testing purposes. It has no parameters configured and simply provides a button to execute the workflow on demand. When chat message received (No auth) — This is a webhook-based trigger that listens for incoming chat messages. It generates a unique webhook URL that you can integrate with your chat frontend or messaging platform. The parameter is empty, meaning default webhook behavior is used. AI Agent (No auth) — This is the core orchestrator node that manages the conversation flow. It coordinates between the OpenAI model, memory buffer, and SerpAPI tool. The agent decides which tool to use based on the user's query and maintains the conversation state. OpenAI Chat Model (API Key auth) — This node connects to OpenAI's GPT-4o-mini model to generate responses. It requires an OpenAI API key configured in n8n credentials. The parameter is set to , which is a cost-effective and fast model suitable for chat applications. The parameter is empty, using default model settings. Window Buffer Memory (No auth) — This node implements a sliding window memory that stores recent conversation history. It allows the AI to remember context from previous messages within a configurable window size. The parameters are empty, using default memory settings. SerpAPI (API Key auth) — This tool node enables web search functionality via SerpAPI (Google Search API). It requires a SerpAPI API key configured in n8n credentials. The parameter is empty, using default search settings. The agent calls this node when it determines that real-time web data is needed to answer a query. Setup Instructions To use this workflow, you need the following accounts and credentials: OpenAI Account: Sign up at platform.openai.com and create an API key. In n8n, create an "OpenAI" credential and paste your API key. SerpAPI Account: Register at serpapi.com and obtain an API key. In n8n, create a "SerpAPI" credential with your key. Webhook URL: After activating the workflow, copy the webhook URL from the "When chat message received" node. Integrate this URL into your chat application (e.g., a custom web chat widget, Slack app, or Telegram bot). Optional: Configure the memory window size in the "Window Buffer Memory" node if you want to limit or extend conversation context. Use Cases and Variations This workflow can be adapted for multiple scenarios: Customer Support Bot: Replace SerpAPI with a knowledge base tool (e.g., vector store or database lookup) to answer product-specific questions. Research Assistant: Keep SerpAPI for web search and add additional tools like Wikipedia or news APIs. Multi-Platform Chat: Connect the webhook to different messaging platforms (Slack, Discord, Telegram) by adding appropriate trigger nodes. Personal Assistant: Add calendar or email tools to let the AI manage schedules and send messages. Language Translation: Replace the OpenAI model with a translation-specific model or add a translation tool node. To extend the workflow, you can add more tool nodes (e.g., database queries, file operations) and connect them to the AI Agent. The agent will automatically learn to use new tools based on their descriptions.
AI Blog Generator For WordPress Posts
AI Blog Generator For WordPress Posts This workflow automates the creation of blog post drafts by combining an n8n form, OpenAI's language model, and WordPress. It's designed for content creators, marketers, and bloggers who want to overcome writer's block and streamline their content pipeline. Instead of starting from a blank page, you submit a topic, target audience, and key points through a simple form, and the workflow generates a structured, well-written draft ready for your review and editing in WordPress. The core value of this workflow is its efficiency. It transforms a time-consuming task—writing a first draft—into a quick, structured process. By keeping the output as a 'draft' in WordPress, it ensures that nothing goes live without your final approval, maintaining editorial control. The workflow also includes thoughtful touches like automatic retries for the AI call and clear instructions for troubleshooting, making it robust and user-friendly. Workflow Nodes and Steps Here is a step-by-step breakdown of the workflow: Setup — read me first (Sticky Note) — Provides an overview, setup time, level, and links to the creator's site. How it runs (Sticky Note) — Explains the workflow's logic and data flow. If something breaks (Sticky Note) — Offers guidance on error handling and setting up an error workflow. Draft Request Form (Form Trigger) — This node hosts a web form with fields for 'Topic', 'Audience', and 'Key points (one per line)'. It starts the workflow when the form is submitted. (No auth required for the form itself). Write Draft (OpenAI) — This node uses the model to generate the blog post. It receives the form data and uses a carefully crafted prompt to produce a title and body in HTML format. (API Key auth). Split Title and Body (Code) — A JavaScript code node that parses the AI's response, extracting the title and the HTML body content into separate fields for the next step. (No auth). Create WordPress Draft (WordPress) — This node creates a new post in WordPress with the generated title and content, setting the status to 'draft' so it's not published immediately. (Application Password auth). Setup Instructions To use this workflow, you will need the following: OpenAI Account: You need an API key from OpenAI. Create an account at platform.openai.com, go to the API keys section, and create a new secret key. Add this key to the 'Write Draft' node's credentials. WordPress Site: You need a self-hosted WordPress.org site (not WordPress.com). To connect, you'll need to generate an Application Password. In your WordPress admin dashboard, go to Users > Profile and scroll down to the 'Application Passwords' section. Create a new one and use those credentials in the 'Create WordPress Draft' node. Activate the Workflow: After connecting your credentials, activate the workflow in n8n. The 'Draft Request Form' node will provide a production URL. Bookmark this URL to access your form. Use Cases and Variations Content Calendars: Integrate this with a Google Sheets node to log all generated drafts and their statuses. Multi-Platform Publishing: Add a step to convert the HTML draft to Markdown and send it to other CMSs like Ghost or Dev.to. SEO Optimization: Insert a node to analyze the generated content for keywords or readability scores before creating the WordPress post. Team Collaboration: Instead of a public form, trigger the workflow from a Slack command or email, allowing your team to submit topics without leaving their communication tools. Different Content Types: Modify the prompt in the 'Write Draft' node to generate other content formats like product descriptions, social media posts, or email newsletters.