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
AI-Powered Unsplash to Pinterest Workflow with RAG
Overview This workflow provides an intelligent pipeline for processing and storing data related to Unsplash images for Pinterest. It uses a Retrieval-Augmented Generation (RAG) architecture to automatically ingest content, generate embeddings, store them in a vector database (Supabase), and then process queries using an AI agent. The workflow is triggered via a webhook, making it suitable for integration with external applications or manual testing. Node-by-Node Breakdown Sticky Note — A visual note for documentation purposes. It displays the title "Automated workflow: Unsplash to Pinterest" on the canvas. No authentication required. Webhook Trigger — Listens for incoming HTTP POST requests at the path . This is the entry point for the workflow. When triggered, it passes the incoming data to the next nodes. (No auth) Text Splitter — Splits incoming text into chunks of 400 characters with a 40-character overlap. This prepares the data for embedding by breaking it into manageable pieces. (No auth) Embeddings (Cohere) — Generates vector embeddings for each text chunk using the model from Cohere. These embeddings represent the semantic meaning of the text. (API Key auth — requires a Cohere API key) Supabase Insert — Inserts the generated embeddings into a Supabase vector store named . This stores the data for later retrieval. (API Key auth — requires Supabase credentials) Supabase Query — Queries the same Supabase vector store () to retrieve relevant vectors based on similarity search. This is used by the RAG agent to find context. (API Key auth — requires Supabase credentials) Vector Tool — Wraps the Supabase vector store as a tool that the AI agent can use to retrieve context. It's labeled "Vector context" for clarity. (No auth — uses the Supabase connection from the previous nodes) Window Memory — Provides a buffer window memory for the AI agent, allowing it to maintain conversation context across multiple interactions. (No auth) Chat Model (OpenAI) — The language model that powers the AI agent. It uses OpenAI's chat model to process queries and generate responses. (API Key auth — requires an OpenAI API key) RAG Agent — The core AI agent that combines the chat model, vector tool, and memory. It processes incoming data with the prompt: "Process the following data for task 'Unsplash to Pinterest':" and includes a system message: "You are an assistant for Unsplash to Pinterest". (No auth — uses connections to other nodes) Append Sheet (Google Sheets) — Appends the AI agent's output to a Google Sheet. It writes to a sheet named "Log" in a document identified by . The column "Status" is populated with the agent's response text. (OAuth2 — requires Google Sheets API credentials) Slack Alert — Sends an error notification to the Slack channel if the RAG Agent encounters an error. The message includes the error details. (OAuth2 — requires Slack API credentials) Setup Instructions To use this workflow, you'll need accounts and API keys for the following services: Cohere: Sign up at cohere.com and generate an API key for the embeddings model. Supabase: Create a project at supabase.com and set up a vector store with the name . You'll need your Supabase URL and service role key. OpenAI: Get an API key from platform.openai.com for the chat model. Google Sheets: Create a Google Sheet with a sheet named "Log" and note the Sheet ID from the URL. Set up OAuth2 credentials in the Google Cloud Console. Slack: Create a Slack app, add it to your workspace, and obtain OAuth tokens. Create a channel named for error notifications. Configure each node's credentials in n8n by clicking on the node and selecting "Add Credential" or selecting existing ones. Use Cases and Variations This workflow is ideal for: Content Curation: Automatically process and store descriptions of Unsplash images for later retrieval and Pinterest posting. Knowledge Base: Build a searchable database of image metadata with semantic search capabilities. Automated Content Moderation: Use the AI agent to analyze image descriptions and flag inappropriate content before posting. Possible Adaptations: Replace the webhook trigger with a Schedule Trigger to run the workflow at regular intervals. Swap the Cohere embeddings with OpenAI embeddings or Hugging Face embeddings. Instead of Google Sheets, output to Airtable, Notion, or PostgreSQL. Add an HTTP Request node after the RAG Agent to post processed data directly to Pinterest's API. Use a different vector store like Pinecone or Qdrant instead of Supabase.
Telegram AI Chatbot with OpenAI GPT
Overview This workflow turns your Telegram bot into a smart AI assistant powered by OpenAI's GPT models. Every time someone sends a message to your bot, the workflow forwards it to GPT, generates a context-aware reply, and sends it back — all in a few seconds. It's a cost-effective alternative to paid chatbot platforms, giving you full control over the personality and rules via a system prompt. How It Works The workflow is triggered by an incoming Telegram message, processes it through an AI model, and replies to the same chat. Here are the nodes and their roles: Telegram Message In (Telegram Bot Token auth) — Watches for new messages in your bot's chat. Configured to listen for updates only. No additional parameters. AI Reply (OpenAI API Key auth) — Sends the user's message to OpenAI's GPT model (here as a placeholder – you can choose any available model). The request includes a system prompt that defines the bot's behavior (e.g., "You are a helpful, concise assistant...") and the user message from the Telegram trigger. This node has retry on fail enabled (3 retries, 5 seconds apart) to handle transient errors. Send Reply (Telegram Bot Token auth) — Takes the AI's response (from ) and sends it back to the original chat, using the from the trigger. No retry is configured to avoid duplicate messages. Setup Instructions Create a Telegram Bot: Open Telegram, search for , and send . Follow the prompts to get a bot token (e.g., ). Get an OpenAI API Key: Sign up at platform.openai.com, create an API key, and ensure it has access to the GPT model you want to use. Configure Credentials in n8n: - For the Telegram nodes (Trigger and Send), create a new credential of type "Telegram API" and paste your bot token. - For the AI Reply node, create a credential of type "OpenAI" and paste your API key. Edit the System Prompt: Open the AI Reply node and modify the system message to change the bot's personality, tone, or knowledge constraints. For example, you can make it a support agent, a tutor, or a sarcastic friend. Activate the Workflow: Once saved, toggle the workflow to "Active". Send a message to your bot on Telegram to test it. Use Cases & Variations Customer Support: Replace the system prompt with your FAQ and company policies to create a 24/7 support bot. Personal Assistant: Add a directive to remember context (requires additional memory nodes like Window Buffer Memory) or integrate with calendars/tasks. Multi‑language Translator: Change the system prompt to "Translate the user's message to Spanish" and use the AI reply as a translation service. Content Generator: Have the bot generate blog posts, jokes, or summaries based on user requests. Error Handling: The workflow includes retries on the AI node only. If you want to be notified of failures, add an Error Trigger workflow that sends alerts to Slack or email.
Telegram AI Bot with DALL-E Image Generation using LangChain
Overview This workflow creates an intelligent Telegram bot that leverages OpenAI's GPT-4o and DALL-E 3 models through n8n's LangChain integration. The bot can hold context-aware conversations (remembering the last 10 messages per user) and generate images on demand—all via simple Telegram messages. It's ideal for building personal assistants, creative bots, or customer support agents that need visual output. Node-by-Node Walkthrough Here's every node in the workflow, along with its authentication method and key configuration: Listen for incoming events (Telegram Trigger — No auth; bot token set in node credential) – Listens for all types of Telegram updates (messages, commands, etc.). No authentication parameters are required directly on the node; the Telegram bot token is configured via the node's credential settings. AI Agent (LangChain Agent — No auth; relies on connected sub‑nodes) – The core of the workflow. It receives the incoming message text and uses the attached language model (OpenAI Chat Model), memory (Window Buffer Memory), and tools (Send back an image / Generate image in Dalle) to decide what action to take. OpenAI Chat Model (LangChain Chat Model — API Key auth via credential) – Uses with a temperature of 0.7 and frequency penalty of 0.2. This model powers the agent's text responses. Window Buffer Memory (LangChain Memory — No auth) – Stores the last 10 messages per user (keyed by Telegram chat ID) to maintain conversational context. Generate image in Dalle (LangChain HTTP Request Tool — API Key auth via credential) – A custom tool that sends a POST request to with model and a prompt (provided by the AI agent). The tool description tells the agent to call it when the user asks to draw something. Send back an image (Telegram Tool — API Key auth via Telegram credential) – Sends a file (image URL from the DALL-E response) to the user's chat ID using the operation. This is exposed as a tool the AI agent can call. Send final reply (Telegram Node — API Key auth via Telegram credential) – Sends the AI agent's text output (from ) back to the user. Note: On error, the workflow continues to the error output (useful for debugging). Detailed Flow The Telegram Trigger catches any incoming message from your bot. The message text is passed to the AI Agent. The agent uses the OpenAI Chat Model to understand the request and generate a response. It also checks the Window Buffer Memory for recent conversation history. If the user asks for an image, the agent calls the Generate image in Dalle tool, which returns an image URL. The agent then uses the Send back an image tool to send that image to the user. For all other requests, the agent produces a text response, which is sent via the Send final reply node. Setup Instructions Telegram Bot – Create a bot via @BotFather and get the API token. In n8n, create a Telegram credential and paste the token. OpenAI Account – Obtain an API key from OpenAI's platform. Create an credential in n8n and paste the key. This credential is used by both the Chat Model and the DALL-E tool. Workflow Activation – After configuring the credentials, activate the workflow. n8n will automatically set up the webhook for the Telegram trigger (no manual URL needed—n8n handles it internally). Test – Send a message to your bot on Telegram. Try asking a question or say “Draw a cat wearing a hat” to trigger image generation. Use Cases & Variations Personal Assistant – Extend with additional tools (web search, calendar lookup, weather API) to make a full‑fledged chatbot. Customer Support – Replace the OpenAI model with a fine‑tuned model or add a fallback to a human agent using n8n's error handling. Image Editor – Modify the DALL-E tool to accept style parameters or multiple images. Multi‑Language – Add a translation node before the AI agent to support multiple languages. Logging – Insert a database node (e.g., Google Sheets, PostgreSQL) to store conversation logs for analysis.