Generate & deploy landing pages with GPT, Gemini and Vercel

Chat input → session memory → AI image & HTML generation → save & deploy to Vercel → return public URL

Who

People who want to quickly launch simple landing pages without monthly fees; ideal for rapid prototyping, bulk generation, campaign testing, or AI web mockups

You get

Auto-generate a responsive landing page with hero image from a text description, deploy to Vercel, and return a shareable public link

You need

n8n · openai · google-gemini · chat-trigger · http-request · code · data-table

Steps

1. Fetch existing memory and prepare prompt

   Query the n8n Data Table for the current sessionID's history, merge the user's latest chat input with any existing HTML. If the user input contains "start new", clear the historical HTML. Outputs an object with prompt, current_html, and sessionId for downstream nodes. 🔧 Edit Required: Replace the data table name (e.g., html_memory_mini_loveable) with your own memory table, and ensure it has sessionID and html columns.

2. Generate image prompt and create hero image

   First use GPT-4o-mini to convert the user's landing-page idea into a vivid scene description (DALL·E prompt), then generate the hero image via Google Gemini (Nano Banana model). 🔧 Edit Required: Replace the OpenAI and Gemini (PaLM) credentials with your own API keys. The Gemini (PaLM) API key is available through Google Cloud Platform. Optionally swap the Gemini node for an OpenAI DALL·E 2 node—simpler and cheaper but lower quality.

   Execution prompt · Source text。OpenAI node 'Generate Image Prompt' system message field

   Copy prompt

   You are a prompt generator for DALL·E. Convert the user’s landing-page idea into ONE concise, vivid scene description for a website hero image. Include composition, setting, lighting, color palette, mood, style. Exclude any UI text, logos, or typography. Output ONLY the description text—no preface or formatting.

3. Process image for upload

   Convert the Gemini-generated image into a Base64 string, then wrap it as a data:image/png;base64,… Data URI for upload or preview.

4. Upload image to Cloudinary and return link

   Upload the Base64-encoded image to Cloudinary via multipart/form-data, outputting a publicly accessible image URL. 🔧 Edit Required: Replace <your_cloud_key> in the URL with your actual Cloudinary cloud name.

5. Generate landing page HTML

   Generate a responsive landing-page HTML layout using GPT-4o-mini based on the user's topic and design input. Editing the prompt instructions can significantly improve final output. 🔧 Edit Required: Update the OpenAI credential to your own. Optionally switch to GPT-4o or Gemini 2.5 Flash for richer, more creative HTML output.

   Execution prompt · Source text。OpenAI node 'Generate HTML (OpenAI)' system message field

   Copy prompt

   You are an expert web designer generating HTML websites. You always follow Apple's style of design.

6. Save HTML to memory and prepare for deployment

   Save the generated HTML to the n8n Data Table via upsert by current sessionID, while preparing a clean JSON payload for Vercel deployment. 🔧 Edit Required: Replace the data table name (e.g., html_memory_mini_loveable) with your own.

7. Deploy site to Vercel

   Deploy the HTML to Vercel, retrieve the new deployment URL, make it publicly accessible, and format it as an easy-to-share link returned to the user. 🔧 Edit Required: Update the Vercel API credential or Header Auth token with your account's access token.

You are an n8n workflow setup assistant. The user wants to replicate an AI landing page generator: from chat input, through session memory, image generation, HTML generation, to final deployment on Vercel. First confirm the user has these prerequisites ready: n8n instance, OpenAI API key, GCP Gemini API key, Cloudinary account, Vercel account, and an n8n Data Table with sessionID and html columns. Then guide them to update template placeholders (credentials, table name, cloud name, token). Finally suggest testing end-to-end with a simple prompt.