AI Class

Cara Bangun AI Agent Auto-Generate Landing Page dengan n8n + GPT (MVP 2 Hari)

· 4 menit baca

Cara Bangun AI Agent Auto-Generate Landing Page dengan n8n + GPT (MVP 2 Hari)

Problem: Membuat landing page yang menarik tiap kampanye marketing biasanya memakan waktu desain, copywriting, dan integrasi. Untuk startup atau indie hacker, speed adalah uang – namun tim sering terjebak pada copy‑pasting yang bikin burnout.

Kenapa n8n + GPT?

  • Low‑code orchestration: n8n menyatukan API, webhook, dan logika bisnis dalam satu canvas visual.
  • LLM sebagai penulis: GPT‑4 (atau model OpenAI lainnya) dapat menulis headline, benefit, CTA, bahkan HTML/CSS dengan prompt yang tepat.
  • Iterasi cepat: Dalam 2 hari Anda sudah punya endpoint yang menerima input (contoh: product name, value proposition) dan mengeluarkan landing page siap deploy.

Workflow High‑Level

  1. Webhook trigger – terima payload JSON dari form atau internal tool.
  2. Node Set – normalisasi data (trim, fallback, slugify).
  3. Node HTTP Request – panggil OpenAI Completion dengan prompt yang dirancang untuk menghasilkan HTML dan CSS inline.
  4. Node Function – validasi JSON, inject meta tag SEO, dan optional minify.
  5. Node HTTP Request ke hosting (Vercel, Netlify, atau bucket S3) untuk publish.
  6. Node Email Send (atau Slack) – notifikasi hasil selesai.

Rincian Teknis masing‑masing Node

1. Webhook Trigger

Gunakan POST /webhook/landing. Payload contoh:

{
  "product_name": "ZapBoost",
  "tagline": "Boost your Zapier automations",
  "features": ["No‑code", "Realtime analytics", "AI‑powered suggestions"],
  "target_audience": "Marketers & SaaS founders",
  "primary_color": "#1E90FF"
}

Pastikan Content-Type: application/json dan tambahkan token API di header untuk keamanan.

2. Set Node – Normalisasi

Gunakan expression JavaScript di n8n untuk:

  • Trim string.
  • Slugify nama produk (untuk URL).
  • Jika features kurang dari 3, beri fallback default.

Contoh expression:

{{ $json["product_name"].trim() }}

3. HTTP Request – OpenAI Completion

Endpoint: https://api.openai.com/v1/chat/completions. Prompt yang efektif:

You are a senior copywriter and front‑end dev. Generate a fully responsive landing page (HTML + inline CSS) for a product.

Product name: {{ $json["product_name"] }}
Tagline: {{ $json["tagline"] }}
Features:
{% for f in $json["features"] %}- {{ f }}
{% endfor %}
Target audience: {{ $json["target_audience"] }}
Primary color: {{ $json["primary_color"] }}

Return ONLY a JSON object with two keys: "html" and "css". No explanations.

Set model ke gpt-4o-mini (lebih murah, cukup untuk markup).

4. Function Node – Post‑process

OpenAI returns JSON string; parse dan lakukan:

  • Inject <title> dan <meta name="description"> berdasarkan tagline.
  • Minify HTML (remove line breaks) dengan html-minifier library (bawa via npm install di n8n‑custom-node bila diperlukan).
  • Optional: prepend Google Font link if primary color implies brand font.

5. Publish ke Hosting

Pilih salah satu:

  • Vercel Deploy Hook – kirim POST ke URL Deploy Hook dengan file index.html di body.
  • AWS S3 + CloudFront – gunakan PutObject API, set Cache-Control dan Content-Type: text/html.

Catat URL hasil dan simpan ke DB (misalnya Airtable) untuk tracking.

6. Notifikasi

Gunakan n8n built‑in Email Send atau Slack node. Konten:

Landing page for {{ $json["product_name"] }} is live!
URL: {{ $json["published_url"] }}
Preview: {{ $json["html"] | truncate:200 }}

Contoh Use Case Real

Startup SaaS “Taskify” meluncurkan fitur baru “Smart Reminders”. Tim marketing hanya memiliki 30 menit untuk membuat landing page kampanye email. Dengan workflow di atas, mereka mengirim satu payload ke webhook, menunggu 20 detik, dan mendapatkan URL live yang langsung dibagikan ke list email.

Hasil: Conversion rate naik 2.8× karena page di‑optimasi SEO secara otomatis, dan tim tetap fokus pada strategi, bukan copywriting.

Strategi & Insight Penting

  • Prompt Engineering adalah inti. Simpan template prompt di n8n Set node, gunakan variabel placeholder. Versioning prompt dengan Git memberi kontrol perubahan.
  • Cost control. Set max_tokens ~800, gunakan gpt-4o-mini untuk HTML. Monitor penggunaan lewat n8n Execute Workflow stats.
  • Safety guard. Tambahkan step Function yang men‑scan HTML untuk script injection (<script>) sebelum publish.
  • Iterasi cepat. Setelah landing page live, gunakan feedback loop: webhook lain mencatat bounce rate, lalu kirim data ke OpenAI “improve copy” dan republish otomatis.
  • Scalability. Jika volume >100 per hari, pivot ke queue (RabbitMQ/Kafka) di depan webhook, dan worker n8n yang dijalankan di Docker Swarm.

Penutup & Call to Action

Dengan kombinasi n8n visual orchestration dan kekuatan GPT, Anda bisa mengubah proses pembuatan landing page menjadi sekitar 2 menit per halaman. Coba buat workflow di sandbox n8n, sambungkan ke OpenAI, dan publish ke Vercel – jadikan AI Agent pribadi Anda sebagai copywriter & front‑end dev.

🚀 Challenge: Bangun 3 variasi landing page untuk satu produk dalam 5 menit, pilih yang paling tinggi konversinya, dan iterasikan dengan feedback loop. Share hasilnya di Discord JIPRAKS Classroom, kami bakal beri badge “Landing Page Ninja”.

Artikel terkait